/* ==========================================================
   HumDays — prototype stylesheet
   Palette: workwear navy ink, concrete paper, hi-vis highlighter,
   carbon-copy blue for verification stamps and links.
   ========================================================== */

@font-face {
  font-family: "AzoSansRegular";
  src: url("fonts/AzoSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
/* Headings: Besley, a sturdy slab serif in the style of shop signs and ledgers (SIL Open Font License, see fonts/Besley-OFL.txt) */
@font-face {
  font-family: "Besley";
  src: url("fonts/Besley-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}

:root {
  /* One gap between any two sections, and between the title area and the first section */
  --sec-gap: 96px;
  --head-gap: 48px;
  --paper: #ECEEEA;
  --sheet: #FFFFFF;
  --ink: #13203B;
  --ink-2: #44506A;
  --muted: #687084;
  --rule: #D3D7D0;
  --rule-strong: #B7BDB4;
  --hivis: #FFD60A;
  --hivis-hover: #FFE14A;
  --carbon: #3140C2;
  --carbon-soft: #E4E7FA;
  --grow: #1B7A4A;
  --closed: #C23A2B;
  --bar-old: #AEB5C4;
  --you: #A77B00;

  /* Zawa typography: one face (AzoSans) for display, body and labels */
  --font-display: 'Besley', Georgia, 'Times New Roman', serif;
  --font-body: 'AzoSansRegular', 'Helvetica Neue', Helvetica, 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-mono: 'AzoSansRegular', 'Helvetica Neue', Helvetica, 'Segoe UI', Tahoma, Arial, sans-serif;

  /* Marketplace tones */
  --sage: #EEF3E7;
  --sage-line: #D8E1CC;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --money: #1E6B52;
  --peach: #F9DDB0;

  --maxw: 1200px;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; scrollbar-gutter: stable; overflow-y: scroll; }
/* Header/footer placeholders hold their space until app.js fills them, so nothing jumps on load */
#hd-header { display: block; height: 65px; border-bottom: 1px solid var(--rule); }
#hd-footer { display: block; min-height: 320px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .wrap { padding-inline: 16px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
}
/* Zawa .hero-title: 34 / 46 / 56 */
h1 { font-size: 34px; line-height: 1.08; }
@media (min-width: 768px) { h1 { font-size: 46px; } }
@media (min-width: 1024px) { h1 { font-size: 56px; line-height: 1.04; } }
/* Zawa .page-title: 30px, stepping up on wide screens */
h1.page-title { font-size: 30px; line-height: 1.15; }
@media (min-width: 1024px) { h1.page-title { font-size: 38px; } }
/* Zawa .section-title: 22px, larger for marketing sections on wide screens */
h2 { font-size: 22px; line-height: 1.2; }
@media (min-width: 1024px) { h2 { font-size: 30px; } }
/* Zawa .card-title */
h3 { font-size: 17px; line-height: 1.35; }
h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }

/* Zawa .section-label */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: 12px;
}
.lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 36em; }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 1.5; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Highlighter: marks a figure pulled straight from a verified source */
.hl {
  background: linear-gradient(var(--hivis), var(--hivis)) 0 80% / 100% 62% no-repeat;
  padding: 0 0.14em;
  margin: 0 -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.key-hl { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); }
.key-hl::before { content: ""; width: 22px; height: 10px; background: var(--hivis); border-radius: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(236, 238, 234, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.site-header.is-scrolled { background: rgba(244, 245, 242, 0.9); box-shadow: 0 10px 30px -22px rgba(19, 32, 59, 0.45); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.site-header { height: 65px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: -0.02em;
}
.logo-mark {
  width: 15px; height: 20px; background: var(--ink); flex: none;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 5px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 5px 100%;
  position: relative;
}
/* Desktop: the menu sits centred in a soft white track */
.nav { display: flex; margin-inline: auto; }
.nav-track {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: rgba(255, 255, 255, 0.62); border: 1px solid var(--rule); border-radius: 99px;
}
.nav-track > a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 99px;
  text-decoration: none; font-weight: 600; font-size: 0.92rem; color: var(--ink-2); white-space: nowrap;
}
.nav-track > a:hover { color: var(--ink); background: var(--sheet); }
.nav-track > a[aria-current="page"] { color: var(--ink); background: var(--sheet); box-shadow: inset 0 -2px 0 var(--hivis), 0 1px 2px rgba(19, 32, 59, 0.08); }
.nav-foot { display: none; }
.header-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.header-signin { height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 99px; text-decoration: none; font-weight: 600; font-size: 0.92rem; color: var(--ink-2); white-space: nowrap; }
.header-signin:hover { color: var(--ink); background: var(--sheet); }
.header-signin[aria-current="page"] { color: var(--ink); }
.site-header .header-cta { border-radius: 99px; padding: 0 16px; }
/* Top bar (wide screens only): newsletter on the left; jobs, pricing and the account actions on the right.
   It scrolls away with the page; the main bar below stays pinned, so the menus open where they always have. */
.topbar { display: none; background: var(--ink); color: rgba(255, 255, 255, 0.74); font-size: 14px; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 40px; }
.topbar-news { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; white-space: nowrap; }
.topbar-news b { color: #fff; font-weight: 700; }
.topbar-news span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-news a { color: var(--hivis); font-weight: 700; text-decoration: none; }
.topbar-news a::after { content: " →"; }
.topbar-news a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.topbar-nav > a:not(.acct) { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 99px; color: rgba(255, 255, 255, 0.86); font-weight: 600; text-decoration: none; white-space: nowrap; }
.topbar-nav > a:not(.acct):hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.topbar-nav > a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--hivis); border-radius: 0; }
.topbar-sep { width: 1px; height: 16px; margin: 0 8px; background: rgba(255, 255, 255, 0.24); }
.topbar-nav > a.topbar-cta { margin-left: 4px; padding: 0 14px; background: var(--hivis); color: var(--ink); font-weight: 700; }
.topbar-nav > a.topbar-cta:hover { background: var(--hivis-hover); color: var(--ink); }
.topbar .acct { height: 30px; padding-right: 12px; border-color: rgba(255, 255, 255, 0.3); background: transparent; color: #fff; font-size: 13.5px; }
.topbar .acct:hover { border-color: #fff; }
.topbar .acct i { width: 24px; height: 24px; font-size: 11px; background: var(--hivis); color: var(--ink); }
@media (min-width: 1021px) {
  .topbar { display: block; }
  #hd-header { height: 105px; }
  /* With the account actions up top, the main bar is just the logo and the six sections, centred */
  .site-header .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .site-header .logo { justify-self: start; }
  .site-header .header-actions { justify-self: end; }
  .site-header .header-signin, .site-header .header-cta, .site-header .header-actions > .acct { display: none; }
  .nav-track > a.nav-util { display: none; }
}

/* ---------- Main bar: navy, joined to the top bar so both read as one header ----------
   The one bold move is the hi-vis highlighter stroke under the section you're in: the same
   highlighter that marks verified figures. Height stays 64px so the menus open where they always have. */
#hd-header { background: var(--ink); border-bottom-color: var(--ink); }
.topbar { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.site-header { background: var(--ink); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } /* no text colour here: the menus inherit theirs */
.site-header.is-scrolled { background: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px -14px rgba(19, 32, 59, 0.55); }
.site-header .logo { color: #fff; font-size: 21px; }
.site-header .logo-mark { background: var(--hivis); }
.site-header .header-signin { color: rgba(255, 255, 255, 0.86); }
.site-header .header-signin:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.site-header .menu-btn { background: transparent; border-color: rgba(255, 255, 255, 0.32); }
.site-header .menu-btn i, .site-header .menu-btn i::before, .site-header .menu-btn i::after { background: #fff; }
.site-header .menu-btn[aria-expanded="true"] i { background: transparent; }
.site-header .menu-btn[aria-expanded="true"] i::before, .site-header .menu-btn[aria-expanded="true"] i::after { background: #fff; }
.site-header :focus-visible { outline-color: var(--hivis); }
.site-header .acct { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.site-header .acct i { background: var(--hivis); color: var(--ink); }

/* Search: the thing people most want from any page */
.nav-search { display: none; position: relative; align-items: center; }
.nav-search svg { position: absolute; left: 13px; width: 15px; height: 15px; color: rgba(255, 255, 255, 0.7); pointer-events: none; }
.nav-search input {
  width: 200px; height: 40px; padding: 0 34px 0 37px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 15px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.nav-search input::placeholder { color: rgba(255, 255, 255, 0.66); }
.nav-search input:hover { border-color: rgba(255, 255, 255, 0.36); }
.nav-search input:focus { outline: 0; background: var(--sheet); border-color: var(--hivis); color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.4); }
.nav-search input:focus::placeholder { color: var(--muted); }
.nav-search:focus-within svg { color: var(--ink-2); }
.nav-search input::-webkit-search-cancel-button { display: none; }
.nav-search kbd { position: absolute; right: 11px; min-width: 20px; padding: 0 5px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; background: transparent; color: rgba(255, 255, 255, 0.75); font-family: var(--font-body); font-size: 12px; line-height: 18px; text-align: center; }
.nav-search:focus-within kbd { display: none; }
/* "All …" link in each menu: a solid button, so the way to the full list is never missed */
.mega .mega-all {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 18px; border-radius: 99px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(19, 32, 59, 0.2); transition: background-color 0.12s ease;
}
.mega .mega-all svg { width: 16px; height: 16px; color: var(--hivis); }
.mega .mega-all:hover { background: #22325A; text-decoration: none; }
.mega .mega-all:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
/* A second way in beside it (Businesses: "Just started"): the same button in yellow */
.mega .mega-all.mega-more { margin-left: -6px; background: var(--hivis); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.mega .mega-all.mega-more svg { color: var(--ink); }
.mega .mega-all.mega-more:hover { background: #FFE04D; }
@media (max-width: 1020px) {
  .mega .mega-all { display: flex; justify-content: space-between; width: 100%; height: 46px; margin: 4px 0 0; padding: 0 18px; }
  .mega .mega-all.mega-more { margin: 8px 0 0; }
  .mega .mega-intro { padding: 0; }
}

/* Phone menu: search sits first */
.nav-search-m { display: none; }
@media (max-width: 1020px) {
  .nav-search-m { display: block; position: relative; margin: 8px 0 4px; }
  .nav-search-m svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
  .nav-search-m .input { height: 48px; padding-left: 40px; border-radius: 99px; font-size: 16px; }
}

@media (min-width: 1021px) {
  .nav-search { display: flex; }
  /* Logo | sections centred in the space left | search */
  .site-header .wrap { gap: 20px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-header .nav { justify-self: center; margin: 0; }
  .site-header .nav-track { gap: 4px; padding: 0; background: none; border: 0; border-radius: 0; }
  .site-header .nav-trigger {
    position: relative; height: 40px; padding: 0 12px; font-size: 15.5px; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.8); border-radius: 10px;
    transition: color 0.12s ease, background-color 0.12s ease;
  }
  .site-header .nav-trigger svg { opacity: 0.6; }
  .site-header .nav-trigger:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
  .site-header .nav-trigger[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.14); }
  /* You are here: a highlighter stroke, slightly uneven, like the marker on verified figures */
  .site-header .nav-trigger[aria-current="page"] { color: #fff; background: transparent; box-shadow: none; }
  .site-header .nav-trigger[aria-current="page"][aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); }
  .site-header .nav-trigger[aria-current="page"]::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 5px;
    background: var(--hivis); border-radius: 4px 2px 5px 1px / 3px 4px 2px 5px; transform: rotate(-1.2deg);
  }
  .site-header .nav-trigger[aria-current="page"] svg { opacity: 0.85; }
}
@media (min-width: 1021px) and (max-width: 1239px) {
  .site-header .nav-trigger { padding: 0 11px; font-size: 15px; }
  .site-header .wrap { gap: 16px; }
  .nav-search input { width: 40px; padding: 0; color: transparent; cursor: pointer; }
  .nav-search input::placeholder { color: transparent; }
  .nav-search input:focus { width: 220px; padding: 0 14px 0 37px; color: var(--ink); cursor: text; }
  .nav-search kbd { display: none; }
  .nav-search svg { left: 12px; }
  .nav-search { justify-content: flex-end; width: 40px; height: 40px; }
  /* Opens leftwards over the bar, so nothing beside it moves */
  .nav-search input:focus { position: absolute; right: 0; z-index: 2; }
  .nav-search svg { z-index: 3; }
  .nav-search:focus-within svg { left: -167px; }
}
@media (min-width: 1021px) and (max-width: 1120px) {
  .site-header .wrap { gap: 10px; }
  .site-header .nav-track { gap: 0; }
  .site-header .nav-trigger { padding: 0 8px; font-size: 14.5px; gap: 4px; }
  .site-header .logo { font-size: 19px; }
}
/* Hamburger: three lines that turn into a cross */
.menu-btn {
  display: none; position: relative; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: 99px; background: var(--sheet); cursor: pointer;
}
.menu-btn i, .menu-btn i::before, .menu-btn i::after {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 1.8px; margin: -0.9px 0 0 -8px;
  border-radius: 2px; background: var(--ink); transition: transform 0.22s var(--ease), opacity 0.15s ease;
}
.menu-btn i::before, .menu-btn i::after { content: ""; left: 0; top: 0; margin: 0; }
.menu-btn i::before { transform: translateY(-5px); }
.menu-btn i::after { transform: translateY(5px); }
.menu-btn[aria-expanded="true"] i { background: transparent; }
.menu-btn[aria-expanded="true"] i::before { background: var(--ink); transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { background: var(--ink); transform: rotate(-45deg); }
@media (min-width: 1021px) and (max-width: 1180px) {
  .site-header .wrap { gap: 12px; }
  .nav-track > a { padding: 0 9px; }
  .header-signin { padding: 0 9px; }
}
@media (max-width: 1020px) {
  .menu-btn { display: inline-block; }
  .header-actions { margin-left: auto; }
  /* Phone and tablet: the menu opens as a full panel under the header and the page stops scrolling */
  .nav {
    /* absolute, not fixed: the header's backdrop blur makes it the containing block */
    display: none; position: absolute; top: 64px; left: 0; right: 0; height: calc(100dvh - 64px); margin: 0;
    border-top: 1px solid var(--rule);
    flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px max(16px, calc((100vw - var(--maxw)) / 2 + 24px)) 0;
    background: var(--paper);
  }
  .nav.open { display: flex; animation: nav-in 0.2s var(--ease); }
  .nav-track { flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .nav-track > a { height: auto; padding: 16px 4px; font-size: 1.1rem; color: var(--ink); border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav-track > a:hover { background: transparent; }
  .nav-track > a[aria-current="page"] { background: none; box-shadow: inset 4px 0 0 var(--hivis); padding-left: 14px; }
  .nav-foot {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto;
    position: sticky; bottom: 0; padding: 16px 0 max(16px, env(safe-area-inset-bottom));
    background: linear-gradient(rgba(236, 238, 234, 0), var(--paper) 14px);
  }
  .nav-foot .btn:only-child { grid-column: 1 / -1; }
  html.menu-open { overflow: hidden; }
}
@media (max-width: 480px) {
  .site-header .header-cta { display: none; }
  .site-header .wrap { gap: 12px; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 8px;
  border: 2px solid var(--ink); background: var(--ink); color: #fff;
  font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background-color 0.12s ease, border-color 0.12s ease;
}
.btn-hivis { background: var(--hivis); color: var(--ink); }
.btn-hivis:hover { background: var(--hivis-hover); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--sheet); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-width: 1.5px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link { color: var(--carbon); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow::after { content: " →"; }

/* ---------- Status + verification chips ---------- */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 3px 9px 3px 8px; border-radius: 99px;
  background: var(--sheet); border: 1px solid var(--rule); white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-trading { color: var(--grow); }
.status-sale { color: var(--carbon); }
.status-closed { color: var(--closed); }
.verified {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--carbon);
  letter-spacing: 0.02em;
}
.verified svg { width: 14px; height: 14px; flex: none; }
.tag {
  display: inline-block; font-size: 0.76rem; font-weight: 600; padding: 3px 9px; border-radius: 6px;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule);
}

/* ---------- Sections ---------- */
.section { padding: calc(var(--sec-gap) / 2) 0; }
.section-tight { padding: calc(var(--sec-gap) / 2) 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.section-head .lede { margin: 14px 0 0; }
.rule-top { border-top: 1px solid var(--rule); }
@media (max-width: 640px) { :root { --sec-gap: 64px; --head-gap: 32px; } }

.band-ink { background: var(--ink); color: #fff; }
.band-ink .eyebrow { color: rgba(255, 255, 255, 0.6); }
.band-ink .lede, .band-ink .muted { color: rgba(255, 255, 255, 0.74); }
.band-ink .link { color: var(--hivis); }
.band-sheet { background: var(--sheet); border-block: 1px solid var(--rule); }

/* ---------- Page head (inner pages) ---------- */
.page-head { padding: 56px 0 calc(var(--head-gap) / 2); border-bottom: 1px solid var(--rule); }
.page-head + .section, .page-head + .section-tight { padding-top: calc(var(--head-gap) / 2); }
/* The last thing in a title area or section never adds its own margin to the standard gap */
.page-head > .wrap > :last-child, .section > .wrap > :last-child, .section-tight > .wrap > :last-child { margin-bottom: 0; }
.page-head .lede { margin-top: 18px; }
.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Grids + cards ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 22px; position: relative;
}
a.card { display: block; text-decoration: none; transition: border-color 0.15s ease; }
a.card:hover { border-color: var(--ink); }
.card h3 { margin: 10px 0 6px; }
.card-meta { font-size: 0.86rem; color: var(--muted); }
.card-quote { margin: 14px 0 16px; color: var(--ink-2); font-size: 0.98rem; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px dashed var(--rule-strong); }
.figure-label { font-size: 0.78rem; color: var(--muted); display: block; }
.figure-val { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; }

/* ---------- Home hero + till receipt ---------- */
.hero { padding: 72px 0 88px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 56px; align-items: start; }
.hero h1 { margin: 6px 0 28px; }
.hero .lede { margin-bottom: 32px; }
.hero-sources { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 0.88rem; color: var(--muted); max-width: 40em; }
.hero-sources strong { color: var(--ink-2); font-weight: 600; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } .hero { padding-top: 48px; } }

.till { width: min(370px, 100%); margin-inline: auto; position: relative; }
.till-slot {
  position: relative; z-index: 3; height: 16px; margin: 0 -18px;
  background: var(--ink); border-radius: 9px;
  box-shadow: inset 0 -5px 0 rgba(255, 255, 255, 0.09), 0 2px 0 rgba(19, 32, 59, 0.15);
}
.till-slot::after {
  content: ""; position: absolute; left: 22px; right: 22px; top: 6px; height: 3px; border-radius: 3px;
  background: #050B18;
}
.till-feed { overflow: hidden; margin-top: -8px; padding: 0 6px 28px; }
.till-shadow { filter: drop-shadow(0 14px 16px rgba(19, 32, 59, 0.18)); }
.receipt {
  position: relative; background: var(--sheet); color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  padding: 22px 22px 22px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  animation: till-feed 2.4s steps(24, end) 0.35s both;
}
@media (max-width: 640px) { .till-slot { margin: 0 -6px; } }
@keyframes till-feed { from { transform: translateY(-101%); } to { transform: translateY(0); } }
.r-center { text-align: center; }
.r-title { font-weight: 600; letter-spacing: 0.06em; }
.r-row { display: flex; justify-content: space-between; gap: 12px; }
.r-row span:last-child { text-align: right; }
.r-cut { border: 0; border-top: 1px dashed var(--ink-2); margin: 8px 0; opacity: 0.6; }
.r-total { font-weight: 600; font-size: 13px; }
.r-total .hl { padding: 0 3px; }
.r-barcode {
  height: 28px; margin: 12px 8px 6px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px,
    var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 16px);
}
.r-link { display: block; text-align: center; margin-top: 8px; color: var(--carbon); text-decoration: none; font-weight: 600; }
.r-link:hover { text-decoration: underline; }
.stamp {
  position: absolute; right: 26px; bottom: 68px;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.04em;
  color: var(--carbon); border: 3px solid var(--carbon); border-radius: 6px;
  padding: 4px 10px 3px; line-height: 1; text-align: center;
  transform: rotate(-9deg); opacity: 0.88; mix-blend-mode: multiply;
  animation: stamp-down 0.28s cubic-bezier(0.2, 1.4, 0.4, 1) 2.85s both;
}
.stamp small { display: block; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em; margin-top: 3px; }
@keyframes stamp-down { from { opacity: 0; transform: rotate(-9deg) scale(1.7); } to { opacity: 0.88; transform: rotate(-9deg) scale(1); } }

/* ---------- Chips, controls ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid var(--rule-strong); background: var(--sheet); border-radius: 99px;
  padding: 7px 14px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .field legend { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); padding: 0; }
.input, .select {
  height: 44px; width: 100%; padding: 0 12px; border-radius: 8px;
  border: 1.5px solid var(--rule-strong); background: var(--sheet); color: var(--ink);
  font: inherit; font-size: 0.95rem;
}
.select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313203B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input:hover, .select:hover { border-color: var(--ink-2); }
.filters { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; margin-bottom: 20px; }
.filters.filters-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .filters, .filters.filters-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filters .field-wide { grid-column: 1 / -1; } }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: inline-block; padding: 8px 13px; border-radius: 8px; border: 1.5px solid var(--rule-strong);
  background: var(--sheet); font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.seg input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }

/* ---------- Leaderboard / ledger rows ---------- */
.ledger { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ledger-head, .ledger-row {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 34px minmax(0, 2.3fr) minmax(0, 1.2fr) minmax(0, 1.1fr) 64px 124px 96px;
  padding: 0 20px;
}
.ledger-head {
  min-height: 42px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); background: #FAFBF9;
}
.ledger-row { min-height: 70px; text-decoration: none; border-bottom: 1px solid var(--rule); transition: background-color 0.12s; }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row:hover { background: #F7F8F5; }
.ledger-rank { font-family: var(--font-mono); color: var(--muted); font-size: 0.85rem; }
.ledger-name { font-weight: 700; display: block; line-height: 1.25; }
.ledger-sub { font-size: 0.82rem; color: var(--muted); }
.ledger-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.92rem; text-align: right; }
.ledger-num.up { color: var(--grow); }
.ledger-num.down { color: var(--closed); }
.ledger-head .ledger-num { font-size: 0.68rem; }
.ledger-spark { justify-self: end; }
@media (max-width: 900px) {
  .ledger-head { display: none; }
  .ledger-row {
    grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "rank name rev" "rank meta spark";
    row-gap: 6px; padding: 14px 16px;
  }
  .ledger-row > .ledger-rank { grid-area: rank; align-self: start; padding-top: 2px; }
  .ledger-row > .ledger-who { grid-area: name; }
  .ledger-row > .ledger-type, .ledger-row > .ledger-loc, .ledger-row > .ledger-yoy { display: none; }
  .ledger-row > .ledger-rev { grid-area: rev; }
  .ledger-row > .ledger-meta-m { grid-area: meta; display: block; }
  .ledger-row > .ledger-spark { grid-area: spark; }
}
.ledger-meta-m { display: none; font-size: 0.82rem; color: var(--muted); }
.ledger-empty { padding: 40px 20px; text-align: center; color: var(--ink-2); }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  border: 0; background: transparent; padding: 8px 12px; border-radius: 6px; cursor: pointer;
  font-weight: 600; font-size: 0.92rem; color: var(--ink-2);
}
.tab:hover { background: var(--sheet); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }

/* ---------- Both sides of the ledger ---------- */
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 4px solid var(--grow); margin-bottom: 18px; }
.side-closed .side-head { border-top-color: var(--closed); }
.side-head h3 { margin: 0; }
.side-list { display: grid; gap: 14px; }
a.card.story-row, .story-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.story-row .figure-val { text-align: right; white-space: nowrap; }
.story-row h3 { margin: 8px 0 4px; font-size: 1.1rem; }
.story-row p { margin: 8px 0 0; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 860px) { .sides { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

/* ---------- Mini odds (home) + odds page ---------- */
.odds-mini { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.odds-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; }
.odds-sentence { font-size: 1.3rem; line-height: 1.4; font-weight: 600; margin: 0 0 22px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.facts > div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.facts > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.facts > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.facts dt { font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; }
.facts dd small { display: block; font-size: 0.78rem; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
@media (max-width: 860px) { .odds-mini { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3n + 1) { padding-left: 16px; border-left: 1px solid var(--rule); }
  .facts > div:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}

.odds-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; align-items: start; }
.odds-form { position: sticky; top: 88px; display: grid; gap: 22px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; }
@media (max-width: 960px) { .odds-layout { grid-template-columns: minmax(0, 1fr); } .odds-form { position: static; } }
.odds-block { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px; margin-bottom: 20px; }
.odds-block h3 { margin-bottom: 6px; }
.odds-block > .muted { margin-bottom: 20px; }
.note {
  border: 1px solid #EFE3A8; background: #FFFBE3; padding: 12px 16px; border-radius: 8px;
  font-size: 0.93rem; color: var(--ink); margin: 0 0 20px;
}
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.check-list li { padding-left: 28px; position: relative; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 4px; background: var(--grow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---------- Charts ---------- */
.range { position: relative; height: 30px; margin: 10px 0 8px; }
.range::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.range-track { position: absolute; top: 50%; height: 4px; margin-top: -2px; background: #B9C0EC; border-radius: 4px; }
.range-box { position: absolute; top: 50%; height: 16px; margin-top: -8px; background: var(--carbon); border-radius: 4px; }
.range-med { position: absolute; top: 50%; width: 4px; height: 26px; margin: -13px 0 0 -2px; background: var(--ink); border-radius: 2px; box-shadow: 0 0 0 2px var(--sheet); }
.range.has-you { margin-top: 44px; }
.range-you { position: absolute; top: -34px; bottom: -3px; width: 0; }
.range-you::before { content: ""; position: absolute; left: -1px; top: 24px; bottom: 0; width: 2px; border-radius: 1px; background: var(--you); }
.range-you span {
  position: absolute; top: 0; left: 0; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 3.5px 9px 0; border-radius: 6px; box-sizing: border-box;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0;
  color: var(--ink); background: var(--hivis); white-space: nowrap;
  box-shadow: 0 1px 2px rgba(19, 32, 59, 0.12);
}
.range-you.at-start span { transform: translateX(-10px); }
.range-you.at-end span { transform: translateX(calc(-100% + 10px)); }
.range-labels { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem; color: var(--muted); flex-wrap: wrap; }
.range-labels b { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.range-key { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.78rem; color: var(--muted); margin-top: 12px; }
.range-key i { display: inline-block; vertical-align: middle; margin-right: 6px; border-radius: 3px; }
.rk-mid { width: 18px; height: 10px; background: var(--carbon); }
.rk-wide { width: 18px; height: 4px; background: #B9C0EC; }
.rk-med { width: 4px; height: 14px; background: var(--ink); }

.bench-row { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.bench-row:first-of-type { padding-top: 4px; }
.bench-row:last-child { border-bottom: 0; }
.bench-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; }
.bench-top b { font-weight: 700; }
.band-ink .range::before { background: rgba(255, 255, 255, 0.2); }
.band-ink .range-med { box-shadow: 0 0 0 2px var(--ink); }

.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 48px; gap: 14px; align-items: center; font-size: 0.92rem; }
.hbar-track { height: 14px; }
.hbar-fill { display: block; height: 100%; background: var(--ink); border-radius: 0 4px 4px 0; min-width: 3px; }
.hbar-val { font-family: var(--font-mono); font-size: 0.85rem; text-align: right; }
@media (max-width: 560px) {
  .hbar { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 4px; }
  .hbar-label { grid-column: 1 / -1; }
}

.chart { position: relative; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-mono); font-size: 10.5px; fill: var(--muted); }
.chart .grid-line { stroke: #E3E6E0; stroke-width: 1; }
.chart .base-line { stroke: var(--rule-strong); stroke-width: 1; }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:focus { outline: none; }
.chart .hit:focus-visible { fill: rgba(49, 64, 194, 0.08); }
.chart-key { display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.8rem; color: var(--muted); margin: 4px 0 12px; }
.chart-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.table-toggle { margin-top: 14px; font-size: 0.88rem; }
.table-toggle summary { cursor: pointer; color: var(--carbon); font-weight: 600; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.86rem; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.data-table td.num, .data-table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.data-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.table-scroll { overflow-x: auto; }

.tip {
  position: fixed; z-index: 100; pointer-events: none; opacity: 0;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 7px 10px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px)); transition: opacity 0.1s;
}
.tip.show { opacity: 1; }
.tip b { font-weight: 600; }

/* ---------- Profile page ---------- */
.profile-head { padding: 44px 0 36px; border-bottom: 1px solid var(--rule); }
.profile-head h1 { font-size: clamp(2.1rem, 5vw, 4rem); line-height: 0.98; margin: 10px 0 14px; }
.profile-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: var(--ink-2); }
.verify-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; padding: 12px 16px;
  background: var(--carbon-soft); border-radius: 8px; font-size: 0.9rem; color: var(--ink);
}
.verify-strip strong { color: var(--carbon); }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; padding-block: 40px 96px; }
.profile-aside { position: sticky; top: 88px; display: grid; gap: 20px; }
@media (max-width: 1000px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } .profile-aside { position: static; } }
.ledger-facts { margin: 0; }
.ledger-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--rule-strong); }
.ledger-facts div:last-child { border-bottom: 0; }
.ledger-facts dt { color: var(--ink-2); font-size: 0.92rem; }
.ledger-facts dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem; text-align: right; }
.ask-box { background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--radius); padding: 22px; box-shadow: 6px 6px 0 var(--hivis); }
.ask-box .eyebrow { color: var(--ink); margin-bottom: 8px; }
.ask-box h3 { margin-bottom: 8px; }
.ask-box p { color: var(--ink-2); font-size: 0.95rem; }
.sale-box { background: var(--sheet); border: 1px solid var(--carbon); border-radius: var(--radius); padding: 22px; }
.closed-box { background: #FDF3F1; border: 1px solid #EBC4BD; border-radius: var(--radius); padding: 24px; margin-bottom: 32px; }
.closed-box h2 { font-size: 1.6rem; margin: 6px 0 12px; }
.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px; margin-bottom: 24px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.interview h2 { font-size: 1.9rem; margin: 0 0 20px; }
.qa { padding: 22px 0; border-top: 1px solid var(--rule); }
.qa h3 { font-size: 1.12rem; margin-bottom: 10px; }
.qa p { font-size: 1.04rem; line-height: 1.65; color: var(--ink); max-width: 40em; margin: 0; }
.qa-link { color: inherit; text-decoration: none; }
.qa-link:hover { text-decoration: underline; }
/* Owner Q&A (spec §7.15): question cards with answer panels */
.qa-card { padding: 22px 24px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; }
.qa-card + .qa-card { margin-top: 14px; }
.qa-q { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.qa-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--hivis); color: var(--ink); font-style: normal; font-size: 16px; font-weight: 800; }
.qa-card .qa-title { margin: 4px 0 0; font-family: var(--font-body); font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; }
.qa-card .qa-meta { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.qa-card .qa-meta a { color: inherit; }
.qa-answers { display: grid; gap: 14px; margin-top: 16px; padding-left: 50px; }
.qa-ans { padding-top: 14px; border-top: 1px solid var(--rule); }
.qa-ans-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.qa-av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--rule); color: var(--ink-2); font-style: normal; font-size: 13px; font-weight: 700; }
.qa-av.is-owner { background: var(--grow); color: #fff; }
.qa-av svg { width: 18px; height: 18px; }
.qa-name { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.qa-name a { color: inherit; text-decoration: none; }
.qa-name a:hover { text-decoration: underline; }
.qa-name small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.qa-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid var(--sage-line); border-radius: 99px; background: var(--sheet); color: var(--grow); font-size: 11.5px; font-weight: 700; }
.qa-badge svg { width: 12px; height: 12px; }
.qa-when { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.qa-ans .qa-text { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); max-width: 44em; }
.qa-help { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-top: 10px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 99px; background: var(--sheet); font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.qa-help svg { width: 14px; height: 14px; }
.qa-help[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.qa-answers .qa-wait { margin: 0; font-size: 14px; color: var(--muted); }
.qa-answers.is-page { padding-left: 0; }
@media (max-width: 640px) { .qa-card { padding: 18px 16px; } .qa-answers { padding-left: 0; } .qa-ans { padding-top: 12px; } .qa-when { flex-basis: 100%; margin: -4px 0 0 42px; } }
.qa-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.qa-foot > p, .prose .qa-foot > p { margin: 0; font-size: 13.5px; color: var(--muted); }
.msg-dialog textarea { width: 100%; min-height: 120px; padding: 12px 14px; resize: vertical; font: inherit; font-size: 15px; line-height: 1.5; }
.msg-dialog .msg-left { margin: 10px 0 16px; font-size: 13.5px; color: var(--muted); }
.ask-fields { display: grid; gap: 14px; }
.ask-fields textarea.input { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.interest .fine + .fine, .interest .btn + .fine { margin-top: 10px; }
.bk-msg { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--rule-strong); }
.timeline li:last-child { border-bottom: 0; }
.timeline b { font-family: var(--font-mono); font-weight: 600; }
.empty-state { padding: 28px; border: 1.5px dashed var(--rule-strong); border-radius: var(--radius); text-align: center; color: var(--ink-2); }

/* ---------- Listings (for sale) ---------- */
.listing { display: flex; flex-direction: column; gap: 14px; }
.listing-top { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.listing h3 { margin: 6px 0 4px; }
.listing-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 0; border-block: 1px dashed var(--rule-strong); }
.listing-figs .figure-val { font-size: 1rem; }
.listing-note { font-size: 0.88rem; color: var(--ink-2); margin: 0; }
.listing .btn-row { margin-top: auto; }

/* ---------- Steps (real sequences only) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.steps li { counter-increment: step; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
.steps li::before {
  content: counter(step); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; margin-bottom: 14px;
}
.steps h3 { font-size: 1.05rem; margin-bottom: 8px; }
.steps p { font-size: 0.93rem; color: var(--ink-2); margin: 0; }
.steps.steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .steps, .steps.steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps, .steps.steps-5 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Connect picker: one searchable chooser, the chosen provider's steps, one button; progress on the side ---------- */
.cx { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.cx.is-single { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
.cx-main { display: grid; gap: 22px; min-width: 0; }
.cx-label { display: block; margin: 0 0 10px; padding: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.cx-where legend { float: none; }
.cx-pick { position: relative; }
.cx-trigger {
  width: 100%; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 14px 10px 12px; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  background: var(--sheet); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 10px 30px -18px rgba(19, 32, 59, 0.45);
}
.cx-trigger[aria-expanded="true"], .cx-trigger:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.55), 0 10px 30px -18px rgba(19, 32, 59, 0.45); }
.cx-chev { margin-left: auto; flex: none; color: var(--ink-2); }
.cx-chev svg { width: 20px; height: 20px; }
.cx-logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: #fff; font-style: normal; }
.cx-word { font-size: 10.5px; font-weight: 700; letter-spacing: -0.01em; }
.cx-logo.is-sm .cx-word { font-size: 9px; }
.cx-logo svg { width: 20px; height: 20px; }
.cx-logo.is-sm { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
.cx-logo.is-sm svg { width: 17px; height: 17px; }
.cx-name { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cx-name b { font-size: 15.5px; line-height: 1.3; }
.cx-name small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.cx-pop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; overflow: hidden; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; box-shadow: 0 24px 50px -24px rgba(19, 32, 59, 0.45); }
.cx-pop[hidden] { display: none; }
.cx-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.cx-search svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.cx-search input { flex: 1; min-width: 0; height: 52px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: var(--ink); }
.cx-search input::placeholder { color: var(--muted); }
.cx-opts { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow-y: auto; }
.cx-grp { padding: 12px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cx-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.cx-opt:hover, .cx-opt.is-active { background: var(--paper); }
.cx-opt[aria-selected="true"] { background: #FFF8D1; }
.cx-opt[aria-disabled="true"] { cursor: default; }
.cx-opt[aria-disabled="true"] .cx-logo { opacity: 0.45; }
.cx-opt[aria-disabled="true"] b { color: var(--ink-2); }
.cx-opt .mk-chip { flex: none; }
.cx-tick { flex: none; color: var(--ink); }
.cx-tick svg { width: 18px; height: 18px; }
.cx-empty { padding: 18px 12px; font-size: 14.5px; color: var(--ink-2); }
.cx-how { padding: 20px 22px; border: 1px solid #D3D8CE; border-radius: 14px; background: #FAFAF8; }
.cx-how .jp-steps { margin-bottom: 18px; }
.cx-go { width: 100%; min-height: 54px; border-radius: 99px; font-size: 15px; }
.cx-go svg { width: 17px; height: 17px; }
.cx-isdone { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14.5px; color: var(--ink-2); }
.cx-isdone svg { width: 18px; height: 18px; flex: none; color: var(--grow); margin-top: 1px; }
.cx-isdone b { color: var(--ink); }
.cx-soon { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cx-soon b { color: var(--ink); }
.cx-side { position: sticky; top: 88px; }
.cx-side-box { display: grid; gap: 16px; padding: 22px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); }
.cx-side-box h3 { margin: 0; font-size: 17px; }
.cx-conns { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-conns { gap: 0; }
.cx-conns li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.cx-conns li:first-child { padding-top: 0; }
.cx-conns .mk-chip { flex: none; }
.cx-conns .mk-chip svg, .cx-opt .mk-chip svg { width: 12px; height: 12px; }
.cx-none { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.cx-tip { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.cx-tip b { color: var(--ink); }
.cx-foot { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* Dashboards: notes are plain lines, not boxes (simplify pass) */
.app-main .note { border: 0; background: none; padding: 0; color: var(--ink-2); }
/* Get verified: notes are plain lines, not boxes (simplify pass) */
#connect .note, #step3 .note, .cx-how .note { border: 0; background: none; padding: 0; color: var(--ink-2); }
.cx-foot svg { width: 18px; height: 18px; flex: none; color: var(--grow); margin-top: 1px; }
@media (max-width: 900px) { .cx { grid-template-columns: minmax(0, 1fr); } .cx-side { position: static; } }
@media (max-width: 560px) { .cx-how { padding: 16px; } .cx-trigger { min-height: 64px; } .cx-conns li { flex-wrap: wrap; } }

/* ---------- Visibility chooser ---------- */
.vis-options { display: grid; gap: 10px; }
.vis-option { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1.5px solid var(--rule-strong); border-radius: 10px; background: var(--sheet); cursor: pointer; }
.vis-option:has(input:checked) { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--hivis); }
.vis-option input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--ink); }
.vis-option b { display: block; }
.vis-option span { font-size: 0.88rem; color: var(--muted); }
.vis-option:has(input:disabled) { opacity: .55; cursor: default; }
.vis-anon { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.vis-info { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 99px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.vis-info:hover { color: var(--ink); }
.vis-info svg { width: 16px; height: 16px; }
#vis-anon-note { margin: 8px 0 0; }
.vis-preview { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; }
.vis-preview .figure-val { font-size: 2rem; font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; }
.plan-featured { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--hivis); }
.plan h3 { font-size: 1.3rem; margin-bottom: 18px; }
.plan-for { color: var(--muted); font-size: 0.92rem; margin: 6px 0 20px; }
.plan-price { margin: 0; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.plan-price small { font-size: 0.95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan-alt { font-size: 0.86rem; color: var(--muted); margin: 8px 0 22px; min-height: 1.3em; }
.plan .check-list { margin-bottom: 26px; font-size: 0.95rem; }
.plan-price + .check-list { margin-top: 22px; }
.plan .btn { margin-top: auto; }
.plans.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .plans.plans-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Guide (SEO template) ---------- */
/* Sidebar on the left on desktop; the article stays first in the page order, so phones still read it first */
.guide-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; padding-block: calc(var(--head-gap) / 2) calc(var(--sec-gap) / 2); }
.guide-grid aside { position: sticky; top: 88px; order: -1; }
@media (max-width: 1000px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } .guide-grid aside { position: static; order: 0; } }
.answer {
  background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--radius); padding: 26px; margin-bottom: 36px;
}
.answer p { font-size: 1.2rem; line-height: 1.5; margin: 0 0 12px; }
.prose h2 { font-size: 1.7rem; margin: 48px 0 14px; }
.prose p, .prose li { font-size: 1.04rem; line-height: 1.68; max-width: 40em; }
.prose ul { padding-left: 1.2em; }
.faq details { border-bottom: 1px solid var(--rule); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.04rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.2rem; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; color: var(--ink-2); max-width: 42em; }
.guide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.guide-list a { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; font-size: 0.93rem; color: var(--ink-2); }
.guide-list a:hover { background: var(--sheet); color: var(--ink); }
.guide-list a[aria-current="page"] { background: var(--ink); color: #fff; }

/* "Thinking of starting one?": the guide's main next step, in navy so it stands apart from the white cards around it */
.start-cta { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 26px 24px 24px; box-shadow: 0 18px 40px -22px rgba(19, 32, 59, 0.6); }
.start-cta h3 { font-size: 23px; line-height: 1.2; margin: 0 0 16px; color: #fff; }
.start-cta-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; padding: 14px 0; border-block: 1px solid rgba(255, 255, 255, 0.16); }
.start-cta-facts dt { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); margin-bottom: 2px; }
.start-cta-facts dd { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.start-cta-btns { display: grid; gap: 10px; }
.start-cta .btn { min-height: 50px; font-size: 16px; }
.start-cta-side { margin-bottom: 20px; }
.start-cta-inline { display: none; margin: 0 0 8px; }
@media (max-width: 1000px) {
  .start-cta-side { display: none; }
  .start-cta-inline { display: block; }
}
@media (min-width: 560px) and (max-width: 1000px) {
  .start-cta-inline { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 4px 28px; align-items: center; padding: 28px; }
  .start-cta-inline h3, .start-cta-inline > p, .start-cta-inline .start-cta-facts { grid-column: 1; }
  .start-cta-inline .start-cta-btns { grid-column: 2; grid-row: 1 / span 3; }
}

/* ---------- Owner band ---------- */
.btn-on-ink { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn-on-ink:hover { background: rgba(255, 255, 255, 0.08); }
.bench-card { background: var(--sheet); color: var(--ink); border-radius: var(--radius); padding: 26px; }
.bench-card h3 { margin-bottom: 18px; }
.bench-card .eyebrow { color: var(--muted); }
.bench-row .range:not(.has-you) { margin-top: 12px; }
.bench-card .note { margin: 18px 0 0; }

/* ---------- Newsletter ---------- */
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.news form { display: flex; gap: 10px; }
.news .input { height: 48px; }
.news .btn { min-height: 48px; }
@media (max-width: 800px) { .news { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 480px) { .news form { flex-direction: column; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding: 56px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px; font-family: var(--font-mono); font-weight: 600; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { text-decoration: none; color: var(--ink-2); font-size: 0.93rem; }
.footer-grid a:hover { color: var(--ink); text-decoration: underline; }
.footer-note { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 0.92rem;
  max-width: calc(100vw - 32px); opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s;
  box-shadow: 0 10px 30px rgba(19, 32, 59, 0.25);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================
   Marketplace: listing + detail pages
   ========================================================== */

/* Toolbar */
.mk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.mk-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--sheet); border: 1px solid var(--rule); }
.mk-seg button {
  border: 0; background: transparent; border-radius: 99px; padding: 7px 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px;
}
.mk-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.mk-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--closed); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.mk-search { position: relative; flex: 1 1 220px; max-width: 320px; }
.mk-search input { height: 40px; border-radius: 99px; padding: 0 14px 0 36px; font-size: 14px; }
.mk-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.mk-pill { height: 40px; width: auto; border-radius: 99px; font-size: 14px; font-weight: 600; padding: 0 34px 0 14px; background-color: var(--sheet); }
.mk-meta { display: flex; align-items: center; gap: 12px; height: 62px; font-size: 14px; }
.mk-meta > #count { flex: none; white-space: nowrap; }
.mk-meta .mk-sort { margin-left: auto; flex: none; }
@media (max-width: 640px) { .mk-meta { height: auto; min-height: 62px; flex-wrap: wrap; padding: 10px 0; } .mk-meta .mk-sort { margin-left: 0; } .mk-meta > #count { width: 100%; } }
.mk-meta b { font-weight: 700; }
.mk-sort { display: inline-flex; align-items: center; gap: 6px; }
.mk-sort select { border: 0; background-color: transparent; height: auto; padding: 0 24px 0 0; font-weight: 700; font-size: 14px; background-position: right 4px center; }
@media (max-width: 640px) {
  .mk-search { max-width: none; flex-basis: 100%; }
  .mk-bar > label:not(.mk-search) { flex: 1 1 calc(50% - 8px); }
  .mk-bar .mk-pill { width: 100%; }
}

/* Cards: white surface on the grey page, figures in a tinted panel */
.mk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .mk-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.mk-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; padding: 18px 18px 14px;
  box-shadow: 0 1px 2px rgba(19, 32, 59, 0.06), 0 10px 28px -16px rgba(19, 32, 59, 0.28);
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.mk-card:hover { border-color: #AEB6A6; box-shadow: 0 2px 4px rgba(19, 32, 59, 0.06), 0 18px 40px -18px rgba(19, 32, 59, 0.38); }
.mk-card:has(:focus-visible) { border-color: var(--carbon); box-shadow: 0 0 0 3px rgba(49, 64, 194, 0.18), 0 10px 28px -16px rgba(19, 32, 59, 0.28); }
.mk-link { text-decoration: none; color: inherit; outline: none; }
.mk-link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; z-index: 1; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mk-save {
  position: relative; z-index: 2; flex: none; width: 36px; height: 36px; margin: -6px -6px 0 0; border-radius: 50%;
  border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--muted);
  transition: background-color 150ms ease, color 150ms ease;
}
.mk-save:hover { background: var(--paper); color: var(--ink); }
.mk-save svg { width: 19px; height: 19px; }
.mk-save[aria-pressed="true"] { color: var(--closed); }
.mk-save[aria-pressed="true"] svg path { fill: currentColor; }
.mk-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.mk-chip svg { width: 11px; height: 11px; }
.mk-chip-sale { background: var(--money); color: #fff; }
.mk-chip-trading { background: #E3F1E8; color: #145C37; }
.mk-chip-closed { background: #FBE4DF; color: #A2301F; }
.mk-chip-ver { background: var(--carbon-soft); color: var(--carbon); }
.mk-chip-new { background: var(--peach); color: #5A3A00; }
.mk-titlerow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; flex: 1; }
.mk-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.mk-title { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-wrap: wrap; }
.mk-title .nowrap { white-space: nowrap; }
.mk-card:hover .mk-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mk-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.mk-sub svg { width: 13px; height: 13px; flex: none; }
.mk-spark { display: block; }
.mk-figs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0;
}
.mk-fig { min-width: 0; padding: 0 14px; }
.mk-fig:first-child { padding-left: 0; }
.mk-fig + .mk-fig { border-left: 1px solid var(--rule); }
.mk-val { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mk-val.money { color: var(--money); font-size: 19px; }
.mk-val.up { color: var(--grow); }
.mk-val.down { color: var(--closed); }
.mk-lab { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.3; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.mk-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.mk-foot b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 560px) {
  .mk-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .mk-fig:nth-child(3) { border-left: 0; padding-left: 0; }
  .mk-spark { display: none; }
}
.mk-empty { grid-column: 1 / -1; background: var(--sheet); }

/* Filter bar: stays in view on wide screens */
@media (min-width: 861px) {
  .mk-sticky { position: sticky; top: 64px; z-index: 20; background: rgba(236, 238, 234, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
.mk-active { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mk-active::-webkit-scrollbar { display: none; }
.mk-token, .mk-clear { flex: none; }
.mk-token {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 99px;
  background: var(--ink); color: #fff; border: 0; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mk-token span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); font-size: 13px; line-height: 1; }
.mk-token:hover span { background: rgba(255, 255, 255, 0.3); }
.mk-clear { border: 0; background: transparent; font-weight: 700; font-size: 13px; color: var(--carbon); cursor: pointer; padding: 4px 6px; }
.mk-pill.is-set { border-color: var(--ink); background-color: var(--ink); color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Detail page */
.dt-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 0 16px; flex-wrap: wrap; }
.dt-share { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; font-weight: 600; font-size: 14px; cursor: pointer; }
.dt-share svg { width: 16px; height: 16px; }
.dt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; padding-bottom: calc(var(--sec-gap) / 2); }
@media (max-width: 1000px) { .dt-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.dt-hero { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 560px) { .dt-hero { grid-template-columns: minmax(0, 1fr); } }
.dt-cover {
  aspect-ratio: 1; border-radius: 16px; background: var(--sage); border: 1px solid var(--sage-line); box-shadow: inset 0 0 0 6px var(--sheet);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.dt-cover b { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; color: var(--money); }
.dt-cover span { position: absolute; left: 10px; bottom: 8px; right: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) { .dt-cover { width: 88px; } .dt-cover b { font-size: 30px; } .dt-cover span { display: none; } }
.dt-kicker { font-size: 14px; color: var(--muted); margin: 0 0 4px; }
.dt-title { font-size: 26px; line-height: 1.2; }
@media (min-width: 1024px) { .dt-title { font-size: 30px; } }
.dt-name { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.dt-site { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 40px; padding: 0 14px 0 12px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--sheet); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; max-width: 100%; }
.dt-site svg { width: 16px; height: 16px; flex: none; }
.dt-site span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dt-site i { font-style: normal; color: var(--muted); }
.dt-site:hover { background: var(--hivis); }
.dt-site:hover i { color: var(--ink); }
.dt-site:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dt-price { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.dt-price b { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--money); font-variant-numeric: tabular-nums; }
.dt-price b.closed { color: var(--closed); }
.dt-price > span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dt-price.is-ask { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 22px 16px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--hivis); }
.dt-price.is-ask > span { color: var(--ink-2); }
.dt-price.is-ask b { font-size: 44px; line-height: 1.05; }
@media (max-width: 560px) { .dt-price.is-ask { padding: 10px 14px 12px; } .dt-price.is-ask b { font-size: 30px; } }
.dt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
@media (max-width: 640px) { .dt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dt-tile { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 12px; padding: 16px 16px 14px; min-width: 0; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); }
.dt-tile .mk-val { font-size: 20px; }
.dt-period { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 14px 0 0; font-size: 13px; line-height: 20px; color: var(--muted); }
.dt-period > span { display: inline-flex; align-items: center; white-space: nowrap; }
.dt-period > span + span::before { content: "·"; margin: 0 8px; color: var(--rule-strong); }
.dt-ver { color: var(--carbon); font-weight: 600; }
.dt-ver svg { width: 15px; height: 15px; flex: none; margin-right: 6px; }
@media (max-width: 640px) {
  .dt-period { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dt-period > span + span::before { content: none; }
}
.dt-section { padding: 30px 0; border-top: 1px solid var(--rule); }
.dt-section:first-of-type { margin-top: 30px; }
.dt-section > h2 { font-size: 20px; margin-bottom: 14px; }
.dt-section > .lead { margin: -6px 0 18px; color: var(--muted); font-size: 14px; }
.dt-about p { font-size: 16px; line-height: 1.65; max-width: 44em; }
.dt-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink); margin-top: 4px; }
.dt-more summary::-webkit-details-marker { display: none; }
.dt-more summary::after { content: "↓"; }
.dt-more[open] summary::after { content: "↑"; }
.dt-more[open] summary .more-l { display: none; }
.dt-more:not([open]) summary .less-l { display: none; }
.dt-chart { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 20px; }
.rc { display: grid; gap: 14px; }
.rc-head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; }
.rc-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; min-width: 0; }
.rc-fig { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rc-delta { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.rc-delta.up { color: var(--grow); }
.rc-delta.down { color: var(--closed); }
.rc-vs { font-size: 13px; color: var(--muted); border-bottom: 1px dashed var(--rule-strong); }
.rc-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 3px 10px; border: 1px dashed var(--rule-strong); border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); vertical-align: 2px; }
.rc-chip svg { width: 12px; height: 12px; }
.rc-blur { filter: blur(4px); font-style: normal; font-variant-numeric: tabular-nums; pointer-events: none; user-select: none; }
.lk-fig { display: inline-flex; align-items: center; gap: 5px; cursor: help; white-space: nowrap; }
.lk-fig .lk-b { filter: blur(4px); font-style: normal; pointer-events: none; user-select: none; }
.lk-fig svg { width: 11px; height: 11px; flex: none; opacity: .6; }
.rc-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-sel { position: relative; display: inline-block; }
.rc-sel-btn { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border: 1.5px solid var(--rule-strong); border-radius: 8px; background: var(--sheet); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rc-sel-btn:hover { border-color: var(--ink-2); }
.rc-sel-btn svg { width: 11px; height: 8px; flex: none; }
.rc-sel.open .rc-sel-btn svg { transform: rotate(180deg); }
.rc-list { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 100%; margin: 0; padding: 6px; list-style: none; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 12px; box-shadow: 0 24px 50px -24px rgba(19, 32, 59, 0.45); }
.rc-sel.open .rc-list { display: block; }
.rc-foot .rc-list { top: auto; bottom: calc(100% + 6px); }
.rc-list li { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 38px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; cursor: pointer; }
.rc-list li:hover, .rc-list li:focus-visible { background: var(--paper); }
.rc-list li svg { width: 14px; height: 14px; flex: none; }
.rc-list li.is-lock { color: var(--ink-2); cursor: not-allowed; }
.rc-list li.is-lock:hover, .rc-list li.is-lock:focus-visible { background: transparent; }
.rc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.rc-foot .sw { font-size: 13.5px; }
.rc-foot .btn { margin-left: 4px; }
.rc-spacer { flex: 1; }
.dt-compare { margin-top: 16px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 20px; }
#fin .dt-chart + .dt-compare, #fin .dt-compare + .dt-compare { margin-top: 24px; padding: 20px 0 0; background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; }
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .cmp-grid { grid-template-columns: minmax(0, 1fr); } }
.cmp-col + .cmp-col { border-left: 1px solid var(--rule); padding-left: 14px; }
@media (max-width: 640px) { .cmp-col + .cmp-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 12px; } }
.cmp-card { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; padding: 18px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); transition: border-color 160ms ease; }
a.cmp-card:hover { border-color: #AEB6A6; }
.cmp-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.cmp-head h3 { font-size: 16px; }
.cmp-mult { margin: 14px 0 12px; }
.cmp-mult b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.cmp-rows { display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.cmp-rows span b { color: var(--ink); font-weight: 600; }
.gate { border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); overflow: hidden; }
.gate-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.gate-row:last-child { border-bottom: 0; }
.gate-row b { display: block; font-size: 16px; }
.gate-row span { font-size: 13px; color: var(--muted); }
.gate-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.gate-lock svg { width: 14px; height: 14px; }
.dt-aside { position: sticky; top: 84px; display: grid; gap: 16px; }
@media (max-width: 1000px) { .dt-aside { position: static; } }
.interest { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 24px; box-shadow: 0 10px 30px rgba(19, 32, 59, 0.07); }
.interest h2 { font-size: 26px; margin-bottom: 8px; }
.interest p { color: var(--ink-2); font-size: 15px; }
.interest .btn { width: 100%; min-height: 50px; font-size: 15px; }
.interest .fine { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.aside-block { padding: 18px 4px 0; border-top: 1px solid var(--rule); }
.aside-block .eyebrow { margin-bottom: 6px; }
.aside-block p { margin: 0; font-size: 14px; color: var(--ink-2); }
.aside-owner { display: flex; align-items: center; gap: 12px; }
.aside-owner i { width: 40px; height: 40px; border-radius: 50%; background: var(--sage); border: 1px solid var(--sage-line); display: grid; place-items: center; font-style: normal; font-weight: 700; color: var(--money); flex: none; }
.aside-owner b { display: block; font-size: 15px; }
.aside-owner span { font-size: 13px; color: var(--muted); }

/* Detail: back link, mobile action bar */
.dt-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.dt-back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.dt-bar { display: none; }
@media (max-width: 1000px) {
  .dt-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--sheet); border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px rgba(19, 32, 59, 0.1);
  }
  .dt-bar b { display: block; font-size: 19px; color: var(--money); letter-spacing: -0.01em; }
  .dt-bar span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .dt-bar .btn { min-height: 46px; }
  body.has-bar .site-footer { padding-bottom: 110px; }
}

/* Stability: re-rendered blocks keep their footprint */
#mini-result { min-height: 430px; }
#leaderboard { min-height: 603px; }
@media (max-width: 900px) { #leaderboard { min-height: 0; } }
.chart svg { display: block; }
.dt-cover, .dt-tile, .mk-card { contain: layout paint; }
.till.played .receipt, .till.played .stamp { animation: none; }

/* ==========================================================
   Post-mortem write-up (closed businesses)
   ========================================================== */
.pm-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.pm-toc a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 99px;
  border: 1px solid #D3D8CE; background: var(--sheet); font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.pm-toc a:hover { border-color: var(--ink-2); color: var(--ink); }
.pm-summary { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); }
.pm-summary p { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0; max-width: 42em; }
.pm-facts { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pm-fact { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 14px; color: var(--ink-2); }
.pm-fact:first-child { padding-left: 0; }
.pm-fact + .pm-fact { border-left: 1px solid var(--rule); }
.pm-fact b { color: var(--ink); font-weight: 700; }
.pm-fact.cause { color: #7F2618; }
.pm-fact.cause b { color: #7F2618; }
.pm-fact.safe { color: #145C37; }
.pm-fact.safe b { color: #145C37; }
.pm-prose p { font-size: 17px; line-height: 1.72; color: var(--ink); max-width: 42em; margin: 0 0 1.1em; }
.pm-prose p:last-child { margin-bottom: 0; }
.pm-lessons { display: grid; gap: 0; }
.pm-lesson { padding: 18px 0; border-top: 1px solid var(--rule); }
.pm-lesson:first-child { border-top: 0; padding-top: 0; }
.pm-lesson h3 { font-size: 18px; margin-bottom: 8px; }
.pm-lesson p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); max-width: 42em; }
.pit-table { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; overflow: hidden; }
.pit-head, .pit-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); }
.pit-h {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 18px;
  font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em;
}
.pit-h + .pit-h { border-left: 1px solid rgba(19, 32, 59, 0.08); }
.pit-h i, .pit-lab i { display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--sheet); }
.pit-h i { width: 30px; height: 30px; }
.pit-h i svg { width: 16px; height: 16px; }
.pit-warn { color: #8E2A1B; }
.pit-avoid { color: #13593A; }
.pit-check { color: #27339E; }
.pit-row { border-top: 1px solid var(--rule); }
.pit-cell { padding: 18px; }
.pit-cell + .pit-cell { border-left: 1px solid var(--rule); }
.pit-cell p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.pit-cell-warn p { font-size: 16px; font-weight: 700; color: var(--ink); }
.pit-cell-check p { color: var(--ink); font-weight: 600; }
.pit-lab { display: none; }
.pit-table { container-type: inline-size; }
/* Phones only: stack each row, keep the coloured column titles as labels */
@container (max-width: 560px) {
  .pit-head { display: none; }
  .pit-row { grid-template-columns: minmax(0, 1fr); }
  .pit-row + .pit-row { border-top: 6px solid var(--paper); }
  .pit-cell { padding: 14px 16px; }
  .pit-cell + .pit-cell { border-left: 0; border-top: 1px solid var(--rule); }
  .pit-lab { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
  .pit-lab i { width: 22px; height: 22px; }
  .pit-lab i svg { width: 13px; height: 13px; }
}

/* The warning-signs section is the point of a post-mortem: plain background, the table carries the emphasis */
.pit-feature > h2 { font-size: 24px; margin-bottom: 10px; }
.pit-feature > .lead { margin: 0 0 20px; max-width: 42em; }
.pit-feature .pit-table { border: 1px solid #C9CFC3; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.06), 0 16px 36px -22px rgba(19, 32, 59, 0.35); }

/* ---------- Navigation dropdowns ---------- */
.nav-item { position: static; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 0; border-radius: 99px;
  background: transparent; font-weight: 600; font-size: 0.92rem; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.nav-trigger svg { width: 10px; height: 6px; opacity: 0.7; transition: transform 160ms ease; }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); background: var(--sheet); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-trigger[aria-current="page"] { color: var(--ink); background: var(--sheet); box-shadow: inset 0 -2px 0 var(--hivis), 0 1px 2px rgba(19, 32, 59, 0.08); }
@media (min-width: 1021px) and (max-width: 1180px) { .nav-trigger { padding: 0 9px; } }
.mega {
  display: none; position: absolute; top: 72px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: min(1160px, calc(100vw - 32px)); padding: 10px;
  grid-template-columns: minmax(0, 1fr); gap: 6px;
  background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(19, 32, 59, 0.06), 0 32px 70px -28px rgba(19, 32, 59, 0.42);
}
.mega.open { display: grid; animation: mega-in 0.18s var(--ease); }
@keyframes mega-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mega-intro { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--paper); }
.mega-intro b { font-family: var(--font-display); font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.mega-all { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; font-weight: 700; color: var(--carbon); text-decoration: none; white-space: nowrap; }
.mega-all svg { width: 15px; height: 15px; }
.mega-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-body { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px 28px; align-content: start; padding: 16px 14px 12px; }
.mega h5 { margin: 0 0 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega ul a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; padding: 0 10px; border-radius: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mega ul a:hover { background: var(--paper); }
.mega ul a span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega ul a small { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.mega-feature { display: flex; flex-direction: column; gap: 6px; align-self: start; padding: 16px; border-radius: 12px; background: var(--sage); border: 1px solid var(--sage-line); text-decoration: none; color: var(--ink); }
.mega-feature .eyebrow { margin: 0; }
.mega-feature b { font-size: 15px; line-height: 1.4; }
.mega-feature small { font-size: 13px; color: var(--muted); }
.mega-feature:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1020px) {
  .nav-item { width: 100%; border-bottom: 1px solid var(--rule); }
  .nav-trigger { width: 100%; justify-content: space-between; height: auto; padding: 16px 4px; font-size: 1.1rem; color: var(--ink); border-radius: 0; }
  .nav-trigger svg { width: 12px; height: 7px; }
  .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { background: transparent; }
  .nav-trigger[aria-current="page"] { background: none; box-shadow: inset 4px 0 0 var(--hivis); padding-left: 14px; }
  .mega { position: static; transform: none; width: auto; padding: 0 0 16px; border: 0; box-shadow: none; border-radius: 0; background: transparent; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mega.open { animation: none; }
  .mega-intro { padding: 0 4px; background: none; }
  .mega-intro b { display: none; }
  .mega-all { margin: 0; padding: 4px 0; }
  .mega-body { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 8px 0 0; }
  .mega h5 { margin-left: 4px; }
  .mega ul a { padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .mega.open, .nav.open { animation: none; }
  .menu-btn i, .menu-btn i::before, .menu-btn i::after { transition: none; }
}

/* ---------- Sub-category bar ---------- */
.subcats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 16px; margin-top: 18px; }
.subcats::-webkit-scrollbar { display: none; }
.subcat {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 99px;
  border: 1px solid #D3D8CE; background: var(--sheet); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.subcat:hover { border-color: var(--ink-2); }
.subcat small { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.subcat[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.subcat[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.7); }
.subcats-label { display: block; margin: 16px 0 -8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Interviews ---------- */
.iv-card .mk-title { font-size: 18px; }
.iv-excerpt { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.iv-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--sage); border: 1px solid var(--sage-line); }
.iv-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.iv-who i { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sheet); border: 1px solid var(--sage-line); font-style: normal; font-weight: 700; font-size: 13px; color: var(--money); }
.iv-who b { display: block; font-size: 14px; }
.iv-who span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-fig { text-align: right; flex: none; }
.iv-feature {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr); gap: 32px; align-items: end;
  margin: 8px 0 8px; padding: 32px; border-radius: 20px; background: var(--ink); color: #fff; text-decoration: none;
  box-shadow: 0 24px 48px -28px rgba(19, 32, 59, 0.6);
}
.iv-feature h2 { color: #fff; font-size: 26px; line-height: 1.2; margin-bottom: 12px; }
.iv-feature:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.iv-feature p { color: rgba(255, 255, 255, 0.78); font-size: 16px; line-height: 1.6; max-width: 40em; }
.iv-feature-meta { font-size: 13.5px; color: rgba(255, 255, 255, 0.6); }
.iv-feature-fig { background: var(--sheet); color: var(--ink); border-radius: 14px; padding: 18px; }
.iv-feature-fig span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.iv-feature-fig b { display: block; font-size: 28px; letter-spacing: -0.02em; color: var(--money); margin: 4px 0; }
.iv-feature-fig em { font-style: normal; font-size: 13px; color: var(--grow); font-weight: 600; }
@media (max-width: 760px) { .iv-feature { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 18px; } .iv-feature h2 { font-size: 22px; } }

/* ---------- Interviews: sidebar + list ---------- */
.iv-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; padding-bottom: 72px; }
.iv-side { position: sticky; top: 84px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.iv-side > *, .iv-main { min-width: 0; }
.iv-kinds { display: grid; gap: 8px; }
.iv-kind {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px;
  border-radius: 12px; border: 1.5px solid #D3D8CE; background: var(--sheet); cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 700; color: var(--ink); transition: border-color 140ms ease, box-shadow 140ms ease;
}
.iv-kind small { font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.iv-kind:hover { border-color: var(--ink-2); }
.iv-kind-success { background: #EEF7F1; border-color: #BFE0CB; }
.iv-kind-selling { background: #EEF0FB; border-color: #C9CEF1; }
.iv-kind-postmortem { background: #FDF1EE; border-color: #F0C7BE; }
.iv-kind-remote { background: #EAF5F7; border-color: #BCDDE4; }
.iv-kind[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 6px 16px -10px rgba(19, 32, 59, 0.5); }
.iv-kind-all[aria-pressed="true"] { background: var(--ink); color: #fff; }
.iv-kind-all[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.7); }
.iv-search { max-width: none; }
.iv-search input { border-radius: 12px; height: 44px; }
.iv-block { padding-top: 16px; border-top: 1px solid var(--rule); }
.iv-side-h { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 2px; }
.iv-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.iv-cat {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.iv-cat small { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.iv-cat:hover { background: var(--sheet); }
.iv-cat[aria-pressed="true"] { background: var(--ink); color: #fff; }
.iv-cat[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.7); }
.iv-cat:disabled { color: var(--muted); opacity: 0.55; cursor: default; }
.iv-cat:disabled:hover { background: transparent; }
.iv-meta { display: flex; align-items: center; gap: 12px; height: 44px; margin-bottom: 12px; font-size: 14px; }
.iv-meta > #count { flex: none; }
.iv-list { display: grid; gap: 16px; }
.iv-row .mk-title { font-size: 20px; }
.iv-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--paper); font-size: 12px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 900px) {
  .iv-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .iv-side { position: static; }
  .iv-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-kinds > .iv-kind:first-child:nth-last-child(odd) { grid-column: 1 / -1; } /* odd count: "All" takes the full row */
  .iv-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .iv-cats::-webkit-scrollbar { display: none; }
  .iv-cat { width: auto; flex: none; border: 1px solid #D3D8CE; border-radius: 99px; background: var(--sheet); white-space: nowrap; }
  .iv-block:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .iv-block:last-child .field { margin-top: 0 !important; }
}

/* ---------- Interview block v2 ---------- */
.iv-card2 {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 196px;
  background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05), 0 10px 26px -18px rgba(19, 32, 59, 0.3);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.iv-card2:hover { border-color: #AEB6A6; box-shadow: 0 2px 4px rgba(19, 32, 59, 0.06), 0 18px 36px -20px rgba(19, 32, 59, 0.4); }
.iv-card2:has(:focus-visible) { border-color: var(--carbon); box-shadow: 0 0 0 3px rgba(49, 64, 194, 0.18); }
.iv-body { padding: 20px 24px 18px; min-width: 0; }
.iv-meta2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 13px; color: var(--muted); }
.iv-meta2 .mk-chip { margin-right: 12px; }
.iv-meta2 > span:not(.mk-chip) + span:not(.mk-chip)::before { content: "·"; margin: 0 8px; color: var(--rule-strong); }
.iv-title { margin: 12px 0 0; font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; }
.iv-title a { color: var(--ink); }
.iv-card2:hover .iv-title a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.iv-sum { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iv-by { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--muted); }
.iv-by i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sage); border: 1px solid var(--sage-line); font-style: normal; font-weight: 700; font-size: 11.5px; color: var(--money); }
.iv-by span:nth-child(2) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-by b { color: var(--ink); font-weight: 700; }
.iv-read { margin-left: auto; flex: none; font-weight: 700; color: var(--carbon); }
.iv-stat {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 20px;
  background: var(--sage); border-left: 1px solid var(--sage-line);
}
.iv-postmortem .iv-stat { background: #FDF3F1; border-left-color: #F3D5CE; }
.iv-stat b { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; color: var(--money); font-variant-numeric: tabular-nums; }
.iv-stat b.down { color: var(--closed); }
.iv-stat-sub { font-size: 13px; font-weight: 600; color: var(--muted); }
.iv-stat-sub.up { color: var(--grow); }
.iv-stat-sub.down { color: var(--closed); }
.iv-stat .verified { margin-top: 10px; font-family: var(--font-body); font-size: 12px; line-height: 1.35; align-items: flex-start; }
.iv-list, .side-list { container-type: inline-size; }
@container (max-width: 640px) {
  .iv-card2 { grid-template-columns: minmax(0, 1fr); }
  .iv-body { padding: 18px 18px 16px; }
  .iv-title { font-size: 19px; }
  .iv-stat { order: -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 10px; padding: 14px 18px; border-left: 0; border-bottom: 1px solid var(--sage-line); }
  .iv-postmortem .iv-stat { border-bottom-color: #F3D5CE; }
  .iv-stat .mk-lab { width: 100%; margin: 0; }
  .iv-stat b { font-size: 21px; }
  .iv-stat .verified { display: none; }
}
.side-list { gap: 16px; }

/* Sector block inside menus: three text columns */
.mega-wide { grid-column: span 3; }
.mega-wide ul { display: block; column-count: 3; column-gap: 12px; }
.mega-wide li { break-inside: avoid; }
.mega ul a.is-empty { color: var(--muted); font-weight: 500; }
.mega ul a.is-empty small { opacity: 0.7; }
@media (max-width: 1020px) {
  .mega-wide { grid-column: auto; }
  .mega-wide ul { column-count: 2; }
}
@media (max-width: 420px) { .mega-wide ul { column-count: 1; } }
.subcat.is-empty { color: var(--muted); font-weight: 500; }
.iv-cat.is-empty { color: var(--muted); font-weight: 500; }
.iv-more { width: 100%; min-height: 36px; margin-top: 4px; padding: 0 12px; border: 0; background: transparent; text-align: left; font-size: 13.5px; font-weight: 700; color: var(--carbon); cursor: pointer; border-radius: 8px; }
.iv-more:hover { background: var(--sheet); }
@media (max-width: 900px) { .iv-more { width: auto; flex: none; white-space: nowrap; margin-top: 0; } }

/* ---------- Home hero v2 ---------- */
.hero { padding: 56px 0 calc(var(--sec-gap) / 2); }
.hero h1 { margin: 4px 0 18px; }
.hx-promise { margin: 0; font-size: 21px; line-height: 1.4; font-weight: 700; color: var(--ink); max-width: 30em; letter-spacing: -0.01em; }
.hx-sub { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 36em; }
.hx-search { margin-top: 28px; }
.hx-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.hx-box {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px;
  background: var(--sheet); border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: 0 10px 30px -18px rgba(19, 32, 59, 0.45);
}
.hx-box:focus-within { box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.55), 0 10px 30px -18px rgba(19, 32, 59, 0.45); }
.hx-ico { width: 18px; height: 18px; color: var(--muted); flex: none; }
.hx-box input { flex: 1; min-width: 0; height: 46px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.hx-box input::placeholder { color: var(--muted); }
.hx-box .btn { min-height: 46px; border-radius: 10px; }
.hx-list {
  display: none; position: absolute; left: -2px; right: -2px; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; box-shadow: 0 24px 50px -24px rgba(19, 32, 59, 0.45);
}
.hx-list.open { display: block; }
.hx-list [role="option"] { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 8px; cursor: pointer; }
.hx-list [role="option"] b { font-size: 15px; }
.hx-list [role="option"] span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.hx-list [role="option"][aria-selected="true"], .hx-list [role="option"]:hover { background: var(--paper); }
.hx-none { padding: 12px; font-size: 14px; color: var(--ink-2); }
.hx-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.hx-popular #hx-chips { display: contents; }
.hx-popular a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.hx-popular a:hover { text-decoration-color: var(--ink); }
.hx-news { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule); max-width: 560px; }
.hx-news-h { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.hx-news-form { display: flex; gap: 10px; }
.hx-news-form .input { height: 50px; border: 2px solid var(--ink); border-radius: 10px; font-size: 15px; }
.hx-news-form .btn { min-height: 50px; border-radius: 10px; }
.hx-founder { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.hx-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--hivis); font-size: 18px; font-weight: 700; box-shadow: 0 0 0 3px var(--sheet), 0 0 0 4px var(--rule); }
.hx-founder p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.hx-founder em { font-style: italic; }
.hx-founder b { color: var(--ink); font-style: italic; }
.hx-goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.hx-goal {
  display: flex; align-items: center; gap: 14px; padding: 18px; min-height: 92px; text-decoration: none; color: var(--ink);
  background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); transition: border-color 150ms ease, box-shadow 150ms ease;
}
.hx-goal:hover { border-color: var(--ink); box-shadow: 0 12px 28px -18px rgba(19, 32, 59, 0.4); }
.hx-goal i { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #FFF4B8; color: var(--ink); }
.hx-goal i svg { width: 22px; height: 22px; }
.hx-goal span { min-width: 0; flex: 1; }
.hx-goal b { display: block; font-size: 16px; line-height: 1.25; }
.hx-goal small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.hx-goal em { font-style: normal; font-weight: 700; color: var(--muted); transition: color 150ms ease; }
.hx-goal:hover em { color: var(--ink); }
.hx-trust { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.hx-trust strong { color: var(--ink-2); }
@media (max-width: 1020px) { .hx-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .hero { padding-top: 36px; }
  .hx-promise { font-size: 18px; }
  .hx-box { flex-wrap: wrap; padding: 6px; }
  .hx-ico { display: none; }
  .hx-box input { padding: 0 10px; width: 100%; flex-basis: 100%; }
  .hx-box .btn { width: 100%; }
  .hx-news-form { flex-direction: column; }
  .hx-goals { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 36px; }
  .hx-goal { min-height: 0; padding: 14px; }
}

/* Goal tiles live in the hero grid: full row under both columns on desktop, straight after the newsletter on phones */
.hero-grid > .hx-goals { grid-column: 1 / -1; margin-top: 8px; }
.hero { padding-top: 44px; }
.receipt { line-height: 1.5; }
@media (max-width: 900px) {
  .hero-grid > div:first-child { order: 1; }
  .hero-grid > .hx-goals { order: 2; margin-top: 0; }
  .hero-grid > .till, .hero-grid > .rx { order: 3; }
}

/* ---------- Newsletter: listing-page card + band before footer ---------- */
.ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 48px; align-items: center; }
.nl-card { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; padding: 22px; box-shadow: 0 10px 28px -20px rgba(19, 32, 59, 0.35); }
.nl-card-h { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.nl-card .hx-news-form .input { height: 48px; }
.nl-card .hx-news-form .btn { min-height: 48px; }
.nl-card .hx-founder p { font-size: 13.5px; }
@media (max-width: 900px) { .ph-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.nl-band { background: var(--hivis); color: var(--ink); padding: 96px 0; border-top: 1px solid #E6C200; }
.nl-band-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; align-items: center; }
.nl-band h2 { font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; margin: 6px 0 18px; }
@media (min-width: 1024px) { .nl-band h2 { font-size: 60px; } }
.nl-band-sub { font-size: 19px; line-height: 1.5; max-width: 30em; margin: 0 0 28px; color: var(--ink); }
.nl-band .hx-news-form { max-width: 620px; }
.nl-band .hx-news-form .input { height: 62px; font-size: 17px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--sheet); }
.nl-band .hx-news-form .btn { min-height: 62px; padding: 0 28px; font-size: 16px; border-radius: 12px; }
.nl-band .hx-founder { margin-top: 18px; }
.nl-band .hx-founder p { font-size: 15.5px; color: #4A4127; }
.nl-band .hx-founder b { color: var(--ink); }
.nl-band .hx-avatar { box-shadow: 0 0 0 3px var(--hivis), 0 0 0 4px var(--ink); }
.nl-issue {
  display: flex; flex-direction: column; gap: 14px; padding: 26px; text-decoration: none; color: var(--ink);
  background: var(--sheet); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 10px 10px 0 var(--ink);
  transform: rotate(1.5deg);
}
.nl-issue-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--rule-strong); font-size: 13px; color: var(--muted); }
.nl-issue-top b { color: var(--ink); font-size: 14px; }
.nl-issue-title { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.nl-issue:hover .nl-issue-title { text-decoration: underline; text-underline-offset: 4px; }
.nl-issue-fig { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; background: var(--sage); border: 1px solid var(--sage-line); border-radius: 10px; }
.nl-issue-fig small { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nl-issue-fig b { font-size: 22px; color: var(--money); }
.nl-issue-list { display: grid; gap: 8px; }
.nl-issue-list span { padding-left: 22px; position: relative; font-size: 14.5px; color: var(--ink-2); }
.nl-issue-list span::before { content: "✓"; position: absolute; left: 0; color: var(--grow); font-weight: 700; }
.nl-issue-foot { font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) {
  .nl-band { padding: 64px 0; }
  .nl-band-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .nl-issue { transform: none; box-shadow: 6px 6px 0 var(--ink); }
}
@media (max-width: 560px) {
  .nl-band h2 { font-size: 34px; }
  .nl-band-sub { font-size: 17px; }
  .nl-band .hx-news-form .btn { width: 100%; }
}

/* Newsletter popup (first visit only): the band on desktop, the card on phones */
.nl-pop { width: min(1080px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 22px; background: var(--hivis); color: var(--ink); box-shadow: 0 30px 80px -24px rgba(19, 32, 59, 0.6); overflow: auto; overscroll-behavior: contain; }
.nl-pop::backdrop { background: rgba(19, 32, 59, 0.55); }
.nl-pop-x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color 150ms ease; }
.nl-pop-x:hover { background: rgba(19, 32, 59, 0.08); }
.nl-pop-x svg { width: 16px; height: 16px; }
.nl-pop .nl-band { padding: 56px; border-top: 0; }
.nl-pop .nl-card { display: none; }
@media (max-width: 860px) {
  .nl-pop { background: var(--sheet); border-radius: 16px; }
  .nl-pop .nl-band { display: none; }
  .nl-pop .nl-card { display: block; border: 0; box-shadow: none; }
  .nl-pop .nl-card-h { padding-right: 36px; }
}

/* ---------- Leaderboard: analyst view ---------- */
#leaderboard { min-height: 0; }
.lb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; margin-bottom: 18px; }
.lb-kpi { padding: 18px 22px; }
.lb-kpi + .lb-kpi { border-left: 1px solid var(--rule); }
.lb-kpi span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.lb-kpi b { display: block; margin: 6px 0 2px; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lb-kpi small { font-size: 12.5px; color: var(--muted); }
.lb-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lb-actions { display: flex; gap: 8px; align-items: center; }
.lb-actions .btn { min-height: 40px; border-radius: 99px; }
.lb-table-wrap { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; overflow-x: auto; min-height: 556px; box-shadow: 0 10px 28px -22px rgba(19, 32, 59, 0.35); }
.lb-table { width: 100%; min-width: 1060px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.lb-table th { position: sticky; top: 0; background: #FAFBF9; border-bottom: 1px solid var(--rule); padding: 0; text-align: left; font-weight: 700; white-space: nowrap; }
.lb-table th, .lb-table th button { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lb-table th:not(:has(button)) { padding: 12px 11px; }
.lb-table th button { display: inline-flex; align-items: center; gap: 6px; width: 100%; padding: 12px 14px; border: 0; background: transparent; font: inherit; font-weight: 700; cursor: pointer; text-align: inherit; }
.lb-table th button { padding: 12px 11px; }
.lb-table th.num button { justify-content: flex-end; }
.lb-table th button:hover { color: var(--ink); }
.lb-table th[aria-sort="ascending"] button, .lb-table th[aria-sort="descending"] button { color: var(--ink); }
.lb-table th button i { font-style: normal; font-size: 12px; opacity: 0.5; }
.lb-table th[aria-sort="ascending"] i, .lb-table th[aria-sort="descending"] i { opacity: 1; }
.lb-table td { height: 64px; padding: 0 11px; border-bottom: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-table tbody tr:last-child td { border-bottom: 0; }
.lb-table tbody tr { cursor: pointer; transition: background-color 120ms ease; }
.lb-table tbody tr:hover td { background: #F7F8F4; }
.lb-table .num { text-align: right; }
.c-rank { width: 36px; color: var(--muted); font-weight: 600; }
.c-name a { display: block; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.c-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-name span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.lb-sale { font-style: normal; font-weight: 700; color: var(--carbon); }
.c-ltm b, .c-value b { font-size: 15px; }
.c-value span { display: block; font-size: 11.5px; color: var(--muted); }
.lb-delta { display: inline-block; min-width: 54px; padding: 3px 8px; border-radius: 6px; font-weight: 700; font-size: 13px; text-align: center; }
.lb-delta.up { background: #E3F1E8; color: #145C37; }
.lb-delta.down { background: #FBE4DF; color: #A2301F; }
td.up { color: var(--grow); font-weight: 600; }
td.down { color: var(--closed); font-weight: 600; }
.c-margin { min-width: 104px; }
.lb-bar { width: 40px !important; }
.lb-bar { display: inline-block; width: 52px; height: 6px; margin-right: 8px; border-radius: 3px; background: #ECEEEA; vertical-align: middle; overflow: hidden; }
.lb-bar i { display: block; height: 100%; background: var(--ink-2); border-radius: 3px; }
.lb-season { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.lb-season.lo { background: #E3F1E8; color: #145C37; }
.lb-season.md { background: #FFF3C4; color: #6B5200; }
.lb-season.hi { background: #FBE4DF; color: #A2301F; }
.c-trend svg { display: block; }
.c-name, .c-rank { position: sticky; left: 0; background: var(--sheet); z-index: 1; }
.c-name { left: 36px; }
th.c-name, th.c-rank { z-index: 2; background: #FAFBF9; }
.lb-empty { text-align: center; color: var(--muted); height: 120px !important; }
.lb-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; min-height: 36px; }
.lb-foot .btn[hidden] { display: none; }
@media (max-width: 900px) { .lb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lb-kpi:nth-child(3) { border-left: 0; } .lb-kpi:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 560px) { .lb-kpi { padding: 14px; } .lb-kpi b { font-size: 22px; } .lb-table-wrap { min-height: 0; } }
.lb-table td.c-name { white-space: normal; min-width: 210px; max-width: 250px; line-height: 1.3; }

/* Leaderboard: neutral off-white section, cool-grey lines, zebra rows */
.lb-section { background: #F9FAFB; border-block: 1px solid #E5E7EB; }
.lb-section .lb-kpis, .lb-section .lb-table-wrap { border-color: #E3E6EB; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 28px -24px rgba(17, 24, 39, 0.25); }
.lb-section .lb-kpi + .lb-kpi { border-left-color: #EDEFF2; }
.lb-section .lb-table th, .lb-section th.c-name, .lb-section th.c-rank { background: #F3F4F6; border-bottom-color: #E3E6EB; }
.lb-section .lb-table td { border-bottom: 0; }
.lb-section .lb-table tbody tr:nth-child(odd) td { background: #FFFFFF; }
.lb-section .lb-table tbody tr:nth-child(even) td { background: #F5F6F8; }
.lb-section .lb-table tbody tr:hover td { background: #EAEEF5; }
.lb-section .lb-bar { background: #E5E7EB; }
.lb-section .tab:hover { background: #EEF0F3; }
.lb-section .mk-pill, .lb-section .btn-ghost { border-color: #D1D5DB; }
.lb-section .btn-ghost:hover { background: #FFFFFF; }

/* Sector pill rows: hidden on desktop, where the navigation dropdowns list every sector */
@media (min-width: 1021px) { .subcats, .subcats-label { display: none; } }

/* Next-step action tiles (odds + guide) */
.next-steps { display: grid; gap: 10px; margin-top: 18px; }
.next-step {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px; border-radius: 14px;
  background: var(--sheet); border: 2px solid var(--ink); color: var(--ink); text-decoration: none;
  transition: box-shadow 150ms ease, background-color 150ms ease;
}
.next-step:hover { box-shadow: 4px 4px 0 var(--ink); }
.next-step.next-primary { background: var(--hivis); }
.next-step.next-primary:hover { background: var(--hivis-hover); }
.next-step i { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: var(--hivis); }
.next-step i svg { width: 20px; height: 20px; }
.next-step span { flex: 1; min-width: 0; }
.next-step b { display: block; font-size: 16px; line-height: 1.3; }
.next-step small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.next-step em { font-style: normal; font-size: 20px; font-weight: 700; }

/* "How common is this?": text + actions beside the cause chart; stacked with a clear gap on narrow screens */
.pm-common { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pm-common .pm-prose p { font-size: 16px; }
.hbar.is-muted .hbar-fill { background: var(--bar-old); }
.hbar.is-muted .hbar-label, .hbar.is-muted .hbar-val { color: var(--muted); }
.hbar.is-hl .hbar-label { font-weight: 700; color: var(--ink); }

/* ---------- Advice calls (booking) ---------- */
.dt-aside { position: static; }
.bk-card { position: relative; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; padding: 22px; box-shadow: 0 10px 28px -20px rgba(19, 32, 59, 0.35); }
.bk-tag { position: absolute; top: -11px; left: 18px; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.bk-card h2 { font-size: 21px; margin: 4px 0 6px; }
.bk-card h3 { font-size: 17px; margin: 4px 0 10px; }
.bk-card > p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.bk-durs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bk-dur { position: relative; }
.bk-dur input, .bk-day input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bk-dur span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1.5px solid #D3D8CE; border-radius: 10px; background: var(--sheet); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.bk-dur b { font-size: 14px; }
.bk-dur small { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bk-dur:hover span { border-color: var(--ink-2); }
.bk-dur input:checked + span { border-color: var(--ink); background: #FFF8D1; box-shadow: inset 0 0 0 1px var(--ink); }
.bk-dur input:focus-visible + span, .bk-day input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }
.bk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0; font-size: 13px; color: var(--ink-2); }
.bk-meta b { color: var(--ink); }
.bk-stars { display: inline-flex; align-items: center; gap: 4px; color: #B7791F; }
.bk-stars svg { width: 15px; height: 15px; }
.bk-stars b { color: var(--ink); }
.bk-stars small { color: var(--muted); }
.bk-actions { display: flex; gap: 10px; }
.bk-actions .btn { flex: 1; min-height: 48px; }
.bk-gift { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 1.5px solid #D3D8CE; border-radius: 10px; background: var(--sheet); cursor: pointer; color: var(--ink); }
.bk-gift:hover { border-color: var(--ink); }
.bk-gift svg { width: 20px; height: 20px; }
.bk-or { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.bk-or::before, .bk-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.bk-plan .check-list { font-size: 14px; gap: 6px; margin-bottom: 14px; }
.bk-plan-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--rule-strong); }
.bk-plan-foot b { font-size: 20px; }
.bk-plan-foot small { color: var(--muted); }
.bk-spots { display: block; font-size: 12.5px; font-weight: 700; color: var(--closed); margin-top: 2px; }
.bk-giftcard { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px 14px; align-items: start; }
.bk-giftcard > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #FFF4B8; }
.bk-giftcard > i svg { width: 20px; height: 20px; }
.bk-giftcard h3 { margin: 0 0 4px; font-size: 16px; }
.bk-giftcard p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.bk-giftcard .btn { grid-column: 1 / -1; }

.adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 24px; }
@media (max-width: 760px) { .adv-grid { grid-template-columns: minmax(0, 1fr); } }
.adv-box { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; padding: 20px; }
.adv-box h3 { font-size: 16px; margin-bottom: 12px; }
.adv-box .check-list { font-size: 15px; }
.adv-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.adv-list b { color: var(--ink); }
.adv-reviews { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; padding: 20px; }
.adv-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.adv-score > b { font-size: 34px; letter-spacing: -0.02em; line-height: 1; }
.adv-stars { display: inline-flex; gap: 2px; color: #D69E2E; }
.adv-stars svg { width: 18px; height: 18px; }
.adv-score small { font-size: 13.5px; color: var(--muted); }
.adv-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 760px) { .adv-review-grid { grid-template-columns: minmax(0, 1fr); } }
.adv-review { margin: 0; padding: 14px 16px; border-radius: 12px; background: #FAFAF8; border: 1px solid var(--rule); }
.adv-review-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.adv-review-top i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--money); font-style: normal; font-weight: 700; font-size: 12px; }
.adv-review-top b { color: var(--ink); font-size: 14px; }
.adv-r-stars { margin-left: auto; display: inline-flex; gap: 1px; color: #D69E2E; }
.adv-r-stars svg { width: 12px; height: 12px; }
.adv-review blockquote { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.adv-how { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: adv; }
.adv-how li { counter-increment: adv; display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--rule-strong); font-size: 13.5px; color: var(--ink-2); }
.adv-how li::before { content: counter(adv); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.adv-how b { color: var(--ink); font-size: 14.5px; }
@media (max-width: 760px) { .adv-how { grid-template-columns: minmax(0, 1fr); } }

.bk-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(19, 32, 59, 0.5); color: var(--ink); }
.bk-dialog::backdrop { background: rgba(19, 32, 59, 0.45); }
.bk-d-inner { display: grid; gap: 18px; padding: 24px; }
.bk-d-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.bk-d-head h2 { font-size: 22px; }
.bk-d-head .eyebrow { margin-bottom: 4px; }
.bk-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper); font-size: 22px; line-height: 1; cursor: pointer; }
.bk-dialog fieldset legend { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.bk-days, .bk-times { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-day { position: relative; }
.bk-day span { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border: 1.5px solid #D3D8CE; border-radius: 99px; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bk-day:hover span { border-color: var(--ink-2); }
.bk-day input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-q { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.bk-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--sage); border: 1px solid var(--sage-line); font-size: 14px; }
.bk-summary b { font-size: 18px; color: var(--money); }
.bk-submit { min-height: 52px; font-size: 15px; }
.bk-fine { margin: -6px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------- Advice-call entry points ---------- */
.book-btn {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 34px; padding: 0 12px; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--sheet);
  font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color 140ms ease;
}
.book-btn svg { width: 15px; height: 15px; }
.book-btn:hover { background: var(--hivis); }
.book-btn-solid { background: var(--hivis); height: 40px; padding: 0 14px; }
.book-btn-solid:hover { background: var(--hivis-hover); }
.iv-by .book-btn { margin-left: auto; }
.mk-book { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule-strong); }
.mk-book > span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.mk-book > span svg, .advisor-rate svg { width: 13px; height: 13px; color: #D69E2E; }
.advisors { background: var(--sheet); border: 2px solid var(--ink); border-radius: 16px; padding: 20px; box-shadow: 6px 6px 0 var(--hivis); }
.odds-block .advisors { border: 0; box-shadow: none; padding: 0; }
.advisors-head h3 { font-size: 19px; margin: 0 0 4px; }
.advisors-head .eyebrow { margin-bottom: 6px; }
.advisors-head p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-2); }
.advisors-list { display: grid; gap: 10px; }
.advisor { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: #FCFCFB; }
.advisor > i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--hivis); font-style: normal; font-weight: 700; }
.advisor-who { min-width: 0; display: grid; gap: 2px; }
.advisor-who a { text-decoration: none; color: var(--ink); }
.advisor-who a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.advisor-who > span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.advisor-rate { display: inline-flex; align-items: center; gap: 4px; }
.advisor-rate b { color: var(--ink); }
@media (max-width: 560px) {
  .advisor { grid-template-columns: 40px minmax(0, 1fr); }
  .advisor > i { width: 40px; height: 40px; }
  .advisor .book-btn { grid-column: 1 / -1; justify-content: center; }
  .iv-by { flex-wrap: wrap; }
  .iv-by .book-btn { margin-left: 0; }
}

/* Booking dialog: time zone, 8 call lengths, gift */
.bk-tz { display: inline-flex; align-items: center; gap: 8px; align-self: start; position: relative; }
.bk-tz svg { width: 20px; height: 20px; color: var(--ink); flex: none; }
.bk-tz select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 4px 22px 4px 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313203B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.bk-lens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bk-len { position: relative; }
.bk-len input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bk-len span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px; border-radius: 10px; border: 1.5px solid #D3D8CE; background: var(--sheet); color: var(--ink); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.bk-len b { font-size: 15px; font-weight: 700; }
.bk-len small { font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bk-len:hover span { border-color: var(--ink-2); }
.bk-len input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-len input:checked + span small { color: rgba(255, 255, 255, 0.75); }
.bk-len input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }
.bk-len.is-off span { background: var(--paper); border-color: var(--rule); color: var(--muted); cursor: not-allowed; }
.bk-len.is-off small { color: var(--muted); }
.bk-len.is-off input { cursor: not-allowed; }
@media (max-width: 480px) { .bk-lens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bk-giftcheck { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink); }
.bk-giftcheck input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); cursor: pointer; }
#bk-when, #bk-giftfields { padding-top: 16px; border-top: 1px solid var(--rule); }
.bk-gift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .bk-gift-grid { grid-template-columns: minmax(0, 1fr); } }
.bk-times .bk-day span { flex-direction: column; justify-content: center; height: 44px; line-height: 1.1; }
.bk-times .bk-day small { font-size: 10.5px; font-weight: 600; opacity: 0.75; }
.bk-d-inner { overflow-y: auto; }

/* Booking: calmer day strip and time grid */
.bk-dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-date, .bk-slot { position: relative; }
.bk-date input, .bk-slot input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bk-date span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 9px; border-radius: 10px; cursor: pointer; transition: background-color 120ms ease; }
.bk-date small { font-size: 12px; font-weight: 600; color: var(--muted); }
.bk-date b { font-size: 18px; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bk-date:hover span { background: var(--paper); }
.bk-date input:checked + span { background: var(--ink); }
.bk-date input:checked + span small { color: rgba(255, 255, 255, 0.7); }
.bk-date input:checked + span b { color: #fff; }
.bk-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bk-slot span { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 42px; border-radius: 10px; background: var(--paper); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color 120ms ease; }
.bk-slot small { font-size: 10.5px; font-weight: 600; color: var(--muted); line-height: 1.1; }
.bk-slot:hover span { background: #E2E5DF; }
.bk-slot input:checked + span { background: var(--ink); color: #fff; }
.bk-slot input:checked + span small { color: rgba(255, 255, 255, 0.7); }
.bk-date input:focus-visible + span, .bk-slot input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }

/* Booking: month calendar */
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bk-cal-head b { font-size: 16px; }
.bk-cal-nav { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper); font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; }
.bk-cal-nav:hover:not(:disabled) { background: #E2E5DF; }
.bk-cal-nav:disabled { opacity: 0.35; cursor: default; }
.bk-cal-week, .bk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-cal-week span { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); padding-bottom: 4px; }
.bk-cday { position: relative; }
.bk-cday input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bk-cday span { display: grid; place-items: center; height: 40px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color 120ms ease; }
.bk-cday:hover:not(.is-off) span { background: var(--paper); }
.bk-cday input:checked + span { background: var(--ink); color: #fff; }
.bk-cday input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }
.bk-cday.is-off span { color: #B5BAC4; font-weight: 500; cursor: default; text-decoration: line-through; text-decoration-color: #D3D7DE; }
.bk-cday.is-off input { cursor: default; }
.bk-cal-key { display: flex; gap: 16px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.bk-cal-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bk-cal-key .k-sel { background: var(--ink); }
.bk-cal-key .k-off { background: #E3E6EA; }

/* ---------- For-sale deal card (Flippa-style) ---------- */
.deal-card { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; padding: 22px; box-shadow: 0 10px 28px -20px rgba(19, 32, 59, 0.35); }
.deal-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.deal-cat { font-size: 15px; font-weight: 700; color: var(--carbon); }
.deal-cur select { height: 30px; padding: 0 24px 0 10px; border: 1px solid #D3D8CE; border-radius: 8px; background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2313203B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center; appearance: none; -webkit-appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.deal-lab { display: block; font-size: 13.5px; color: var(--muted); }
.deal-was { display: block; margin-top: 6px; font-size: 18px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.deal-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 2px; }
.deal-price b { font-size: 28px; letter-spacing: -0.02em; color: var(--money); font-variant-numeric: tabular-nums; }
.deal-cut { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 99px; border: 1.5px solid var(--money); color: var(--money); font-size: 13px; font-weight: 700; }
.deal-cut svg { width: 14px; height: 14px; }
.deal-mult { margin: 6px 0 16px; font-size: 13.5px; color: var(--ink-2); padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.deal-actions { display: grid; gap: 10px; }
.deal-actions .btn { width: 100%; min-height: 48px; border-radius: 99px; }
.deal-actions .btn-ghost { border-width: 1.5px; }
.deal-watch svg { width: 18px; height: 18px; }
.deal-watch[aria-pressed="true"] { background: var(--ink); color: #fff; }
.deal-card .fine { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.deal-val { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13.5px; font-weight: 700; color: var(--carbon); text-decoration: none; text-align: center; }
.deal-val:hover { text-decoration: underline; }
.dt-tile .mk-val small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.vet { border: 1px solid #C9D9CF; background: #F3F9F5; border-radius: 16px; padding: 20px; }
.vet-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.vet-head p { margin: 0; font-size: 14px; color: var(--ink-2); flex: 1 1 260px; }
.vet-badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--money); color: #fff; font-size: 13px; font-weight: 700; }
.vet-badge svg { width: 15px; height: 15px; }
.vet-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .vet-list { grid-template-columns: minmax(0, 1fr); } }
.vet-list li { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; background: var(--sheet); border: 1px solid #DCE8E0; }
.vet-list li::before { content: "–"; position: absolute; left: 14px; top: 11px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--muted); font-weight: 700; font-size: 13px; }
.vet-list li.ok::before { content: "✓"; background: var(--money); color: #fff; font-size: 11px; }
.vet-list b { display: block; font-size: 14.5px; }
.vet-list span { font-size: 13px; color: var(--ink-2); }
.seller-checks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.seller-checks li::before { content: "✓"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: var(--money); color: #fff; font-size: 10px; font-weight: 700; }

/* ---------- Give-to-get gate ---------- */
.gate-meter { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #FFF8D1; border: 1px solid #F0DE8A; font-size: 14px; color: var(--ink); }
.gate-meter a { font-weight: 700; color: var(--ink); }
.gate-meter.is-out { background: #FDF1EE; border-color: #F0C7BE; }
.dt-section.is-locked { position: relative; max-height: 260px; overflow: hidden; filter: blur(5px); opacity: 0.55; pointer-events: none; user-select: none; }
.dt-section.is-locked + .dt-section.is-locked { max-height: 120px; }
.gate-wall { position: relative; z-index: 2; margin: 30px 0 -40px; padding: 28px; border-radius: 20px; background: var(--sheet); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--hivis); text-align: center; }
.gate-lock { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--hivis); margin-bottom: 12px; }
.gate-lock svg { width: 22px; height: 22px; }
.gate-wall h2 { font-size: 24px; margin-bottom: 8px; }
.gate-wall > p { max-width: 34em; margin: 0 auto 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.gate-cta { gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 99px; font-size: 16px; }
.gate-cta svg { width: 26px; height: 26px; }
.gate-or { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }
.gate-or a { font-weight: 700; color: var(--carbon); text-decoration: none; }
.gate-or a:hover { text-decoration: underline; }
.gate-dialog { width: min(460px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(19, 32, 59, 0.5); color: var(--ink); }
.gate-dialog::backdrop { background: rgba(19, 32, 59, 0.45); }
.gate-dialog form { padding: 26px 26px 22px; }
.gate-d-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.gate-d-head h2 { font-size: 24px; }
.gate-dialog p { margin: 12px 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.gate-dialog .gate-cta { width: 100%; }
.gate-dialog hr { border: 0; border-top: 1px solid var(--rule); margin: 22px -26px 0; }
.gate-dialog .gate-or { text-align: center; margin-top: 18px; }

/* ---------- Data room ---------- */
.dr { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 18px; padding: 24px; box-shadow: 0 10px 28px -22px rgba(19, 32, 59, 0.35); }
.dr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.dr-head > div { flex: 1 1 320px; }
.dr-head h2 { font-size: 22px; margin-bottom: 6px; }
.dr-head p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 36em; }
.dr-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.dr-steps li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dr-steps li + li::before { content: ""; width: 16px; height: 1.5px; background: var(--rule-strong); margin-right: 2px; }
.dr-steps b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink-2); font-size: 11.5px; }
.dr-steps li.is-next { color: var(--ink); }
.dr-steps li.is-next b { background: var(--ink); color: #fff; }
.dr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .dr-grid { grid-template-columns: minmax(0, 1fr); } }
.dr-doc { display: flex; flex-direction: column; padding: 16px; border-radius: 14px; background: #FAFAF8; border: 1px solid var(--rule); }
.dr-doc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dr-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); }
.dr-ico svg { width: 22px; height: 22px; }
.dr-lock { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.dr-lock svg { width: 12px; height: 12px; }
.dr-doc h3 { font-size: 16px; margin: 0 0 4px; }
.dr-doc p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.dr-preview { display: grid; gap: 6px; margin: 14px 0 12px; padding: 12px; border-radius: 10px; background: var(--sheet); border: 1px dashed var(--rule-strong); }
.dr-preview i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #E3E6E0, #EEF0EC); filter: blur(1px); }
.dr-preview i:nth-child(1) { width: 85%; }
.dr-preview i:nth-child(2) { width: 62%; }
.dr-preview i:nth-child(3) { width: 74%; }
.dr-meta { margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.dr-foot .btn { min-height: 48px; padding: 0 26px; border-radius: 99px; }
.dr-foot span { font-size: 13.5px; color: var(--muted); }
.dt-section .faq details:last-child { border-bottom: 0; }

/* ---------- Verification report (for-sale) ---------- */
.vr { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 18px; padding: 22px 24px 10px; box-shadow: 0 10px 28px -22px rgba(19, 32, 59, 0.35); }
.vr-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.vr-shield { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #E3F1E8; color: var(--money); }
.vr-shield svg { width: 26px; height: 26px; }
.vr-head > div:nth-child(2) { flex: 1 1 220px; }
.vr-head h2 { font-size: 20px; margin: 0 0 2px; }
.vr-head p { margin: 0; font-size: 13.5px; color: var(--muted); }
.vr-score { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 8px; min-width: 170px; }
.vr-score b { font-size: 18px; }
.vr-score span { font-size: 13px; color: var(--muted); }
.vr-score i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--paper); overflow: hidden; margin-top: 4px; }
.vr-score em { display: block; height: 100%; background: var(--money); border-radius: 3px; }
.vr-list { list-style: none; margin: 0; padding: 0; }
.vr-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.vr-list li:last-child { border-bottom: 0; }
.vr-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.vr-ico svg { width: 16px; height: 16px; }
li.ok .vr-ico { background: var(--money); color: #fff; }
li.pending .vr-ico { background: var(--paper); color: var(--muted); }
.vr-text { min-width: 0; }
.vr-text b { display: block; font-size: 15.5px; line-height: 1.35; }
.vr-text span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.vr-src { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.vr-status { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
li.ok .vr-status { background: #E3F1E8; color: #145C37; }
li.pending .vr-status { background: #FFF3C4; color: #6B5200; }
@media (max-width: 640px) {
  .vr { padding: 18px 16px 6px; }
  .vr-list li { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .vr-src { display: none; }
  .vr-score { min-width: 0; width: 100%; }
}

/* ---------- Jobs ---------- */
.mk-chip-hiring { background: #FFF3C4; color: #5A4300; text-decoration: none; }
.mk-chip-hiring:hover { background: var(--hivis); }
.jobs { display: grid; gap: 14px; margin-top: 18px; }
.job { position: relative; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; padding: 22px 24px 18px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); }
.job-save {
  position: absolute; top: 16px; right: -8px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 0; border-radius: 6px 0 0 6px; background: var(--paper); color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.job-save::after { content: ""; position: absolute; right: 0; bottom: -8px; border-left: 8px solid #B9BEB5; border-bottom: 8px solid transparent; }
.job-save svg { width: 14px; height: 14px; }
.job-save:hover { background: #E2E5DF; color: var(--ink); }
.job-save[aria-pressed="true"] { background: var(--ink); color: #fff; }
.job-save[aria-pressed="true"]::after { border-left-color: #000; }
.job-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; padding-right: 90px; }
.job-lab { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.job h3 { font-size: 19px; margin: 0; }
.job-grid b { font-size: 17px; }
.job-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.job-tags span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: var(--paper); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.job-tags .job-pay { background: #E3F1E8; color: #145C37; }
.job-more { margin-top: 14px; }
.job-more summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--money); }
.job-more summary::-webkit-details-marker { display: none; }
.job-more summary i { font-style: normal; font-size: 18px; line-height: 1; transition: transform 150ms ease; }
.job-more[open] summary i { transform: rotate(90deg); }
.job-more[open] summary .more-l, .job-more:not([open]) summary .less-l { display: none; }
.job-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--rule-strong); }
.job-body h4 { font-size: 14px; margin: 0 0 6px; }
.job-body ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.job-why { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-2); }
.job-body .btn { grid-column: 1 / -1; justify-self: start; border-radius: 99px; }
@media (max-width: 640px) {
  .job { padding: 18px 16px 16px; }
  .job-grid { grid-template-columns: minmax(0, 1fr); padding-right: 70px; gap: 10px; }
  .job-body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Job board ---------- */
.job-lab a { color: inherit; text-decoration: none; }
.job-lab a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.job-employer { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); }
.job-employer svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--money); }
.job-employer b { color: var(--ink); }
.job-employer b.up { color: var(--grow); }
.job-employer b.down { color: var(--closed); }
.jobs-post { padding: 18px; border-radius: 14px; background: #FFF6CC; border: 1px solid #F0DE8A; color: var(--ink); }
.jobs-post h2 { color: var(--ink); font-size: 18px; margin: 0 0 6px; }
.jobs-post p { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.jobs-post .btn { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Posting jobs */
.jp-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; counter-reset: jp; }
.jp-steps li { counter-increment: jp; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.jp-steps li::before { content: counter(jp); grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.jp-steps b { font-size: 15px; }
.jp-steps span { font-size: 13.5px; color: var(--ink-2); }
.jp-note { margin: -6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sage); border: 1px solid var(--sage-line); font-size: 13.5px; color: var(--ink-2); }

/* Job board: always-available posting, candidate benefits */
.iv-meta .jb-post-top { margin-left: auto; flex: none; border-radius: 99px; }
.jb-why { background: var(--sheet); border: 2px solid var(--ink); border-radius: 16px; padding: 22px 24px; box-shadow: 6px 6px 0 var(--hivis); }
.jb-why-head h2 { font-size: 20px; margin: 0 0 14px; }
.jb-why-head .eyebrow { margin-bottom: 6px; }
.jb-why ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.jb-why li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.jb-why li i { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #FFF4B8; font-style: normal; font-weight: 700; font-size: 15px; color: var(--ink); }
.jb-why li b { font-size: 15px; line-height: 1.3; }
.jb-why li span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.jb-hire { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-radius: 14px; background: #FFF6CC; border: 1px solid #F0DE8A; }
.jb-hire b { display: block; font-size: 16px; }
.jb-hire span { font-size: 13.5px; color: var(--ink-2); }
.jb-hire > div { flex: 1 1 280px; }
.jb-hire .btn { border-radius: 99px; background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 640px) { .jb-why ul { grid-template-columns: minmax(0, 1fr); } .jb-why { padding: 18px 16px; } }
@media (max-width: 560px) { .iv-meta { flex-wrap: wrap; height: auto; padding-bottom: 8px; } }

/* ---------- Owner benchmark preview (plain language) ---------- */
.bench-card h3 { font-size: 19px; line-height: 1.3; margin: 0 0 6px; }
.bm-row { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.bm-row:last-of-type { border-bottom: 0; }
.bm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bm-label { font-size: 15px; font-weight: 700; color: var(--ink); }
.bm-you { margin-left: auto; font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bm-verdict { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.bm-verdict.great, .bm-verdict.good { background: #E3F1E8; color: #145C37; }
.bm-verdict.mid { background: var(--paper); color: var(--ink-2); }
.bm-verdict.low { background: #FBE4DF; color: #A2301F; }
.bm-say { margin: 6px 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.bm-say b { color: var(--ink); }
.bm-bar { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #F3D9D3 0%, #ECEEEA 40%, #ECEEEA 60%, #CFE8D8 100%); }
.bm-bar i { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--sheet); }
.bm-bar i span { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: var(--hivis); font-size: 11px; font-weight: 700; font-style: normal; color: var(--ink); white-space: nowrap; }
.bm-row { padding-top: 16px; }
.bm-bar { margin-top: 36px; }
.bm-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.bm-tip { margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: #FFF8D1; border: 1px solid #F0DE8A; }
.bm-tip-h { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6B5200; margin-bottom: 4px; }
.bm-tip p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }

/* ---------- Seller / owner card ---------- */
.seller { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); }
.seller .eyebrow { margin-bottom: 12px; }
.seller-head { display: flex; align-items: center; gap: 12px; }
.seller-head > i { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--hivis); font-style: normal; font-weight: 700; font-size: 16px; }
.seller-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; }
.seller-head span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.seller-tick { display: inline-grid; place-items: center; color: var(--money); }
.seller-tick svg { width: 17px; height: 17px; }
.seller-ids { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; }
.seller-id { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 99px; background: var(--sheet); border: 1px solid #DCE8E0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.seller-id svg { width: 13px; height: 13px; color: var(--money); }
.seller-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 16px 0 0; }
.seller-facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.seller-facts dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.seller-msg { width: 100%; min-height: 44px; border-radius: 99px; border-width: 1.5px; }

/* ---------- Home: "how it usually goes" (plain-language odds) ---------- */
.mini-label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.field > .mini-label { margin-bottom: 4px; }
#mini-result { min-height: 0; }
.mini-h { font-size: 21px; line-height: 1.3; margin: 0 0 18px; }
.mini-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mini-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.mini-facts p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.mini-facts b { color: var(--ink); }
.mini-dots { display: grid; grid-template-columns: repeat(5, 12px); gap: 4px; }
.mini-dots i { width: 12px; height: 12px; border-radius: 50%; background: #E3E6E0; }
.mini-dots i.on { background: var(--money); }
.mini-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.mini-pair > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.mini-pair span { display: block; font-size: 13px; color: var(--ink-2); }
.mini-pair b { display: block; font-size: 22px; letter-spacing: -0.01em; margin: 2px 0; }
.mini-sub { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.mini-earn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-earn > div { padding: 4px 12px; text-align: center; }
.mini-earn > div + div { border-left: 1px solid var(--rule); }
.mini-earn span { display: block; font-size: 12.5px; color: var(--muted); }
.mini-earn b { display: block; font-size: 19px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mini-earn .is-mid b { color: var(--money); }
.mini-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; }
.mini-foot .btn { border-radius: 99px; }
.mini-foot span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 480px) { .mini-pair, .mini-earn { grid-template-columns: minmax(0, 1fr); } .mini-pair > div + div { padding: 10px 0 0; margin-top: 10px; border-left: 0; border-top: 1px solid var(--rule); } .mini-earn > div { display: flex; justify-content: space-between; align-items: baseline; text-align: left; } }

/* ---------- Business picker (home) ---------- */
.pick { position: relative; max-width: 460px; }
.pick-box { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 6px 0 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--sheet); }
.pick-box:focus-within { box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.55); }
.pick-ico { width: 17px; height: 17px; color: var(--muted); flex: none; }
.pick-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); }
.pick-box input::placeholder { font-weight: 400; color: var(--muted); }
.pick-toggle { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.pick-toggle:hover { background: var(--paper); }
.pick-toggle svg { width: 12px; height: 8px; transition: transform 150ms ease; }
.pick-box:has(+ .pick-list.open) .pick-toggle svg { transform: rotate(180deg); }
.pick-list {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 340px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px;
  box-shadow: 0 24px 50px -24px rgba(19, 32, 59, 0.45);
}
.pick-list.open { display: block; }
.pick-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.pick-group:first-child { padding-top: 4px; }
.pick-list [role="option"] { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink); }
.pick-list [role="option"] small { font-size: 12px; font-weight: 500; color: var(--muted); }
.pick-list [role="option"][aria-selected="true"], .pick-list [role="option"]:hover { background: var(--paper); }
.pick-list [role="option"].is-current span::after { content: " ✓"; color: var(--money); }
.pick-none { padding: 12px 10px; font-size: 14px; color: var(--ink-2); }
.pick-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pick-pop > span:first-child { font-size: 13px; color: var(--muted); }
.pick-pop .chips { display: contents; }
.chip-sm { padding: 5px 11px; font-size: 13px; }

/* ---------- "Where" segmented control (home) ---------- */
.where { margin-top: 22px; max-width: 460px; }
.where legend { padding: 0; }
.where-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; gap: 4px; border: 2px solid var(--ink); border-radius: 12px; background: var(--sheet); }
.where-seg label { position: relative; }
.where-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.where-seg span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 6px 4px; border-radius: 8px; text-align: center; cursor: pointer; transition: background-color 120ms ease; }
.where-seg b { font-size: 15px; font-weight: 700; color: var(--ink); }
.where-seg label:hover span { background: var(--paper); }
.where-seg input:checked + span { background: var(--ink); }
.where-seg input:checked + span b { color: #fff; }
.where-seg input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }

/* ---------- Owner report preview: plain scorecard ---------- */
.owner-safe { margin: -12px 0 26px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.bench-card h3 { font-size: 22px; margin: 0 0 6px; }
.sc-intro { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sc { width: 100%; border-collapse: collapse; }
.sc thead th { padding: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); text-align: right; }
.sc thead th:first-child { text-align: left; }
.sc tbody th { padding: 14px 0 4px; font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; border-top: 1px solid var(--rule); }
.sc tbody td { padding: 14px 0 4px; text-align: right; font-variant-numeric: tabular-nums; border-top: 1px solid var(--rule); white-space: nowrap; }
.sc .sc-you { font-size: 20px; font-weight: 700; color: var(--ink); padding-left: 12px; }
.sc .sc-them { font-size: 17px; font-weight: 600; color: var(--muted); padding-left: 16px; }
.sc tr.sc-say td { border-top: 0; padding: 2px 0 14px; text-align: left; }
.sc-verdict { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 4px; border-radius: 99px; font-size: 13.5px; font-weight: 700; }
.sc-verdict i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; }
.sc-verdict.good { background: #E3F1E8; color: #145C37; }
.sc-verdict.good i { background: var(--money); }
.sc-verdict.same { background: var(--paper); color: var(--ink-2); }
.sc-verdict.same i { background: var(--muted); }
.sc-verdict.bad { background: #FBE4DF; color: #A2301F; }
.sc-verdict.bad i { background: var(--closed); }
.sc-fix { margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: #FFF8D1; border: 1px solid #F0DE8A; }
.sc-fix-h { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B5200; margin-bottom: 4px; }
.sc-fix p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }

/* ---------- Odds: what it costs to start ---------- */
.sp-sum { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 0 0 20px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.sp-total span { display: block; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sp-total > b { display: block; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; margin: 4px 0 10px; }
.sp-fit { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.45; }
.sp-fit i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; margin-top: 1px; }
.sp-fit.ok i { background: var(--money); }
.sp-fit.short i { background: var(--closed); }
.sp-facts { margin: 0; display: grid; gap: 12px; }
.sp-facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.sp-facts dt { font-size: 14px; color: var(--muted); }
.sp-facts dd { margin: 0; font-size: 15px; font-weight: 600; }
.sp-group { padding-top: 22px; }
.sp-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.sp-gh h4 { margin: 0; font-size: 17px; }
.sp-gh > b { font-size: 17px; font-variant-numeric: tabular-nums; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.sp-list li > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-paper .sp-name { font-weight: 600; margin-right: 8px; }
.sp-paper p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sp-need { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.sp-need.must { background: #FBE4DF; color: #A2301F; }
.sp-need.maybe { background: var(--paper); color: var(--ink-2); }
.sp-need.smart { background: #E3F1E8; color: #145C37; }
.sp-text { margin: 12px 0 0; font-size: 15px; line-height: 1.55; }
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.sb-col + .sb-col { padding-left: 32px; border-left: 1px solid var(--rule); }
.sb-tag { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sb-price { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 12px; }
.sb-list { list-style: none; margin: 0; padding: 0; }
.sb-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.sb-list li span { color: var(--ink-2); }
.sb-list li b { text-align: right; }
.sb-say { margin: 18px 0; font-size: 16px; line-height: 1.55; }
.sp-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; line-height: 1.5; }
@media (max-width: 720px) {
  .sp-sum, .sb-grid { grid-template-columns: minmax(0, 1fr); }
  .sb-col + .sb-col { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .sp-facts div { grid-template-columns: 90px minmax(0, 1fr); }
}

/* Hero: benefit list */
.hero h1 { font-size: clamp(2.3rem, 4.2vw, 3.5rem); line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
.hero h1 .h1-2 { display: block; color: var(--ink-2); }
.hx-promise { font-size: 19px; font-weight: 500; color: var(--ink-2); max-width: 34em; line-height: 1.55; }
.hx-points { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hx-points li { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.hx-points li::before { content: "✓"; width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--money); }
@media (max-width: 720px) { .hx-promise { font-size: 17px; } .hx-points { display: grid; grid-template-columns: 1fr 1fr; } }

/* Odds: simple monthly sales table */
.rv { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rv th, .rv td { padding: 14px 12px; text-align: right; border-bottom: 1px solid var(--rule); }
.rv thead th { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding-top: 0; }
.rv tbody th { text-align: left; font-weight: 700; padding-left: 0; }
.rv td { font-size: 17px; color: var(--ink-2); }
.rv .rv-mid { background: var(--paper); color: var(--ink); font-weight: 700; }
.rv td.rv-mid { font-size: 19px; }
.rv thead .rv-mid { color: var(--ink); border-radius: 8px 8px 0 0; }
.rv-key { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* Odds: one column, filter card on top */
.odds-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.odds-layout > * { width: 100%; }
.odds-form { position: static; grid-template-columns: 1fr 1fr; gap: 20px 28px; padding: 24px 26px; }
.odds-form .of-field > span, .odds-form .of-field legend { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.odds-form .select { height: 46px; font-size: 16px; font-weight: 600; }
.odds-form .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); }
.odds-form .seg label { display: block; }
.odds-form .seg span { display: block; text-align: center; white-space: nowrap; padding: 9px 6px; border: 0; border-radius: 7px; background: transparent; font-size: 14.5px; color: var(--ink-2); }
.odds-form .seg input:checked + span { background: var(--ink); color: #fff; }
.odds-form .seg label:hover input:not(:checked) + span { background: var(--sheet); color: var(--ink); }
@media (max-width: 720px) {
  .odds-form { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .odds-form .seg span { font-size: 13.5px; padding: 9px 2px; }
}
/* Five regions do not fit one row on phones: three, then two */
@media (max-width: 520px) { #o-region { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.of-place { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--muted); }

/* Odds: total-to-start summary, v2 */
.sp-sum { grid-template-columns: auto minmax(0, 1fr); gap: 20px 40px; align-items: center; padding: 4px 0 20px; }
.sp-total > b { margin: 2px 0 0; }
.sp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.sp-facts div { display: block; padding: 0 20px; border-left: 1px solid var(--rule-strong); }
.sp-facts dt { font-size: 13px; margin-bottom: 4px; }
.sp-facts dd { font-size: 15.5px; line-height: 1.4; }
.sp-fit { grid-column: 1 / -1; align-items: center; padding-top: 16px; border-top: 1px solid var(--rule-strong); font-size: 15px; }
.sp-fit span { min-width: 0; }
.sp-fit i { margin-top: 0; }
@media (max-width: 720px) {
  .sp-sum { grid-template-columns: minmax(0, 1fr); }
  .sp-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sp-facts div { padding: 0; border-left: 0; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
  .sp-fit { align-items: flex-start; }
}

/* Odds: sales table, v2 (full-width friendly) */
.rv { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.rv th, .rv td { text-align: center; padding: 16px 12px; }
.rv thead th { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.rv thead th:first-child, .rv tbody th { width: 22%; text-align: left; padding-left: 0; }
.rv tbody tr:last-child > * { border-bottom: 0; }
.rv .rv-mid { background: transparent; }
.rv thead .rv-mid { background: var(--ink); color: #fff; border-radius: 0; }
.rv td.rv-mid { font-size: 20px; color: var(--ink); box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink); }
.rv tbody tr:last-child td.rv-mid { box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink), inset 0 -2px 0 var(--ink); }
@media (max-width: 720px) {
  .rv th, .rv td { padding: 12px 6px; font-size: 15px; }
  .rv thead th:first-child, .rv tbody th { padding-left: 12px; }
  .rv td.rv-mid { font-size: 16px; }
}

/* Odds: cost groups in two columns on desktop so prices sit near their names */
.sp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: start; }
@media (max-width: 900px) { .sp-cols { grid-template-columns: minmax(0, 1fr); } }

/* Odds: real businesses, two columns, tinted so it stands out */
.odds-biz { background: var(--sage); border-color: var(--sage-line); padding: 30px; }
.ob-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.odds-biz h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; margin: 0 0 6px; }
.ob-head .btn { flex: none; background: var(--sheet); }
.ob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ob-grid.one { grid-template-columns: minmax(0, 1fr); }
/* Stack each card: number strip on top, story below */
.ob-grid .iv-card2 { grid-template-columns: minmax(0, 1fr); border-color: var(--sage-line); }
.ob-grid .iv-stat { order: -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 12px; padding: 16px 22px; border-left: 0; border-bottom: 1px solid var(--sage-line); }
.ob-grid .iv-postmortem .iv-stat { border-bottom-color: #F3D5CE; }
.ob-grid .iv-stat .mk-lab { width: 100%; margin: 0; }
.ob-grid .iv-stat b { font-size: 26px; }
.ob-grid .iv-stat .verified { margin: 0 0 0 auto; align-self: center; }
.ob-grid .iv-body { display: flex; flex-direction: column; padding: 18px 22px; height: 100%; }
.ob-grid .iv-title { font-size: 19px; }
.ob-grid .iv-by { margin-top: auto; }
.ob-grid .iv-sum { margin-bottom: 16px; }
@media (max-width: 900px) {
  .ob-grid { grid-template-columns: minmax(0, 1fr); }
  .ob-head { flex-direction: column; align-items: flex-start; }
  .odds-biz { padding: 22px 18px; }
}

/* Odds and guides: tighter page head and gap above the filter */
.page-head.ph-tight { padding: 32px 0 calc(var(--head-gap) / 2); }
.ph-tight .lede { margin-top: 10px; }
.ob-grid .iv-by { flex-wrap: nowrap; }
@media (max-width: 720px) {
  .page-head.ph-tight { padding: 24px 0 calc(var(--head-gap) / 2); }
}

/* ---------- Odds: headline verdict ---------- */
.ov { padding: 30px; }
.ov-badge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 99px; font-size: 14px; font-weight: 700; }
.ov-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ov-badge.good { background: #E3F1E8; color: #145C37; }
.ov-badge.fair { background: #FFF4CC; color: #7A5A00; }
.ov-badge.tough { background: #FBE4DF; color: #A2301F; }
.ov-h { margin: 14px 0 0; font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; max-width: 34em; text-wrap: pretty; }
.ov-h b { font-weight: 800; background: var(--hivis); padding: 0 6px; border-radius: 4px; }
.ov-path { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.ov-path li { padding: 4px 0; }
.ov-path li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.ov-when { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ov-num { display: block; margin: 6px 0 4px; font-size: 34px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ov-num small { font-size: 15px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.ov-what { font-size: 15px; color: var(--ink-2); }
.ov-what b { color: var(--ink); }
.ov-facts { margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.ov-facts div { padding: 14px 20px 0 0; }
.ov-facts div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.ov-facts dt { font-size: 13.5px; color: var(--muted); }
.ov-facts dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; }
.ov-help { margin-top: 20px; display: grid; gap: 12px; }
.ov-warn { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.5; }
.ov-warn i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #B88A00; color: #fff; font-style: normal; font-size: 12px; font-weight: 700; margin-top: 1px; }
.ov-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.ov-tips-h { grid-column: 1 / -1; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--money); }
.ov-tip { display: grid; gap: 4px; text-align: left; padding: 14px 0; border: 0; border-top: 1px solid var(--rule); background: none; cursor: pointer; font: inherit; color: var(--ink); }
.ov-tip:hover .ov-tip-go { text-decoration: underline; }
.ov-tip:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
.ov-tip > span:first-child { font-size: 16px; font-weight: 700; }
.ov-tip-to { font-size: 14px; color: var(--ink-2); }
.ov-tip-to b { color: var(--money); }
.ov-tip-go { font-size: 14px; font-weight: 700; color: var(--carbon); }
.ov-src { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 720px) {
  .ov { padding: 22px 18px; }
  .ov-path, .ov-facts, .ov-tips { grid-template-columns: minmax(0, 1fr); }
  .ov-facts div, .ov-facts div + div { padding: 12px 0; border-left: 0; }
  .ov-facts div + div { border-top: 1px solid var(--rule); }
}

/* Odds: real businesses without the panel; cards run to the column edges */
.odds-biz { background: transparent; border: 0; border-radius: 0; padding: 12px 0 0; box-shadow: none; }
.odds-biz .iv-card2 { border-color: #D3D8CE; }
@media (max-width: 900px) { .odds-biz { padding: 8px 0 0; } }

/* Odds on phones (owner, 25 Oct): the three steps become one compact list, a row a year with a thin bar for the share */
.ov-share { display: none; }
@media (max-width: 720px) {
  .ov-path { gap: 0; margin-top: 20px; }
  .ov-path li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when num" "what num" "bar bar"; column-gap: 12px; align-items: center; padding: 12px 0; }
  .ov-path li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .ov-when { grid-area: when; font-size: 11.5px; }
  .ov-what { grid-area: what; font-size: 14px; }
  .ov-num { grid-area: num; margin: 0; font-size: 26px; text-align: right; white-space: nowrap; }
  .ov-num small { font-size: 13px; }
  .ov-share { grid-area: bar; display: block; height: 4px; margin-top: 10px; border-radius: 2px; background: var(--rule); overflow: hidden; }
  .ov-share i { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
}

/* Odds: business picker inside the filter card */
.odds-form .of-label { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.odds-form .pick { position: relative; max-width: none; }
.odds-form .pick-list { z-index: 30; }

/* Odds: start-vs-buy verdict and live listings */
.sb-say { display: flex; gap: 14px; align-items: flex-start; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.sb-say i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; background: var(--money); }
.sb-say.buy i { background: #B88A00; }
.sb-say p { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.sb-say p b { color: var(--ink); }
.sb-market { margin: 0 0 20px; padding-top: 12px; }
.sb-market-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.sb-market-h h4 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; }
.sb-live { width: 10px; height: 10px; border-radius: 50%; background: var(--money); box-shadow: 0 0 0 4px rgba(31, 122, 77, 0.18); }
.sb-market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sb-more { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 180px; padding: 24px; border: 1.5px dashed var(--rule-strong); border-radius: 16px; color: var(--ink); text-decoration: none; background: var(--paper); transition: border-color 140ms ease, background 140ms ease; }
.sb-more:hover { border-color: var(--ink); background: var(--sheet); }
.sb-more-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 18px; margin-bottom: 6px; }
.sb-more b { font-size: 17px; }
.sb-more > span:last-child { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 900px) {
  .sb-market-grid { grid-template-columns: minmax(0, 1fr); }
  .sb-market-h { flex-direction: column; align-items: flex-start; }
  .sb-more { min-height: 0; }
}

/* Booking card: what you get from the call */
.bk-card .bk-lead { margin: 6px 0 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.bk-gets { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.bk-gets li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.bk-gets li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--money); color: #fff; font-size: 11px; font-weight: 700; }
.bk-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.bk-topics span { width: 100%; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.bk-topics em { font-style: normal; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2); }

/* Call lengths: price is the big, dark number */
.bk-dur span { gap: 4px; padding: 12px 6px; }
.bk-dur b { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.bk-dur small { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.bk-dur input:checked + span b { color: var(--ink); }

/* ---------- Hero v3: warmer, more inviting ---------- */
.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 62%; height: 120%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 214, 10, 0.22), rgba(255, 214, 10, 0) 70%);
}
.hero > .wrap { position: relative; z-index: 1; }
.hx-live { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 99px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.hx-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--money); box-shadow: 0 0 0 4px rgba(31, 122, 77, 0.16); }
.hero h1.hx-h1 { margin: 20px 0 20px; font-size: clamp(2.5rem, 5vw, 3.875rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.hx-keep { white-space: nowrap; } /* the headline only ever breaks before "really earns." */
.hx-mark { white-space: nowrap; background: linear-gradient(transparent 62%, var(--hivis) 62%, var(--hivis) 92%, transparent 92%); padding: 0 4px; margin: 0 -4px; }
.hero h1 .h1-2 { display: block; margin-top: 14px; font-size: 0.5em; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; color: var(--ink-2); }
.hx-promise { font-size: 18px; line-height: 1.6; font-weight: 400; color: var(--ink-2); max-width: 31em; }
.hx-points { margin-top: 22px; gap: 10px; display: flex; flex-wrap: wrap; }
.hx-points li { gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 99px; background: var(--sheet); border: 1px solid var(--rule); font-size: 14.5px; font-weight: 700; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.04); }
.hx-points li::before { content: none; }
.hx-points li i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #E3F1E8; color: var(--money); }
.hx-points li i svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .hero::before { width: 100%; inset: -10% -30% auto auto; }
  .hero h1.hx-h1 { font-size: min(2.35rem, calc((100vw - 52px) / 10.4)); } /* two lines at most: "See what a business" must fit the column */
  .hx-promise { font-size: 16.5px; }
  .hx-points { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hx-points li { height: auto; min-height: 40px; padding: 8px 10px 8px 8px; font-size: 13.5px; line-height: 1.25; }
}
@media (min-width: 721px) { .hx-points { display: grid; grid-template-columns: repeat(2, max-content); } }
@media (max-width: 720px) { .hero::before { display: none; } }

/* Home mini odds: four regions (USA, Canada, UK, Europe) */
.where { max-width: 560px; }
.where-seg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 520px) {
  .where-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Five regions: the last one spans the row instead of sitting alone */
  .where-seg label:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Landing polish: the stamp sits on the barcode, not on the "synced" line */
.stamp { bottom: 30px; right: 44px; }

/* Landing polish (mobile): goal tiles as a compact 2 x 2 grid instead of four tall rows */
@media (max-width: 720px) {
  .hx-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hx-goal { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .hx-goal i { width: 36px; height: 36px; border-radius: 10px; }
  .hx-goal i svg { width: 18px; height: 18px; }
  .hx-goal b { font-size: 15px; }
  .hx-goal small { font-size: 12.5px; }
  .hx-goal em { display: none; }
}

/* Landing polish (mobile): leaderboard region tabs scroll sideways instead of orphaning "Canada";
   two-line business names get a little more room */
@media (max-width: 720px) {
  #lb-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -2px; padding: 2px; scrollbar-width: none; }
  #lb-tabs::-webkit-scrollbar { display: none; }
  #lb-tabs .tab { flex: none; }
  .lb-table td { height: 76px; }
  .lb-table td.c-name { min-width: 190px; }
}

/* Landing polish (mobile): owner report column headings no longer collide */
@media (max-width: 520px) { .sc-long { display: none; } .sc thead th { padding-left: 8px; } }

/* Polish (mobile): the newsletter card in page heads drops its note so listings start sooner */
@media (max-width: 720px) {
  .page-head .hx-founder, .ph-grid .hx-founder { display: none; }
}


/* Jobs (mobile): filters in two columns, and no second "Hiring?" box right above the Post a job button */
@media (max-width: 900px) {
  .jobs-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jobs-filters .field { margin-top: 0 !important; }
  .jobs-filters .field:last-child { grid-column: 1 / -1; }
  .jobs-post { display: none; }
}

/* Guide (mobile): the revenue table fits the screen without sideways scrolling */
@media (max-width: 520px) {
  .data-table th, .data-table td { padding: 10px 5px; }
  .data-table td:first-child, .data-table th:first-child { white-space: nowrap; padding-left: 0; }
  .data-table td.num, .data-table th.num { font-size: 12.5px; letter-spacing: -0.02em; }
  .data-table thead th { font-size: 0.64rem; letter-spacing: 0.03em; }
}

/* ---------- Profile sections as accordions (phones fold them; desktop looks as before) ---------- */
.acc > summary { list-style: none; }
.acc > summary::-webkit-details-marker { display: none; }
.acc-h { display: block; }
.acc-h h2 { font-size: 20px; margin: 0 0 14px; }
.pit-feature .acc-h h2 { font-size: 24px; margin-bottom: 10px; }
.acc-body > .lead { margin: -6px 0 18px; color: var(--muted); font-size: 14px; }
.pit-feature .acc-body > .lead { margin: 0 0 20px; max-width: 42em; }
.acc-all { display: none; }
@media (min-width: 721px) {
  .acc-h { pointer-events: none; cursor: default; }
}
@media (max-width: 720px) {
  .acc-all { display: block; margin: 18px 0 0; padding: 0; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--carbon); cursor: pointer; text-align: left; }
  .dt-section:has(> .acc) { padding: 0; }
  .acc-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .acc-h:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; border-radius: 6px; }
  .acc-t { min-width: 0; }
  .acc-h h2, .pit-feature .acc-h h2 { font-size: 18px; line-height: 1.3; margin: 0; }
  .acc-t .eyebrow { margin-bottom: 4px; }
  .acc-h::after {
    content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--rule-strong);
    background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313203B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  }
  .acc[open] > .acc-h::after { transform: rotate(180deg); }
  .acc-body { padding-bottom: 22px; }
  .acc[open] > .acc-h { padding-bottom: 14px; }
}

/* Summary facts grow with their text instead of clipping when they wrap on a phone */
.pm-fact { line-height: 1.3; }

/* Accordions for blocks whose heading sits inside the block (verified report, data room) and for aside cards */
.acc-title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }
@media (min-width: 721px) {
  .acc-deep > .acc-h { display: none; }
}
@media (max-width: 720px) {
  .acc-deep .acc-dup { display: none; }
  .acc-aside { border-top: 1px solid var(--rule); }
  .acc-aside + .acc-aside { margin-top: 0; }
  .acc-aside > .acc-body { padding-bottom: 18px; }
}

/* Hero, calmer: one headline, one sentence, one search box (the four goal tiles below carry the rest) */
.hero h1.hx-h1 { margin: 22px 0 18px; }
.hx-promise { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.hx-search { margin-top: 30px; }
@media (max-width: 720px) { .hx-promise { font-size: 16.5px; } .hx-search { margin-top: 24px; } }
@media (min-width: 1021px) { .hero-grid { align-items: center; } .hero-grid > .hx-goals { align-self: start; } }

/* Profile number tiles: shorter blocks */
.dt-tiles { gap: 8px; margin-top: 20px; }
.dt-tile { padding: 10px 14px 9px; border-radius: 10px; }
.dt-tile .mk-val { font-size: 19px; line-height: 1.25; }
.dt-tile .mk-lab { margin-top: 1px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Full job posting: summary, key facts, hours, benefits, skills ---------- */
.job-about { grid-column: 1 / -1; margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); max-width: 68ch; }
.job-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--rule); }
.job-facts > div { padding: 0 14px 12px; min-width: 0; }
.job-facts > div:first-child { padding-left: 0; }
.job-facts > div + div { border-left: 1px solid var(--rule); }
.job-facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.job-facts dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.job-body .job-perks { list-style: none; padding-left: 0; }
.job-perks li { display: flex; align-items: flex-start; gap: 8px; }
.job-perks svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--money); }
.job-skills { grid-column: 1 / -1; }
.job-skills p { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.job-skills span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid #D3D8CE; background: var(--sheet); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.job-apply { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; }
.job-apply .btn { border-radius: 99px; }
.job-apply span { font-size: 13.5px; color: var(--muted); }
.jp-more { margin-top: 2px; }
.jp-more > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--money); padding: 6px 0; }
.jp-more[open] > summary { margin-bottom: 8px; }
.jp-more .field + .field, .jp-more .bk-gift-grid + .field, .jp-more .field + .bk-gift-grid { margin-top: 12px; }
@media (max-width: 640px) {
  .job-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-facts > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .job-facts > div:nth-child(n + 3) { border-top: 1px solid var(--rule); padding-top: 12px; }
}

/* ---------- Featured profile sections: the risk (why they fail) and growth ---------- */
.sec-feature > .eyebrow, .sec-feature .acc-t .eyebrow { margin-bottom: 10px; }
.sec-risk .eyebrow { color: var(--closed); }
.sec-growth .eyebrow { color: var(--money); }
.sec-feature > h2, .sec-feature .acc-h h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 10px; }
.sec-feature > .lead, .sec-feature .acc-body > .lead { margin: 0 0 20px; max-width: 44em; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.fail-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); margin: 0 0 22px; background: var(--sheet); border: 1px solid #C9CFC3; border-radius: 14px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.06), 0 16px 36px -22px rgba(19, 32, 59, 0.35); }
.fail-facts > div { padding: 18px 20px 16px; min-width: 0; }
.fail-facts > div + div { border-left: 1px solid var(--rule); }
.fail-facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.fail-facts dd { margin: 8px 0 0; font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fail-facts small { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.fail-cause { background: #FDF1EE; border-radius: 0 13px 13px 0; }
.fail-facts .fail-cause dt { color: #7F2618; }
.fail-facts .fail-cause dd { font-size: 21px; line-height: 1.25; letter-spacing: -0.005em; margin-top: 10px; color: #7F2618; }
.gr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gr-item { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 16px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); }
.gr-item.is-main { grid-column: 1 / -1; border-color: #BFE0CB; background: #F4FAF6; }
.gr-item:last-child:nth-child(even) { grid-column: 1 / -1; } /* no card left alone on a row */
.gr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gr-rank { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.gr-item h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.gr-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; background: #E3F1E8; color: #145C37; font-size: 12px; font-weight: 700; }
.gr-say { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); flex: 1; }
.gr-item.is-main .gr-say { font-size: 17px; max-width: 40em; }
.gr-share { display: flex; align-items: center; gap: 10px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--rule-strong); font-size: 13.5px; color: var(--ink-2); }
.gr-share b { color: var(--ink); }
.gr-dots { display: inline-grid; grid-template-columns: repeat(10, 8px); gap: 3px; flex: none; }
.gr-dots i { width: 8px; height: 8px; border-radius: 50%; background: #DDE1DA; }
.gr-dots i.on { background: var(--money); }
.sec-growth .gr-list + .muted { margin: 16px 0 0; }
/* "Doesn't use yet": a clear panel, so the untried channels read as opportunities, not small print (owner, 27 Oct) */
.gr-rest { margin-top: 22px; padding: 20px 22px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); }
.gr-rest-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--rule-strong); }
.gr-rest h3 { margin: 0; font-size: 17px; color: var(--ink); }
.gr-rest-head p { margin: 0; font-size: 13.5px; color: var(--muted); }
.gr-rest ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.gr-rest li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l n" "d d"; align-items: center; gap: 6px 12px; padding: 10px 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.gr-rest .gr-rest-l { grid-area: l; }
.gr-rest li > small { grid-area: n; }
.gr-rest li > .gr-dots { grid-area: d; }
.gr-rest li + li { border-top: 1px solid #EEF0EC; }
.gr-rest li:nth-child(2) { border-top: 0; }
.gr-rest small { font-size: 13px; font-weight: 400; color: var(--muted); text-align: right; white-space: nowrap; }
.gr-rest small b { color: var(--ink); font-weight: 700; }
.gr-rest .gr-dots i.on { background: var(--carbon); }
@media (max-width: 720px) {
  .sec-feature .acc-h h2 { font-size: 18px; line-height: 1.3; margin: 0; }
  .sec-feature .acc-t .eyebrow { margin-bottom: 4px; }
  .fail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fail-facts > div { padding: 14px 16px; }
  .fail-facts dd { font-size: 28px; }
  .fail-cause { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--rule); border-radius: 0 0 13px 13px; }
  .gr-list { grid-template-columns: minmax(0, 1fr); }
  .gr-item { padding: 16px; }
  .gr-share { flex-wrap: wrap; }
  .gr-rest { padding: 16px; }
  .gr-rest ul { grid-template-columns: minmax(0, 1fr); }
  .gr-rest li:nth-child(2) { border-top: 1px solid #EEF0EC; }
}

/* ---------- Section headings: page and section titles in Besley, sized to register; a short highlighter bar marks each new section ---------- */
h1, h2, .display { font-weight: 700; letter-spacing: -0.012em; font-feature-settings: "lnum" 1; }
h3, h4, .logo, .stamp { font-family: var(--font-body); }
h1 { font-size: 32px; line-height: 1.1; }
@media (min-width: 768px) { h1 { font-size: 42px; } }
@media (min-width: 1024px) { h1 { font-size: 52px; line-height: 1.06; } }
h1.page-title { font-size: 30px; line-height: 1.15; }
@media (min-width: 1024px) { h1.page-title { font-size: 40px; } }
h2 { font-size: 25px; line-height: 1.18; }
@media (min-width: 1024px) { h2 { font-size: 34px; } }
/* Profile sections */
.acc-h h2, .dt-section > h2 { font-size: 25px; line-height: 1.2; }
.pit-feature .acc-h h2, .pit-feature > h2, .sec-feature .acc-h h2, .sec-feature > h2 { font-size: 30px; line-height: 1.16; }
.prose h2 { font-size: 28px; line-height: 1.2; }
#pb-h, #pm-h { font-size: 30px; line-height: 1.16; }
#sim-h { font-size: 28px; }
/* Odds page: each result block opens with a section title */
.odds-block > h3, .ob-head h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.012em; font-size: 25px; line-height: 1.2; margin-bottom: 10px; }
.odds-block > h3 { margin-bottom: 18px; }
.odds-block > h3 + .muted { margin-top: -10px; }
.ob-head h3 { font-size: 30px; }
/* Small headings that label a box, a side panel or a dialog are not section titles: they stay in the body face */
.iv-side-h, .ov-h, .jobs-post h2, .bk-card h2, .interest h2, .jb-why-head h2, .acc-title, dialog h2, .gate-dialog h2, .bk-dialog h2, .vr-head h2, .dr-head h2, .lock-wall h2, .site-footer h2 { font-family: var(--font-body); letter-spacing: -0.02em; }
/* The marker: one short highlighter stroke above the title (or above its label when it has one) */
.section-head > div > :first-child::before,
.grid-2 > div > .eyebrow:first-child::before, .grid-2 > div > h2:first-child::before,
.odds-mini > div > .eyebrow:first-child::before, .odds-mini > div > h2:first-child::before,
.section-tight > .wrap > h2:first-child::before,
.acc-t > :first-child::before, .dt-section > .eyebrow:first-child::before, .dt-section > h2:first-child::before,
.section-head > h2:first-child::before, .odds-block > h3::before,
.prose h2::before {
  content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--hivis); margin-bottom: 14px;
}
.prose h2 { margin-top: 1.9em; }
/* Two-column pages: the first thing in the main column starts level with the side column */
.guide-grid > .prose > :first-child { margin-top: 0; }
@media (max-width: 720px) {
  .acc-h h2, .pit-feature .acc-h h2, .sec-feature .acc-h h2 { font-size: 19px; line-height: 1.28; margin: 0; }
  .acc-t > :first-child::before { content: none; } /* folded rows on phones stay a clean list */
  .prose h2 { font-size: 24px; }
  #pb-h, #pm-h { font-size: 19px; line-height: 1.28; }
  #sim-h { font-size: 24px; }
  .odds-block > h3 { font-size: 22px; }
  .ob-head h3 { font-size: 24px; }
  h1.page-title { font-size: 28px; }
}

/* One-step page load: nothing is shown until the page is fully drawn (class set in <head>, removed in app.js) */
html.hd-wait body { visibility: hidden; }
/* While the page is being drawn: the page colour and a thin moving bar at the top, instead of a blank or half-built page */
html.hd-wait { background: var(--paper); }
html.hd-wait::before { content: ""; position: fixed; left: 0; top: 0; z-index: 1000; width: 40%; height: 3px; border-radius: 0 3px 3px 0; background: var(--hivis); animation: hd-load 1.1s ease-in-out infinite; }
@keyframes hd-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { html.hd-wait::before { animation: none; width: 100%; opacity: .6; } }

/* [dashboards] Signed-in pages. The app builds them in their own phase (spec §19); apps/web/app/prototype-parity.test.ts skips this block until then. */
/* Your deals, saved and watching: the Businesses for sale card with a strip for what's happening and the action */
.mk-deal { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.mk-deal p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.mk-deal .due { color: var(--closed); font-weight: 700; }
.mk-deal p:first-child { margin-top: 0; }
.mk-deal p b { color: var(--ink); }
.mk-deal .app-act { position: relative; z-index: 2; flex: none; }
.mk-grid.is-one { grid-template-columns: minmax(0, 1fr); }
/* ==========================================================
   Dashboards: owner, member and admin (signed-in pages; spec §10.10, §10.11, §10.14)
   Built from the public components: same tokens, cards, chips, buttons and fields.
   One idea per screen: what needs you first, then how things stand, then the tools.
   ========================================================== */

/* Header: account chip replaces "Get verified" when signed in */
.acct { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 4px; border: 1.5px solid var(--rule-strong); border-radius: 99px; background: var(--sheet); font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.acct:hover { border-color: var(--ink); }
.acct i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--hivis); font-style: normal; font-size: 12px; font-weight: 700; }
@media (max-width: 480px) { .acct { padding-right: 4px; } .acct span { display: none; } }

/* Shell: side column (who, navigation) + main column */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 44px; align-items: start; padding-block: 36px calc(var(--sec-gap) / 2); }
.app[hidden] { display: none; }
.app-side {
  position: sticky; top: 89px; display: grid; min-width: 0; overflow: hidden;
  background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05), 0 10px 28px -20px rgba(19, 32, 59, 0.35);
}
.app-main { min-width: 0; }
.app-who { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule); min-width: 0; }
.app-who > i { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--hivis); font-style: normal; font-size: 15px; font-weight: 700; }
.app-who > div { min-width: 0; }
.app-who b { display: block; font-size: 15px; line-height: 1.3; }
.app-who span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Navigation: icon + label + count; the current screen is ink with a hi-vis icon */
.app-nav { display: grid; padding: 6px 10px 8px; }
.app-nav > div + div { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
.app-nav-h { margin: 4px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.app-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app-nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px 0 7px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; transition: background-color 120ms ease; }
.app-nav .nav-i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--paper); color: var(--ink-2); font-style: normal; transition: background-color 120ms ease; }
.app-nav .nav-i svg { width: 17px; height: 17px; }
.app-nav .nav-l { flex: 1; min-width: 0; line-height: 1.25; }
.app-nav a:hover { background: var(--paper); }
.app-nav a:hover .nav-i { background: #E2E5DF; color: var(--ink); }
.app-nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.app-nav a[aria-current="page"] .nav-i { background: var(--hivis); color: var(--ink); }
.app-nav a small { min-width: 24px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 99px; background: var(--paper); font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.app-nav a[aria-current="page"] small { background: rgba(255, 255, 255, 0.16); color: #fff; }
.app-nav a .mk-badge { min-width: 22px; height: 22px; font-size: 12px; }
.app-nav a[aria-current="page"] .mk-badge { box-shadow: 0 0 0 2px var(--ink); }
.app-nav a.is-off { color: var(--muted); font-weight: 500; }
.app-nav a.is-off .nav-i { color: var(--muted); }
.app-nav a.is-off[aria-current="page"] { color: #fff; }
.app-proto { margin: 0 10px 10px; padding: 8px 10px; border: 1.5px dashed var(--rule-strong); border-radius: 12px; }
.app-proto .field > span { font-size: 12px; }
.app-proto .select { height: 36px; font-size: 13.5px; }
/* Short desktop screens: tighter rows so the floating menu always fits on screen */
@media (min-width: 901px) and (max-height: 900px) {
  .app-nav a { min-height: 34px; }
  .app-nav .nav-i { width: 26px; height: 26px; }
  .app-nav .nav-i svg { width: 15px; height: 15px; }
  .app-nav-h { margin: 2px 10px; }
  .app-nav > div + div { margin-top: 4px; padding-top: 4px; }
  .app-who { padding-block: 10px; }
}
/* Phone section bar and sheet: hidden on desktop, where the side column shows everything */
.app-mbar, .app-sheet-head { display: none; }
.app-sheet { display: contents; }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
  /* The side column becomes one sticky bar: where you are, and a button for every section */
  .app-side { position: sticky; top: 65px; z-index: 30; display: block; overflow: visible; margin: -16px -16px 0; padding: 10px 16px; background: rgba(236, 238, 234, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
  .app-mbar { display: block; }
  .app-mbar-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 8px 0 8px; border: 1px solid #D3D8CE; border-radius: 16px; background: var(--sheet); font: inherit; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); }
  .app-mbar-cur { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .app-mbar-cur .nav-i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--hivis); color: var(--ink); font-style: normal; }
  .app-mbar-cur .nav-i svg { width: 18px; height: 18px; }
  .app-mbar-cur b { font-size: 15.5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .app-mbar-all { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 12px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
  .app-mbar-all svg { width: 17px; height: 17px; }
  .app-mbar-all .mk-badge { min-width: 22px; height: 22px; font-size: 12px; box-shadow: 0 0 0 2px var(--ink); }
  /* The sheet: every section, grouped as on desktop, with big tap targets */
  .app-sheet { display: none; }
  .app-sheet.open { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--sheet); animation: sheet-in 0.2s var(--ease); }
  .app-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--sheet); border-bottom: 1px solid var(--rule); }
  .app-sheet-head b { font-size: 17px; }
  .app-sheet-x { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--sheet); color: var(--ink); cursor: pointer; }
  .app-sheet-x svg { width: 18px; height: 18px; }
  .app-sheet .app-who { padding: 16px; }
  .app-sheet .app-nav { padding: 6px 12px 16px; }
  .app-sheet .app-nav a { min-height: 52px; font-size: 16px; padding: 0 12px 0 8px; }
  .app-sheet .app-nav .nav-i { width: 34px; height: 34px; }
  .app-sheet .app-nav .nav-i svg { width: 18px; height: 18px; }
  .app-sheet .app-nav-h { margin: 10px 8px 6px; }
  .app-sheet .app-proto { margin: auto 16px 16px; }
  html.sheet-open { overflow: hidden; }
  /* A backdrop blur makes the bar the frame for fixed children; drop it so the sheet covers the screen */
  html.sheet-open .app-side { z-index: 200; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (min-width: 641px) and (max-width: 900px) { .app-side { margin-inline: -24px; padding-inline: 24px; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-sheet.open { animation: none; } }

/* View heading: the page title of each screen (a route of its own in the app) */
.app-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.app-head > div { min-width: 0; flex: 1 1 360px; }
.app-head .eyebrow { margin-bottom: 8px; }
.app-head .lede { margin: 10px 0 0; font-size: 16px; max-width: 40em; }
.app-head .btn-row { flex: none; }
.app-sec { padding-top: 40px; }
/* The first section sits closer to the page title than sections sit to each other */
.app-head + .app-sec { padding-top: 20px; }
.app-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 20px; margin-bottom: 16px; }
.app-sec-head > div { min-width: 0; flex: 1 1 320px; }
.app-sec-head h2 { font-size: 25px; line-height: 1.2; }
.app-sec-head p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 44em; }
.app-sec-head > div > h2:first-child::before, .app-sec-head > div > .eyebrow:first-child::before {
  content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--hivis); margin-bottom: 14px;
}
.app-sec-head .btn { flex: none; }
@media (max-width: 720px) { .app-sec { padding-top: 32px; } .app-head + .app-sec { padding-top: 16px; } .app-sec-head h2 { font-size: 22px; } }

/* Boxes and rows: every list in a dashboard is one white box of rows */
.app-box { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); min-width: 0; }
.app-pad { padding: 22px; }
.app-box + .app-box, .app-box + .note, .note + .app-box { margin-top: 14px; }
.app-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; }
.app-row + .app-row, .app-row + details, details + .app-row, details + details { border-top: 1px solid var(--rule); }
.app-row.no-ico { grid-template-columns: minmax(0, 1fr) auto; }
.app-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--paper); color: var(--ink-2); font-style: normal; font-size: 15px; font-weight: 700; }
.app-ico svg { width: 20px; height: 20px; }
.app-ico.warn { background: #FBE4DF; color: #A2301F; }
.app-ico.money { background: #E3F1E8; color: #145C37; }
.app-ico.hi { background: #FFF4B8; color: var(--ink); }
.app-ico.ver { background: var(--carbon-soft); color: var(--carbon); }
.app-ico.done { background: var(--money); color: #fff; }
.app-row b, .app-row .t { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.app-row .t a { color: inherit; text-decoration: none; }
.app-row .t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-row .sub { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.app-row .sub b { display: inline; font-size: inherit; color: var(--ink-2); }
.app-row .due { color: var(--closed); font-weight: 700; }
.app-row p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 44em; }
.app-act { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.app-act .btn { border-radius: 99px; }
.app .btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Actions that remove or switch something off: red button in a light red box, never next to a yellow one */
.btn-danger { background: var(--closed); border-color: var(--closed); color: #fff; }
.btn-danger:hover { background: #A2301F; border-color: #A2301F; }
.app-box.is-danger { background: #FDF3F1; border-color: #EBC4BD; box-shadow: none; }
.app-box.is-danger .app-row .t { color: #A2301F; }
.app-row .mk-chip { vertical-align: 1px; margin-left: 6px; }
.app-fig { text-align: right; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-fig small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.app-fig.money { color: var(--money); }
@media (max-width: 640px) {
  .app-row { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 16px; gap: 12px; }
  .app-row.no-ico { grid-template-columns: minmax(0, 1fr); }
  .app-ico { width: 36px; height: 36px; }
  .app-row > .app-ico { align-self: start; }
  .app-row > .app-act, .app-row > .app-fig { grid-column: 2; justify-content: flex-start; text-align: left; }
  .app-row.no-ico > .app-act, .app-row.no-ico > .app-fig { grid-column: 1; }
}
.app-empty { padding: 28px 20px; text-align: center; font-size: 14.5px; color: var(--ink-2); }
.app-empty b { display: block; margin-bottom: 4px; color: var(--ink); }

/* Expandable rows (queues, applications, offers): the summary is the row, the body holds the detail and the actions */
.app-x > summary { list-style: none; cursor: pointer; }
.app-x > summary::-webkit-details-marker { display: none; }
.app-x > summary .app-act::after { content: ""; width: 10px; height: 10px; margin-left: 6px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform 150ms ease; }
.app-x[open] > summary .app-act::after { transform: rotate(-135deg) translate(-2px, -2px); }
.app-x-body { padding: 0 20px 20px 74px; }
.app-x.no-ico .app-x-body { padding-left: 20px; }
.app-x-body > * + * { margin-top: 14px; }
@media (max-width: 640px) { .app-x-body { padding: 0 16px 16px; } }

/* Small labels */
.ai-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; background: var(--carbon-soft); color: var(--carbon); font-size: 11.5px; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.mk-chip-muted { background: var(--paper); color: var(--ink-2); }
.mk-chip-warn { background: #FFF3C4; color: #6B5200; }
.dr-steps li.is-done { color: var(--ink-2); }
.dr-steps li.is-done b { background: var(--money); color: #fff; }
.app .dr-steps { flex-wrap: wrap; row-gap: 8px; }

/* Switch: on/off settings, always with a written state next to it */
.sw { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink); text-align: left; }
.sw i { position: relative; width: 44px; height: 26px; flex: none; border-radius: 99px; background: var(--rule-strong); transition: background-color 140ms ease; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.25); transition: transform 140ms var(--ease); }
.sw[aria-checked="true"] i { background: var(--grow); }
.sw[aria-checked="true"] i::after { transform: translateX(18px); }
.sw:disabled { cursor: not-allowed; opacity: 0.5; }
.sw span { min-width: 2.2em; }

/* Forms inside dashboards */
.app-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app-form .wide { grid-column: 1 / -1; }
.app-form textarea.input, .app-pad textarea.input, dialog textarea.input { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.app-form .hint { font-size: 12.5px; color: var(--muted); }
.app-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.app-form-foot .btn { border-radius: 99px; }
.app-form-foot p { margin: 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 640px) { .app-form { grid-template-columns: minmax(0, 1fr); } }

/* Usage pips (free allowances) */
.pips { display: inline-flex; gap: 4px; vertical-align: middle; }
.pips i { width: 22px; height: 8px; border-radius: 99px; background: var(--rule); }
.pips i.on { background: var(--ink); }
.pips.is-out i.on { background: var(--closed); }

/* Settings rows: label and explanation on the left, the control on the right */
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding: 18px 20px; }
.set-row + .set-row { border-top: 1px solid var(--rule); }
.set-row b { display: block; font-size: 15.5px; }
.set-row p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 40em; }
@media (max-width: 640px) { .set-row { grid-template-columns: minmax(0, 1fr); padding: 16px; } }

/* Messages: thread list + conversation */
.inbox { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 420px; }
.inbox-list { border-right: 1px solid var(--rule); }
.inbox-list button { display: grid; gap: 2px; width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; text-align: left; cursor: pointer; font: inherit; }
.inbox-list button:hover { background: #FAFAF8; }
.inbox-list button[aria-pressed="true"] { background: var(--paper); box-shadow: inset 4px 0 0 var(--hivis); }
.inbox-list b { font-size: 14.5px; }
.inbox-list span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-list .is-new b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--closed); vertical-align: 2px; }
.thread { display: flex; flex-direction: column; min-width: 0; }
.thread-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 14px 20px; border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--muted); }
.thread-head b { font-size: 15.5px; color: var(--ink); }
.thread-msgs { display: grid; gap: 10px; padding: 20px; align-content: start; flex: 1; }
.msg { max-width: 34em; padding: 12px 14px; border-radius: 14px; background: var(--paper); font-size: 14.5px; line-height: 1.55; }
.msg small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.msg.me { justify-self: end; background: var(--sage); border: 1px solid var(--sage-line); }
.msg.held { border: 1px dashed var(--rule-strong); background: var(--sheet); color: var(--muted); }
.thread-reply { display: grid; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--rule); }
.thread-reply .btn { justify-self: start; border-radius: 99px; }
.thread-ro { padding: 16px 20px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); background: #FAFAF8; border-radius: 0 0 16px 0; }
@media (max-width: 760px) { .inbox { grid-template-columns: minmax(0, 1fr); } .inbox-list { border-right: 0; border-bottom: 1px solid var(--rule); } .thread-ro { border-radius: 0 0 16px 16px; } }

/* Weekly hours (advice availability) */
.hours-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; }
.hours-row + .hours-row { border-top: 1px solid var(--rule); }
.hours-row b { font-size: 14.5px; }
.hours-row .chips { gap: 6px; }
.hours-row .tag { font-size: 13px; padding: 4px 10px; }
.hours-row.is-off .chips { color: var(--muted); font-size: 13.5px; }
@media (max-width: 640px) { .hours-row { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; } .hours-row .chips { grid-column: 1 / -1; grid-row: 2; } }

/* Advice call prices: owner's own price per length, with what they get after HumDays's share */
.price-head, .price-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 120px 96px; gap: 16px; align-items: center; padding: 12px 20px; }
.price-head { padding-block: 14px 10px; border-bottom: 1px solid var(--rule); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.price-row + .price-row { border-top: 1px solid var(--rule); }
.price-row > b { font-size: 15.5px; }
.price-in { position: relative; display: block; }
.price-in span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--ink-2); pointer-events: none; }
.price-in .input { padding-left: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-in .input[aria-invalid="true"] { border-color: var(--closed); }
.price-get b { font-size: 16px; color: var(--money); font-variant-numeric: tabular-nums; }
.price-get small { display: none; font-size: 13px; color: var(--muted); }
.price-row.is-off > b, .price-row.is-off .price-get b { color: var(--muted); }
.price-row.is-off .price-in { opacity: 0.5; }
@media (max-width: 640px) {
  .price-head { display: none; }
  .price-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 16px; }
  .price-in { grid-row: 2; }
  .price-get { grid-row: 2; text-align: right; }
  .price-get small { display: inline; }
}

/* Live buttons in signed-in pages and the connect picker: hover changes colour or shadow only, never size or position (hard rule 9) */
.app .btn, .cx .btn, dialog .btn { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease; }
.app .btn-ghost:not(:disabled):hover, .cx .btn-ghost:not(:disabled):hover, dialog .btn-ghost:not(:disabled):hover,
.app .btn-ghost:focus-visible, .cx .btn-ghost:focus-visible, dialog .btn-ghost:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.app .btn-hivis:not(:disabled):hover, .cx .btn-hivis:not(:disabled):hover, dialog .btn-hivis:not(:disabled):hover { background: var(--hivis); box-shadow: 3px 3px 0 var(--ink); }
.app .btn-danger:not(:disabled):hover, dialog .btn-danger:not(:disabled):hover { background: #A2301F; border-color: #A2301F; box-shadow: 3px 3px 0 var(--ink); }
.app .btn:not(:disabled):active, .cx .btn:not(:disabled):active, dialog .btn:not(:disabled):active { box-shadow: none; }
.app-x > summary { transition: background-color 120ms ease; }
.app-x > summary:hover { background: #FAFAF8; }
.app-x:first-child > summary { border-radius: 16px 16px 0 0; }
.app-x:last-child:not([open]) > summary { border-radius: 0 0 16px 16px; }
.inbox-list button { transition: background-color 120ms ease; }
.cx-opt { transition: background-color 120ms ease; }

/* Editors: sub-tabs, labelled fields with counts, repeatable lists, live previews */
.app-tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 24px; padding: 4px; overflow-x: auto; scrollbar-width: none; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 12px; }
.app-tabs::-webkit-scrollbar { display: none; }
.app-tabs .tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; white-space: nowrap; }
.app-tabs .tab .mk-badge { min-width: 20px; height: 20px; font-size: 11px; }
.app-panel[hidden] { display: none; }
.app-panel > .app-sec:first-child { padding-top: 28px; }
.ed { margin-top: 28px; padding: 22px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); }
.ed + .ed { margin-top: 16px; }
.ed { container-type: inline-size; }
@container (max-width: 540px) { .ed .app-form { grid-template-columns: minmax(0, 1fr); } }
.ed-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.ed-head h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.ed-head p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 46em; }
.ed-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ed-count { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ed-prefix, .field > .ed-prefix { position: relative; display: block; font-size: 1rem; font-weight: 400; color: var(--ink); }
.field legend.ed-lab { display: flex; width: 100%; margin-bottom: 6px; }
.ed-prefix i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; color: var(--ink-2); pointer-events: none; }
.ed-prefix .input { padding-left: 26px; }
.ed .input[aria-invalid="true"] { border-color: var(--closed); }
.ed-state { font-size: 13.5px; color: var(--muted); }
.ed-state.is-dirty { color: #6B5200; font-weight: 700; }
.ed-state.is-saved { color: var(--grow); font-weight: 700; }
.ed-state.is-bad { color: var(--closed); font-weight: 700; }
.ed .app-form-foot .btn { border-radius: 99px; }
.ed .seg { gap: 6px; }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: rep; }
.rep-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--rule); counter-increment: rep; }
.rep-item::before { content: counter(rep); width: 28px; height: 28px; display: grid; place-items: center; margin-top: 8px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.rep-fields { display: grid; gap: 8px; min-width: 0; }
.rep-fields.has-short { grid-template-columns: 96px minmax(0, 1fr); }
.rep-fields textarea.input { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.rep-tools { display: flex; gap: 4px; margin-top: 6px; }
.rep-tools button { width: 32px; height: 32px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--sheet); cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink-2); }
.rep-tools button:hover { border-color: var(--ink); color: var(--ink); }
.rep-add { justify-self: start; margin-top: 4px; border-radius: 99px; }
.ed-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.ed-split > .ed { margin-top: 0; }
.ed-preview { position: sticky; top: 88px; display: grid; gap: 10px; }
.ed-preview > .eyebrow { margin: 0; }
.ed-preview .job { box-shadow: none; }
.ed-preview .mk-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
.ed-preview .mk-fig:nth-child(3) { border-left: 0; }
.ed-preview .mk-titlerow { grid-template-columns: minmax(0, 1fr); }
.ed-preview .mk-spark { display: none; }
.ed-preview .interest { box-shadow: none; }
.app-panel > .ed-split { margin-top: 28px; }
@media (max-width: 1180px) { .ed-split { grid-template-columns: minmax(0, 1fr); } .ed-preview { position: static; } }
@media (max-width: 640px) { .ed { padding: 18px 16px; } .rep-item { grid-template-columns: minmax(0, 1fr); } .rep-item::before { display: none; } .rep-fields.has-short { grid-template-columns: 80px minmax(0, 1fr); } .rep-tools { justify-content: flex-end; margin-top: 0; } }
/* Job: write, then review and publish */
.jflow-steps { margin-bottom: 16px; }
.jflow .ed { margin-top: 0; }
@container (min-width: 760px) { .jflow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jflow-next { min-height: 50px; padding: 0 24px; font-size: 15px; }
.jflow-review { padding: 22px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); }
.jflow-review[hidden], .jflow .ed[hidden] { display: none; }
.flow-edit[hidden] { display: none; }
.jrev-sale { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.jrev-sale .deal-card { box-shadow: none; }
@media (max-width: 1100px) { .jrev-sale { grid-template-columns: minmax(0, 1fr); } }
.jrev-ask { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: center; }
.jrev-ask .interest { box-shadow: none; }
@media (max-width: 900px) { .jrev-ask { grid-template-columns: minmax(0, 1fr); } }
.jrev-card .job { box-shadow: none; }
.pub-bar { position: sticky; bottom: 16px; z-index: 10; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-top: 20px; padding: 18px 20px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--hivis); }
.pub-bar b { display: block; font-size: 17px; }
.pub-bar span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); max-width: 36em; }
.pub-bar .btn-row { flex: none; }
.pub-bar .btn { border-radius: 99px; }
.pub-btn { min-height: 56px; padding: 0 32px; font-size: 17px; }
@media (max-width: 640px) { .pub-bar { bottom: 10px; padding: 14px; } .pub-bar .btn-row { width: 100%; } .pub-bar .btn { flex: 1; } .pub-btn { order: -1; flex-basis: 100%; } }
/* Step bar for write-then-publish flows: big, numbered, the current step in yellow */
.app .jflow-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 16px; padding: 6px; list-style: none; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; }
.app .jflow-steps li { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px; border-radius: 12px; font-size: 16px; font-weight: 700; color: var(--muted); }
.app .jflow-steps li + li::before { content: none; }
.app .jflow-steps li b { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink-2); font-size: 15px; }
.app .jflow-steps li.is-next { background: #FFF8D1; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.app .jflow-steps li.is-next b { background: var(--ink); color: var(--hivis); }
.app .jflow-steps li.is-done { color: var(--ink); }
.app .jflow-steps li.is-done b { background: var(--money); color: #fff; }
@media (max-width: 560px) { .app .jflow-steps li { min-height: 52px; padding: 0 10px; font-size: 14px; gap: 8px; } .app .jflow-steps li b { width: 30px; height: 30px; } }
/* Sub-tabs: larger and bold; the current one ink with a hi-vis underline */
.app .app-tabs { padding: 6px; gap: 6px; border-radius: 14px; }
.app .app-tabs .tab { min-height: 46px; padding: 0 18px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.app .app-tabs .tab:hover { background: var(--paper); }
.app .app-tabs .tab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: inset 0 -4px 0 var(--hivis); }
/* Small action buttons in rows: bigger and clearer */
.app .btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-width: 2px; }
.btn .ext { width: 15px; height: 15px; }
.app .btn:not(.btn-ghost):not(.btn-hivis):not(.btn-danger):not(.btn-ai):not(:disabled):hover { box-shadow: 3px 3px 0 var(--hivis); }
/* AI helper button: its own colour so it reads as a helper, not a save */
.btn-ai { background: var(--carbon-soft); border-color: var(--carbon); color: var(--carbon); }
.btn-ai svg { width: 17px; height: 17px; }
.app .btn-ai:not(:disabled):hover { background: var(--carbon); border-color: var(--carbon); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
/* Selling start screen: estimate and what you'd receive, beside one clear call to action */
.val-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px 40px; align-items: center; padding: 24px; }
.val-rows { margin: 0; }
@media (max-width: 900px) { .val-card { grid-template-columns: minmax(0, 1fr); } }
.val-fig { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--money); font-variant-numeric: tabular-nums; }
.val-fig { margin-bottom: 18px; }
.val-form { margin: 0; }
.val-rows .val-net dt { font-weight: 700; color: var(--ink); }
.val-rows .val-net dd { font-size: 22px; color: var(--money); }
.sell-start { display: grid; justify-items: center; gap: 10px; margin-top: 24px; text-align: center; }
.sell-start p { margin: 0; font-size: 13.5px; color: var(--muted); }
.sell-go { min-width: 320px; min-height: 58px; padding: 0 36px; border-radius: 99px; font-size: 17px; box-shadow: 4px 4px 0 var(--ink); }
@media (max-width: 560px) { .sell-go { min-width: 0; width: 100%; } }
.sell-when { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; background: #E3F1E8; font-size: 13px; font-weight: 700; color: #145C37; white-space: nowrap; }
/* Listing plans: three cards to pick from */
.plan-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--sheet); border: 2px solid var(--rule); border-radius: 18px; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; }
.plan-card:hover { border-color: var(--ink-2); }
.plan-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan-card:has(input:checked) { border-color: var(--ink); box-shadow: 6px 6px 0 var(--hivis); }
.plan-card:has(input:focus-visible) { outline: 2px solid var(--carbon); outline-offset: 3px; }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-top b { font-size: 17px; }
.plan-cost b { display: block; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan-cost small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.plan-first { font-size: 13.5px; font-weight: 700; color: var(--grow); }
.plan-feats { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--rule-strong); display: grid; gap: 8px; }
.plan-feats li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.35; }
.plan-feats .app-ico { width: 32px; height: 32px; flex: none; border-radius: 8px; }
.plan-feats .app-ico svg { width: 17px; height: 17px; }
.plan-card:has(input:checked) .plan-top::after { content: "✓"; position: absolute; top: -12px; left: 18px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--hivis); font-size: 13px; font-weight: 700; }
@media (max-width: 980px) { .plan-pick { grid-template-columns: minmax(0, 1fr); } }
/* Example of a live listing (prototype): a clickable card with activity and the listing preview */
.demo-card { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: center; padding: 24px; background: var(--sage); border: 1px solid var(--sage-line); border-radius: 18px; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; }
.demo-card:hover, .demo-card:focus-visible { border-color: var(--ink); box-shadow: 6px 6px 0 var(--hivis); outline: none; }
.demo-text h3 { margin: 0 0 16px; font-size: 21px; line-height: 1.3; }
.demo-chips { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.demo-chips li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.demo-chips b { color: var(--ink); }
.demo-chips .app-ico { width: 34px; height: 34px; border-radius: 9px; }
.demo-chips .app-ico svg { width: 18px; height: 18px; }
.demo-go { min-height: 48px; padding: 0 22px; border-radius: 99px; }
.demo-card:hover .demo-go { box-shadow: 3px 3px 0 var(--hivis); }
.demo-prev { position: static; pointer-events: none; }
.demo-prev .mk-card { box-shadow: 0 10px 28px -16px rgba(19, 32, 59, 0.35); }
@media (max-width: 1100px) { .demo-card { grid-template-columns: minmax(0, 1fr); } .demo-prev { display: none; } }
/* Selling: listing status card at the top */
.sell-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; padding: 22px 24px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 18px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05), 0 10px 28px -20px rgba(19, 32, 59, 0.35); }
.sh-status { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sh-ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; font-style: normal; }
.sh-ico svg { width: 24px; height: 24px; }
.sh-status b { display: block; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.sh-status span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.sh-draft .sh-ico { background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.sh-review .sh-ico { background: #FFF3C4; color: #6B5200; }
.sh-live .sh-ico { background: #E3F1E8; color: #145C37; }
.sh-live b { color: #145C37; }
.sell-head-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }
.sell-head-act .btn { width: auto; padding: 0 26px; }
.sell-head-act .btn { min-height: 48px; border-radius: 99px; font-size: 15px; }
.sell-head-act small { flex-basis: 100%; text-align: right; font-size: 12.5px; color: var(--muted); }
.sell-progress { grid-column: 1 / -1; list-style: none; margin: 0; padding: 22px 8px 4px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; border-top: 1px solid var(--rule); }
.sell-progress li { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 8px; text-align: center; }
.sell-progress li + li::before { content: ""; position: absolute; top: 46px; right: calc(50% + 24px); left: calc(-50% + 24px); height: 3px; border-radius: 3px; background: var(--rule); }
.sell-progress li.is-done + li::before { background: var(--grow); }
.sp-here { height: 22px; font-style: normal; }
.sell-progress .is-now .sp-here { display: inline-flex; align-items: center; padding: 0 10px; border-radius: 99px; background: var(--ink); color: var(--hivis); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sell-progress i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--sheet); border: 2px solid var(--rule-strong); font-style: normal; font-size: 15px; font-weight: 700; color: var(--muted); }
.sell-progress b { margin-top: 4px; font-size: 15px; line-height: 1.25; color: var(--ink-2); white-space: nowrap; }
.sell-progress small { font-size: 13px; line-height: 1.35; color: var(--muted); white-space: nowrap; }
.sell-progress .is-done i { background: var(--grow); border-color: var(--grow); color: #fff; }
.sell-progress .is-done b { color: var(--ink); }
.sell-progress .is-done small { color: var(--grow); font-weight: 700; }
.sell-progress .is-now i { background: var(--hivis); border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 6px #FFF8D1; }
.sell-progress .is-now b { color: var(--ink); font-weight: 700; }
@media (max-width: 760px) {
  .sell-head { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .sell-head-act { justify-content: stretch; }
  .sell-head-act .btn { flex: 1 1 100%; }
  .sell-head-act small { text-align: center; }
  .sell-progress { padding-inline: 0; }
  .sell-progress li { padding: 0 2px; }
  .sell-progress i { width: 30px; height: 30px; font-size: 13px; }
  .sell-progress li + li::before { top: 42px; right: calc(50% + 18px); left: calc(-50% + 18px); }
  .sell-progress b { display: none; font-size: 12.5px; }
  .sell-progress .is-now b { display: block; }
  .sell-progress small { display: none; }
}
/* Private report: a cover, the month in numbers, how you compare, one thing to fix */
.rp-months { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
.rp-month { flex: none; min-height: 38px; padding: 0 14px; border: 1px solid #D3D8CE; border-radius: 99px; background: var(--sheet); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; }
.rp-month:hover { border-color: var(--ink); color: var(--ink); }
.rp-month[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: inset 0 -3px 0 var(--hivis); }
.rp-cover { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: center; padding: 32px; background: linear-gradient(135deg, #FFFBE3 0%, var(--sheet) 55%); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--hivis); }
.rp-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; background: var(--sheet); border: 1px solid var(--rule); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.rp-tag svg { width: 14px; height: 14px; }
.rp-month-name { margin: 18px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rp-head { margin: 0; font-size: 34px; line-height: 1.15; }
.rp-sub { margin: 14px 0 22px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.rp-sub b.up, .rp-tile small.up { color: var(--grow); }
.rp-sub b.down, .rp-tile small.down { color: var(--closed); }
.rp-cover .btn { border-radius: 99px; }
.rp-rank { display: grid; justify-items: center; gap: 12px; text-align: center; }
.rp-ring { width: 180px; height: 180px; display: grid; place-content: center; border-radius: 50%; background: conic-gradient(var(--grow) calc(var(--p) * 1%), var(--rule) 0); position: relative; }
.rp-ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--sheet); }
.rp-ring b, .rp-ring span { position: relative; }
.rp-ring b { font-size: 52px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.rp-ring span { font-size: 13px; font-weight: 700; color: var(--muted); }
.rp-rank p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.rp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rp-tile { display: grid; align-content: start; gap: 4px; padding: 18px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; }
.rp-tile span { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.rp-tile b { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rp-tile small { font-size: 13px; font-weight: 600; color: var(--muted); }
.rp-spark svg { width: 100%; height: 30px; }
.rp-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rp-cmp-card { display: grid; align-content: start; gap: 12px; padding: 20px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; text-decoration: none; color: var(--ink); }
.rp-cmp-top { display: grid; gap: 8px; justify-items: start; }
.rp-cmp-top b { font-size: 15.5px; }
.rp-cmp-figs { display: flex; gap: 24px; }
.rp-cmp-figs span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.rp-cmp-figs b { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rp-cmp-card .bm-bar { margin-top: 30px; }
.rp-cmp-add { border-style: dashed; background: #FAFAF8; }
.rp-cmp-add span { font-size: 14px; color: var(--ink-2); }
.rp-cmp-add em { font-style: normal; font-weight: 700; color: var(--carbon); }
.rp-cmp-add:hover { border-color: var(--ink); }
.rp-fix { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 24px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 20px; }
.rp-fix-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--hivis); color: var(--ink); font-style: normal; }
.rp-fix-ico svg { width: 26px; height: 26px; }
.rp-fix-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #6B5200; }
.rp-fix p { margin: 8px 0 16px; font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 38em; }
.rp-fix .btn { border-radius: 99px; }
.rp-foot { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 20px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; font-size: 14.5px; color: var(--ink-2); }
.rp-foot svg { width: 22px; height: 22px; flex: none; color: var(--ink); }
@media (max-width: 1100px) { .rp-cmp { grid-template-columns: minmax(0, 1fr); } .rp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rp-cover { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; gap: 22px; box-shadow: 5px 5px 0 var(--hivis); }
  .rp-head { font-size: 26px; }
  .rp-ring { width: 140px; height: 140px; }
  .rp-ring b { font-size: 40px; }
  .rp-fix { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .rp-fix p { font-size: 17px; }
}
/* How you compare: the group stated outright, then one row per measure with a plain sentence and a rank */
.cg { display: flex; align-items: center; gap: 22px; padding: 20px 24px; background: var(--sage); border: 1px solid var(--sage-line); color: var(--ink); border-radius: 18px; }
.cg-n { display: grid; justify-items: center; flex: none; min-width: 112px; padding: 0 16px 0 0; border-right: 1px solid var(--sage-line); color: var(--ink); }
.cg-n b { font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cg-n span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cg-text p { margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink-2); }
.cg-text p b { color: var(--ink); }
.cg-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cg-chips li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--sheet); border: 1px solid var(--sage-line); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cg-chips svg { width: 14px; height: 14px; color: var(--grow); }
.cr-list { display: grid; gap: 12px; margin-top: 12px; }
.cr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px 28px; align-items: center; padding: 22px 24px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; }
.cr-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.cr-what p { margin: 6px 0 10px; font-size: 18px; line-height: 1.4; color: var(--ink); }
.cr-figs { display: flex; align-items: flex-end; gap: 14px; }
.cr-figs span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.cr-figs b { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cr-figs em { padding-bottom: 6px; font-style: normal; font-weight: 700; color: var(--muted); }
.cr-rank p { margin: 0 0 30px; font-size: 15px; color: var(--ink-2); }
.cr-rank p b { font-size: 22px; color: var(--ink); }
.cr-bar { position: relative; height: 10px; border-radius: 99px; background: var(--rule); }
.cr-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grow); }
.cr-bad .cr-bar i { background: var(--closed); }
.cr-same .cr-bar i { background: var(--ink-2); }
.cr-bar em { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--sheet); font-style: normal; }
.cr-bar em span { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 6px; background: var(--hivis); font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 1100px) { .cr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cr-what { grid-column: 1 / -1; } }
@media (max-width: 640px) { .cg { flex-direction: column; align-items: flex-start; padding: 18px; } .cr { grid-template-columns: minmax(0, 1fr); padding: 18px; } .cr-what p { font-size: 16.5px; } }
/* Today: a daily brief, then what needs you and intel beside a side column of what changed and what's coming */
.td-brief { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: center; padding: 28px 30px; background: linear-gradient(135deg, #FFFBE3 0%, var(--sheet) 60%); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--hivis); }
.td-date { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.td-date svg { width: 16px; height: 16px; }
.td-brief h2 { margin: 8px 0 10px; font-size: 38px; line-height: 1.1; }
.td-brief p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.td-brief p b { color: var(--ink); }
.td-status { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.td-status li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--sheet); border: 1px solid var(--rule); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.td-status li svg { width: 15px; height: 15px; }
.td-status li.ok { color: #145C37; border-color: #C9D9CF; background: #F3F9F5; }
.td-status li.warn { color: #6B5200; border-color: #F0DE8A; background: #FFF8D1; }
.td-pulse { display: grid; gap: 2px; padding: 4px 0 4px 28px; border-left: 1px solid var(--rule); }
.td-pulse span { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.td-pulse b { font-size: 32px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.td-pulse small { font-size: 13px; font-weight: 700; }
.td-pulse small.up { color: var(--grow); }
.td-pulse small.down { color: var(--closed); }
.td-spark { margin: 8px 0 6px; }
.td-spark svg { width: 100%; height: 44px; }
.td-pulse .link { font-size: 14px; }
.td-group + .td-group { margin-top: 16px; }
.td-group-h { display: block; margin: 0 0 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.td-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.td-week li { display: grid; gap: 6px; padding: 14px 16px; background: var(--sheet); border: 1px solid #D3D8CE; border-top: 4px solid var(--hivis); border-radius: 14px; }
.td-week b { font-size: 14.5px; line-height: 1.35; }
.td-when { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); font-size: 13px; }
.td-when svg { width: 15px; height: 15px; }
.td-rank span b { display: block; font-size: 14px; color: var(--ink); }
.td-rank { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px; }
.td-rank > b { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(var(--grow) calc(var(--p, 94) * 1%), var(--rule) 0); font-size: 22px; position: relative; }
.td-rank > b::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--sheet); }
.td-rank > b i { position: relative; font-style: normal; }
.td-rank span { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 760px) { .td-pulse { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--rule); } .td-brief { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; box-shadow: 5px 5px 0 var(--hivis); } .td-brief h2 { font-size: 30px; } .td-brief p { font-size: 16.5px; } }
/* Intel: one panel. A featured line for the trade, then a short divided list */
.ti { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 18px; overflow: hidden; }
.ti-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.ti-top .td-rank { margin: 0; }
.ti-k { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grow); }
.ti-top p { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 44em; }
.ti-top p b { color: var(--ink); }
.ti em, .ti-list em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--carbon); white-space: nowrap; }
.ti-list { list-style: none; margin: 0; padding: 0; }
.ti-list li + li { border-top: 1px solid var(--rule); }
.ti-list a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 24px; text-decoration: none; color: var(--ink); transition: background-color 120ms ease; }
.ti-list a:hover, .ti-top:hover { background: #FAFAF8; }
.ti-top:hover { background: #FAFAF8; }
.ti-list b { display: block; font-size: 15.5px; line-height: 1.35; }
.ti-list small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ti-list small b { display: inline; font-size: inherit; color: var(--ink-2); }
@media (max-width: 640px) { .ti-top { grid-template-columns: auto minmax(0, 1fr); padding: 18px 16px; } .ti-top em { grid-column: 2; } .ti-list a { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 16px; } .ti-list em { grid-column: 2; } }
/* Data room folders */
.folder-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.folder-head b { display: block; font-size: 16px; }
.folder-head span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.folder-empty { margin: 14px 20px; padding: 14px 16px; border: 1.5px dashed var(--rule-strong); border-radius: 12px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 640px) { .folder-head { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 16px; } .folder-head .btn { grid-column: 2; justify-self: start; } }

/* Admin: step-up screen */
.stepup { max-width: 460px; margin: 24px auto 0; padding: 28px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--hivis); }
.stepup h1 { font-size: 28px; margin: 4px 0 10px; }
.stepup p { font-size: 15px; color: var(--ink-2); }
.stepup .otp { height: 60px; font-size: 28px; font-weight: 700; letter-spacing: 0.45em; text-align: center; font-variant-numeric: tabular-nums; }
.stepup .btn { width: 100%; min-height: 52px; border-radius: 99px; margin-top: 14px; }
.stepup-checks { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.stepup-checks li { display: flex; gap: 8px; }
.stepup-checks li::before { content: "✓"; flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--money); color: #fff; font-size: 11px; font-weight: 700; }
.stepup-checks li.is-next::before { content: "3"; background: var(--ink); }
@media (max-width: 560px) { .stepup { padding: 22px 18px; box-shadow: 6px 6px 0 var(--hivis); } }

/* Compare figures side by side (vetting, offers) */
.cmp-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px 0 14px; border-bottom: 1px solid var(--rule); }
.cmp-figs > div { padding: 0 14px; min-width: 0; }
.cmp-figs > div:first-child { padding-left: 0; }
.cmp-figs > div + div { border-left: 1px solid var(--rule); }
@media (max-width: 560px) { .cmp-figs { grid-template-columns: minmax(0, 1fr); padding: 0; } .cmp-figs > div { padding: 10px 0; } .cmp-figs > div + div { border-left: 0; border-top: 1px solid var(--rule); } }
.flag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flag-list { gap: 0; }
.flag-list li { padding: 9px 0 9px 28px; position: relative; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.5; }
.flag-list li:last-child { border-bottom: 0; }
.flag-list li::before { content: "!"; position: absolute; left: 0; top: 10px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #6B5200; color: #fff; font-size: 11px; font-weight: 700; }
.flag-list li.ok::before { content: "✓"; background: var(--money); }

/* Advice calls: this month first */
.adv-month { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 18px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05), 0 10px 28px -20px rgba(19, 32, 59, 0.35); overflow: hidden; }
.adv-earn { padding: 24px 26px; border-right: 1px solid var(--rule); }
.adv-earn > b { display: block; margin: 8px 0 6px; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #145C37; }
.adv-earn p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 30em; }
.adv-earn strong { color: var(--ink); }
.adv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.adv-stats > div { padding: 24px 22px; align-self: stretch; }
.adv-stats > div + div { border-left: 1px solid var(--rule); }
.adv-stats dt { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.adv-stats dd { margin: 8px 0 4px; font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.adv-stats dd i { margin-left: 4px; font-size: 20px; font-style: normal; color: #C99A00; }
.adv-stats small { font-size: 13px; color: var(--muted); }
.adv-nudge { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 26px; border-top: 1px solid var(--rule); }
.adv-nudge p { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.adv-nudge p b { color: var(--ink); }
.adv-nudge .btn { flex: none; }
@media (max-width: 760px) { .adv-month { grid-template-columns: minmax(0, 1fr); } .adv-earn { border-right: 0; border-bottom: 1px solid var(--rule); padding: 20px 18px; } .adv-earn > b { font-size: 38px; } .adv-stats > div { padding: 16px 14px; } .adv-stats dd { font-size: 22px; } .adv-nudge { flex-wrap: wrap; padding: 14px 18px; } .adv-nudge p { flex-basis: calc(100% - 50px); } }

/* Selling: offers and inquiries */
.of-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 18px 20px; }
.of-row + .of-row { border-top: 1px solid var(--rule); }
.of-who > span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.of-who p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.of-amt { text-align: right; }
.of-amt b { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #145C37; }
.of-amt small { font-size: 13px; color: var(--muted); }
.of-act { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bj { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; overflow: hidden; }
/* Number and label on one line, the detail under it: a short, quiet strip */
.bj li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 12px 16px 12px 18px; min-width: 0; }
.bj li + li { border-left: 1px solid var(--rule); }
.bj li + li::before { content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--sheet); border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); transform: rotate(45deg); }
.bj span { grid-column: 2; grid-row: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj b { grid-column: 1; grid-row: 1; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bj small { grid-column: 1 / -1; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.bj li.is-hot small { color: #6B5200; font-weight: 700; }

.of-who > b, .iq-card header b, .ab-row > div:not(.ab-read) > b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; }
.iq-card header span:not(.mk-chip):not(.iq-wait), .ab-row div > span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.iq-wait { flex: none; padding: 5px 12px; border-radius: 99px; background: #FFF3C4; color: #6B5200; font-size: 13px; font-weight: 700; }
.ab-bar { height: 6px; margin-top: 6px; border-radius: 99px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.ab-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grow); }

.iq { display: grid; gap: 14px; }
.iq-card { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 18px; padding: 18px 0; }
.iq-card.is-late { border-color: #E9C46A; }
.iq-card header { display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.iq-card header > div { flex: 1; min-width: 0; }
.iq-card.is-late .iq-wait { background: #FDE8E4; color: var(--closed); }
.iq-reply { margin: 14px 22px 0; }
.iq-reply summary { display: inline-flex; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--carbon); }
.iq-reply .field { margin: 10px 0 0; }
.iq-card footer { display: flex; gap: 10px; padding: 16px 22px 0; }

.ab-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 200px; gap: 14px; align-items: center; padding: 14px 20px; }
.ab-row + .ab-row { border-top: 1px solid var(--rule); }
.ab-read > span { font-size: 13px; color: var(--muted); }
.ab-read > span b { color: var(--ink); font-size: 15px; }

@media (max-width: 760px) {
  .bj { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bj li { padding: 10px 14px; border-top: 1px solid var(--rule); }
  .bj li:nth-child(-n+2) { border-top: 0; }
  .bj li + li { border-left: 0; }
  .bj li:nth-child(even) { border-left: 1px solid var(--rule); }
  .bj li:last-child { grid-column: 1 / -1; border-left: 0; }
  .bj li + li::before { display: none; }
  .iq-wait { margin-left: 54px; }
  .ab-row { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .of-row { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .of-amt { grid-column: 2; text-align: left; }
  .of-act { grid-column: 2; gap: 6px; }
  .of-act .btn { padding-left: 14px; padding-right: 14px; min-width: 0; }
  .ab-read { grid-column: 2; }
}

/* Listing editor: figures worked out for the owner */
.lf-auto { padding: 16px 0 0; border-top: 1px solid var(--rule); }
.lf-auto-h { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.lf-auto-h b { display: block; font-size: 15px; color: var(--ink); }
.lf-auto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lf-fig { padding: 4px 0; min-width: 0; }
.lf-fig b { display: block; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lf-fig b i { margin-left: 2px; font-size: 12px; font-style: normal; font-weight: 600; color: var(--muted); }
.lf-fig span { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.lf-fig small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 640px) { .lf-auto { padding: 14px; } .lf-auto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
/* Coming up calendar (owner and buyer Today): a calm month grid with dots, exact times beside it */
.cal { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.cal-month { padding: 22px 24px 20px; border-right: 1px solid var(--rule); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-head b { font-size: 16px; letter-spacing: -0.01em; }
.cal-head > div { display: flex; gap: 2px; }
.cal-nav { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.cal-nav svg { width: 16px; height: 16px; }
.cal-nav:hover { background: var(--paper); color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 6px; justify-items: center; }
.cal-wd { width: 34px; padding-bottom: 6px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #9AA0AE; }
.cal-day { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; background: transparent; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.cal-day.is-past { color: #B0B5C0; }
button.cal-day { cursor: pointer; font-weight: 700; color: var(--ink); }
button.cal-day:hover { background: var(--paper); }
.cal-day.is-today { background: #FFF4B8; color: var(--ink); font-weight: 700; }
.cal-day.is-picked, button.cal-day.is-picked:hover { background: var(--ink); color: #fff; }
.cal-dots { position: absolute; left: 0; right: 0; bottom: 3px; display: flex; justify-content: center; gap: 2px; }
.cal-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.cal-dot.is-call { background: var(--carbon); }
.cal-dot.is-deadline { background: var(--closed); }
.cal-day.is-picked .cal-dot { box-shadow: 0 0 0 1.5px var(--ink); background: var(--hivis); }
.cal-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.cal-list { padding: 22px 24px; min-width: 0; }
.cal-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cal-list-head span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cal-list-head small { font-size: 12.5px; color: var(--muted); }
.cal-list-head .link { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; cursor: pointer; }
.cal-date { margin: 18px 0 2px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cal-group ol { list-style: none; margin: 0; padding: 0; }
.cal-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.cal-group:first-of-type .cal-item:first-child { border-top: 0; }
.cal-time { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); padding-left: 10px; border-left: 3px solid var(--muted); }
.cal-item.is-call .cal-time { border-left-color: var(--carbon); }
.cal-item.is-deadline .cal-time { border-left-color: var(--closed); color: var(--closed); }
.cal-item b { display: block; font-size: 14.5px; line-height: 1.35; }
.cal-item small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.cal-act .btn { border-radius: 99px; }
.cal-empty { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 720px) {
  .cal { grid-template-columns: minmax(0, 1fr); }
  .cal-month { border-right: 0; border-bottom: 1px solid var(--rule); padding: 18px 16px 16px; }
  .cal-day, .cal-wd { width: 38px; }
  .cal-day { height: 38px; }
  .cal-list { padding: 18px 16px; }
  .cal-item { grid-template-columns: 84px minmax(0, 1fr); }
  .cal-act { grid-column: 2; }
}
/* [/dashboards] */

/* Home: private report preview, the same pieces as the owner's report */
.bp-top { display: flex; align-items: center; gap: 16px; }
.bp-ring { flex: none; width: 88px; height: 88px; display: grid; place-content: center; justify-items: center; border-radius: 50%; background: conic-gradient(var(--grow) calc(var(--p) * 1%), var(--rule) 0); position: relative; }
.bp-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--sheet); }
.bp-ring b, .bp-ring span { position: relative; }
.bp-ring b { font-size: 30px; line-height: 1; letter-spacing: -0.03em; }
.bp-ring span { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.bp-top p { margin: 0; font-size: 16.5px; line-height: 1.4; color: var(--ink-2); }
.bp-top p b { color: var(--ink); }
.bp-top p small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.bp-rows { display: grid; gap: 14px; margin: 18px 0 14px; }
.bp-row-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--ink); }
.bp-row-h > span:last-child { flex: none; }
.bp-row-h b { font-size: 16px; font-variant-numeric: tabular-nums; }
.bp-row-h em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.bp-bar { position: relative; height: 8px; border-radius: 99px; background: var(--rule); }
.bp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grow); }
.bp-bar em { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--sheet); font-style: normal; }
.bp-fix { margin: 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.45; color: var(--ink); }
.bp-you { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.bp-you:hover b { text-decoration: underline; text-underline-offset: 3px; }
.bp-you > span:nth-child(2) { flex: 1; min-width: 0; }
.bp-you b { display: block; font-size: 15.5px; }
.bp-you .btn { flex: none; pointer-events: none; min-height: 42px; padding: 0 18px; font-size: 15.5px; }
.own-cta .btn { min-height: 52px; padding: 0 24px; font-size: 16px; }
.bp-q { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 6px var(--rule-strong); font-size: 18px; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) { .bp-ring { width: 76px; height: 76px; } .bp-ring b { font-size: 26px; } .bp-top p { font-size: 15px; } .bp-row-h { font-size: 13.5px; } }

/* Listing pages: the trade filter uses the home page picker, sized as a filter pill */
.pick-pill { flex: 0 1 240px; max-width: none; }
.pick-pill > select[hidden] { display: none; }
.pick-pill .pick-box { height: 40px; padding: 0 4px 0 12px; gap: 6px; border: 1.5px solid var(--rule-strong); border-radius: 99px; }
.pick-pill .pick-box:hover { border-color: var(--ink-2); }
.pick-pill .pick-box input { font-size: 14px; }
.pick-pill .pick-box input::placeholder { font-weight: 600; color: var(--ink); }
.pick-pill .pick-ico { width: 15px; height: 15px; }
.pick-pill .pick-toggle { width: 32px; height: 32px; border-radius: 99px; }
.pick-pill.is-set .pick-box { border-color: var(--ink); background: var(--ink); }
.pick-pill.is-set .pick-box input, .pick-pill.is-set .pick-ico, .pick-pill.is-set .pick-toggle { color: #fff; }
.pick-pill.is-set .pick-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.pick-pill .pick-list { right: auto; width: 320px; max-width: calc(100vw - 32px); }
@media (max-width: 640px) { .mk-bar > .pick-pill { flex: 1 1 100%; } .pick-pill .pick-list { width: 100%; right: 0; } }
.pick-fixed { flex: 0 1 auto; min-width: 150px; }
.pick-fixed .pick-box { padding-left: 14px; }
.pick-fixed .pick-box input { cursor: pointer; field-sizing: content; min-width: 7ch; }
.pick-fixed .pick-list { width: 260px; }
.pick-pill.is-set .pick-box input::placeholder { color: #fff; }
@media (max-width: 640px) { .mk-bar > .pick-fixed { flex: 1 1 100%; } .pick-fixed .pick-list { width: 100%; right: 0; } }

/* ---------- Sign in / sign up ---------- */
.auth { padding: 56px 0 var(--sec-gap); }
.auth .panel { max-width: 420px; margin: 0 auto; padding: 32px 28px; }
.auth h1.page-title { font-size: 30px; margin: 0 0 8px; }
.auth .lede { font-size: 15.5px; margin: 0 0 24px; }
.auth form { display: grid; gap: 14px; }
.auth .bk-or { margin: 20px 0; }
.auth-g svg { width: 18px; height: 18px; }
.auth .gate-or { text-align: center; margin-top: 22px; }
.auth-sent[hidden], .auth-start[hidden] { display: none; }
@media (max-width: 640px) { .auth { padding-top: 32px; } .auth .panel { padding: 26px 20px; } }

/* ---------- Online businesses (spec §7.13, Phase 4b) ---------- */
.app-form .field[hidden] { display: none; }
.bp-panel .field[hidden] { display: none; }
/* What transfers: on the listing's deal card and in its review */
.deal-transfers { list-style: none; margin: 6px 0 16px; padding: 0; border-top: 1px solid var(--rule); }
.deal-transfers li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.deal-transfers i { font-style: normal; font-weight: 700; text-align: center; color: var(--grow); }
.deal-transfers b { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--grow); }
.deal-transfers .no i, .deal-transfers .no b { color: var(--muted); }
.deal-transfers .no span { color: var(--ink-2); }
/* Listing editor: one answer per item */
.lf-transfers { border: 0; padding: 0; margin: 0; min-width: 0; }
.lf-tr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
@media (max-width: 640px) { .lf-tr-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Profile publishing and review (spec §10.10): the Selling status card, four steps ---------- */
.sell-progress.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sh-back .sh-ico { background: #FDE7E4; color: #A3271B; }
.sh-back b { color: #A3271B; }
.pub-changes { grid-column: 1 / -1; list-style: none; margin: 0; padding: 4px 0 0; border-top: 1px solid var(--rule); }
.pub-changes li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.pub-changes li:last-child { border-bottom: 0; padding-bottom: 0; }
.pub-changes i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #FFF3C4; color: #6B5200; font-style: normal; }
.pub-changes i svg { width: 18px; height: 18px; }
.pub-changes .is-back i { background: #FDE7E4; color: #A3271B; }
.pub-changes b { display: block; font-size: 15.5px; }
.pub-changes span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.pub-changes .btn-row { margin: 0; flex-wrap: nowrap; }
@media (max-width: 760px) {
  .pub-changes li { grid-template-columns: 36px minmax(0, 1fr); }
  .pub-changes .btn-row { grid-column: 2; }
}

/* ---------- Seller video interview ---------- */
/* For-sale page, "Owner video Q&A" (business.html #video-qa): the data room's tiles (.dr-doc) with a 16:9 poster on top.
   The poster is the same size locked, playable, playing and switched off, so nothing moves when the player loads (hard rule 9). */
.vq-poster { position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; align-content: center; gap: 8px; margin: 0 0 12px; padding: 12px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font: inherit; text-align: center; }
button.vq-poster { cursor: pointer; }
button.vq-poster:focus-visible { border-radius: 10px; }
.vq-poster.is-locked { background: var(--sheet); color: var(--ink-2); border: 1px dashed var(--rule-strong); }
.vq-poster.is-off { background: var(--paper); color: var(--muted); }
.vq-poster > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--hivis); color: var(--ink); }
.vq-poster.is-locked > i, .vq-poster.is-off > i { background: var(--paper); color: var(--ink-2); }
.vq-poster.is-off > i { background: var(--sheet); }
.vq-poster > i svg { width: 22px; height: 22px; }
.vq-poster > span { max-width: 22em; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.vq-poster .vq-bar { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.vq-poster .vq-bar em { display: block; width: 0; height: 100%; background: var(--hivis); }

/* For-sale page, video interview (owner, 25 Oct): one stage (the owner, a big play button, what's playing, progress and what's
   next) beside the first 3 questions; the rest open with "View all". The stage keeps its size in every state (hard rule 9). */
.vq-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.vq-stage { position: relative; isolation: isolate; display: flex; flex-direction: column; align-self: start; min-height: 420px; padding: 18px; border-radius: 16px; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 15% 0%, #2B3D6B 0%, var(--ink) 55%, #0B1426 100%); }
.vq-stage::before { content: ""; position: absolute; z-index: -1; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 10, 0.22), transparent 62%); }
.vq-stage::after { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px); pointer-events: none; }
.vq-video { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B1426; opacity: 0; transition: opacity 200ms ease; }
.vq-stage.has-video .vq-video { opacity: 1; }
.vq-stage.has-video::after { background: linear-gradient(180deg, rgba(11, 20, 38, 0.6) 0%, transparent 28%, transparent 52%, rgba(11, 20, 38, 0.88) 100%); }
.vq-stage.has-video.is-playing .vq-big { opacity: 0; transition: opacity 150ms ease, box-shadow 150ms ease; }
.vq-stage.has-video.is-playing .vq-hit:hover .vq-big, .vq-stage.has-video.is-playing .vq-hit:focus-visible .vq-big { opacity: 1; }
.vq-who { display: flex; align-items: center; gap: 10px; }
.vq-who i { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--hivis); color: var(--ink); font-style: normal; font-weight: 700; font-size: 14px; }
.vq-who b { display: block; font-size: 15px; line-height: 1.2; }
.vq-who small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.vq-center { flex: 1; display: grid; place-items: center; align-content: center; gap: 14px; padding: 14px 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; }
button.vq-center { cursor: pointer; }
.vq-big { position: relative; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--hivis); color: var(--ink); font-style: normal; box-shadow: 0 14px 34px -10px rgba(255, 214, 10, 0.65); transition: box-shadow 150ms ease; }
button.vq-center:hover .vq-big { box-shadow: 0 0 0 8px rgba(255, 214, 10, 0.18), 0 14px 34px -10px rgba(255, 214, 10, 0.65); }
.vq-big svg { width: 34px; height: 34px; }
.vq-ico { display: grid; place-items: center; }
.vq-ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 214, 10, 0.55); animation: vq-pulse 2.4s ease-out infinite; }
.vq-stage.is-playing .vq-ring { animation: none; opacity: 0; }
@keyframes vq-pulse { from { transform: scale(0.85); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.vq-big.is-off { width: 64px; height: 64px; background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; }
.vq-big.is-off svg { width: 26px; height: 26px; }
.vq-center p { max-width: 24em; margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.vq-center p b { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 22px; line-height: 1.25; color: #fff; }
.vq-new { font-size: 14px; color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-underline-offset: 3px; }
.vq-new:hover { color: #fff; }
.vq-stage.is-locked .vq-center p b { font-size: 26px; margin-bottom: 6px; }
.vq-now { display: grid; gap: 7px; }
.vq-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hivis); }
.vq-title { font-family: var(--font-display); font-size: 21px; line-height: 1.25; min-height: 2.5em; }
.vq-track { display: flex; align-items: center; gap: 12px; }
.vq-track .vq-bar { position: static; flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.vq-track .vq-bar em { display: block; width: 0; height: 100%; background: var(--hivis); transition: width 1s linear; }
.vq-time { font-size: 12.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); white-space: nowrap; }
.vq-next { min-height: 1.4em; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The little equaliser: shown only while something plays (its place is kept, so nothing moves) */
.vq-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; opacity: 0; }
.vq-eq i { width: 3px; height: 4px; border-radius: 1px; background: currentColor; }
.vq-stage.is-playing .vq-k .vq-eq, .vq-item.is-playing .vq-eq { opacity: 1; }
.vq-stage.is-playing .vq-eq i, .vq-item.is-playing .vq-eq i { animation: vq-eq 0.9s ease-in-out infinite; }
.vq-eq i:nth-child(2) { animation-delay: 0.15s !important; } .vq-eq i:nth-child(3) { animation-delay: 0.3s !important; } .vq-eq i:nth-child(4) { animation-delay: 0.45s !important; }
@keyframes vq-eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }
.vq-side { display: flex; flex-direction: column; }
.vq-side h2 { margin: 4px 0 4px; font-size: 26px; line-height: 1.2; }
.vq-sum { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.vq-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vq-item { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.vq-item:hover { border-color: var(--ink-2); }
.vq-item.is-current { border-color: var(--ink); background: #FFFBE3; box-shadow: inset 4px 0 0 var(--hivis); }
.vq-item.is-idle { grid-template-columns: 30px minmax(0, 1fr); cursor: default; }
.vq-item.is-idle:hover { border-color: var(--rule); }
.vq-num { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--muted); }
.vq-item.is-current .vq-num { color: var(--ink); }
.vq-q { font-size: 15px; font-weight: 600; line-height: 1.35; }
.vq-len { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.vq-item .vq-eq { color: var(--ink); }
.vq-all { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-top: 12px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--sheet); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.vq-all:hover { background: var(--paper); }
.vq-all svg { width: 12px; height: 8px; transition: transform 150ms ease; }
.vq-all[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Sized by the room the section gets, not the window: beside the price panel the column is narrow even on a laptop */
#video-qa { container: vq / inline-size; }
@container vq (max-width: 700px) {
  .vq-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vq-stage { min-height: 360px; }
}
@media (max-width: 720px) {
  .vq-stage { min-height: 330px; padding: 16px; }
  .vq-title { font-size: 18px; }
  .vq-side h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .vq-ring, .vq-eq i { animation: none !important; }
  .vq-track .vq-bar em { transition: none; }
}

/* Phones (owner, 25 Oct): four pieces that looked off on a phone */
.iv-by em { font-style: normal; }
@media (max-width: 560px) {
  /* Leaderboard numbers: one tidy list, the label on the left and the number on the right, no empty cell */
  .lb-kpis, .lb-kpis:has(> .lb-kpi:nth-child(5)), .lb-kpis:has(> .lb-kpi:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
  .lb-kpis > .lb-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 13px 16px; border-left: 0; grid-column: auto; }
  .lb-kpis > .lb-kpi + .lb-kpi { border-top: 1px solid var(--rule); }
  .lb-kpi span { grid-column: 1; }
  .lb-kpi small { grid-column: 1; grid-row: 2; }
  .lb-kpi b { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 22px; }
  /* Stories: the initials stay beside the name; name on one line, business and date under it */
  .iv-by:not(:has(.book-btn)) { flex-wrap: nowrap; }
  .iv-by:not(:has(.book-btn)) > span:nth-child(2) { flex: 1; }
  .iv-by:not(:has(.book-btn)) b { display: block; overflow: hidden; text-overflow: ellipsis; }
  .iv-by:not(:has(.book-btn)) em { display: none; }
  /* The story's tag gets its own line, so the next line never starts with a stray dot */
  .iv-meta2 .mk-chip { margin-right: 100%; margin-bottom: 4px; }
  /* Home odds: the Popular chips are hidden on phones; the business picker above does the job */
  .pick-pop { display: none; }
}
@media (max-width: 520px) {
  /* Where would you start it: one row of five, names only */
  .where-seg { display: flex; }
  .where-seg label { flex: 1 1 auto; }
  .where-seg span { min-height: 44px; padding: 0 8px; }
  .where-seg b { font-size: 14px; white-space: nowrap; }
}
@media (max-width: 370px) {
  .where-seg { gap: 2px; }
  .where-seg span { padding: 0 4px; }
  .where-seg b { font-size: 13px; }
}
@media (max-width: 480px) {
  /* What they make by year 3: three tiles side by side, so the numbers are seen together */
  .mini-earn { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mini-earn > div { display: block; padding: 4px 6px; text-align: center; }
  .mini-earn span { font-size: 12px; }
  .mini-earn b { font-size: 17px; }
}

/* Listing pages on computers (owner, 25 Oct): a big headline, then one row (the newsletter line on the left, the email box
   and button on the right) closed by a strong rule. Phones keep the stacked card. */
@media (min-width: 901px) {
  .ph-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: stretch; }
  .ph-grid .ph-intro .eyebrow { display: none; }
  .ph-grid .ph-intro > p { margin-bottom: 0; }
  .ph-grid .ph-intro > .lede { margin-top: 14px; }
  .ph-grid h1.page-title { margin: 0; font-size: 52px; line-height: 1.05; letter-spacing: -0.025em; }
  .ph-grid > .nl-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); align-items: center; gap: 32px; padding: 0 0 26px; background: none; border: 0; border-bottom: 4px solid var(--ink); border-radius: 0; box-shadow: none; }
  .ph-grid > .nl-card .nl-card-h { margin: 0; font-size: 18px; font-weight: 500; color: var(--ink); }
  .ph-grid > .nl-card .hx-news-form .input { height: 50px; background: var(--sheet); }
  .ph-grid > .nl-card .hx-news-form .btn { min-height: 50px; padding: 0 24px; }
}

/* All guides (guide.html with no trade): one card per trade */
.gx-count { margin: 18px 0 14px; font-size: 14px; color: var(--muted); }
.gx-count b { color: var(--ink); }
.gx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gx-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid #D3D8CE; border-radius: 16px; background: var(--sheet); color: var(--ink); text-decoration: none; transition: border-color 120ms ease, box-shadow 120ms ease; }
.gx-card:hover { border-color: var(--ink); box-shadow: 0 14px 30px -22px rgba(19, 32, 59, 0.5); }
.gx-name { font-size: 19px; line-height: 1.25; }
.gx-fig { display: flex; flex-direction: column; margin-top: 8px; }
.gx-fig small { font-size: 12.5px; color: var(--muted); }
.gx-fig strong { font-size: 26px; line-height: 1.15; color: var(--money); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .gx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gx-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* For-sale page, data room (owner, 25 Oct): one section, not a tile per folder. A locked vault with the file count, what's
   inside as short labels, a three-step track and one action. Sized by the room the section gets. */
#data-room { container: dr / inline-size; }
.dr2 { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; padding: 22px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 20px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05), 0 24px 48px -30px rgba(19, 32, 59, 0.4); }
.dr2-vault { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; padding: 24px 16px; border-radius: 16px; color: #fff; text-align: center; background: radial-gradient(120% 90% at 20% 0%, #2B3D6B 0%, var(--ink) 58%, #0B1426 100%); }
.dr2-stack { position: relative; width: 104px; height: 82px; margin-bottom: 16px; }
.dr2-stack i { position: absolute; left: 0; right: 0; height: 64px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }
.dr2-stack i:nth-child(1) { top: 0; transform: scale(0.8); opacity: 0.55; }
.dr2-stack i:nth-child(2) { top: 8px; transform: scale(0.9); }
.dr2-lock { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: grid; place-items: center; border-radius: 12px; background: var(--hivis); color: var(--ink); box-shadow: 0 14px 28px -12px rgba(255, 214, 10, 0.7); }
.dr2-lock svg { width: 30px; height: 30px; }
.dr2.is-open .dr2-lock { background: #fff; color: var(--money); box-shadow: 0 14px 28px -12px rgba(255, 255, 255, 0.45); }
.dr2.is-paused .dr2-vault { filter: grayscale(1); opacity: 0.75; }
.dr2-vault b { font-family: var(--font-display); font-size: 38px; line-height: 1; }
.dr2-vault small { margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.dr2-body { display: flex; flex-direction: column; min-width: 0; padding: 4px 0; }
.dr2-body h2 { margin: 4px 0 14px; font-size: 24px; line-height: 1.2; }
.dr2-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.dr2-tags li { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--paper); border: 1px solid var(--rule); font-size: 13px; font-weight: 600; color: var(--ink); }
.dr2-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 22px; padding: 0; list-style: none; }
.dr2-track li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dr2-track li::before { content: ""; position: absolute; top: 11px; left: 32px; right: 8px; height: 2px; border-radius: 1px; background: var(--rule); }
.dr2-track li:last-child::before { display: none; }
.dr2-track li.is-done::before { background: var(--money); }
.dr2-track b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--sheet); border: 1.5px solid var(--rule-strong); font-size: 12px; color: var(--muted); }
.dr2-track li.is-next { color: var(--ink); }
.dr2-track li.is-next b { background: var(--ink); border-color: var(--ink); color: #fff; }
.dr2-track li.is-done { color: var(--ink-2); }
.dr2-track li.is-done b { background: var(--money); border-color: var(--money); color: #fff; }
.dr2-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.dr2-foot .btn { min-height: 46px; padding: 0 24px; border-radius: 99px; }
.dr2-foot .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dr2-foot span { font-size: 13.5px; color: var(--muted); }
.dr2-foot .link { font-size: 14px; font-weight: 700; }
@container dr (max-width: 560px) {
  .dr2 { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
  .dr2-vault { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 0; padding: 16px; text-align: left; }
  .dr2-stack { width: 64px; height: 52px; margin: 0; flex: none; }
  .dr2-stack i { display: none; }
  .dr2-lock { height: 52px; border-radius: 10px; }
  .dr2-tags li { height: 28px; padding: 0 10px; font-size: 12.5px; }
  .dr2-lock svg { width: 22px; height: 22px; }
  .dr2-vault b { font-size: 30px; }
  .dr2-vault small { margin: 0; }
  .dr2-body h2 { font-size: 21px; }
}

/* For-sale page, floating price card (owner, 25 Oct): the right column stretches to the page height and the card sticks
   under the header once the main price card is gone. Its space is always kept; only its visibility changes. */
.dt-grid > .dt-aside:has(> .deal-float) { align-self: stretch; align-content: start; }
.deal-float { position: sticky; top: 88px; margin-top: 20px; opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s linear 160ms; }
.deal-float.is-on { opacity: 1; visibility: visible; transition: opacity 160ms ease; }
.df-card { padding: 20px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 18px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05), 0 24px 48px -28px rgba(19, 32, 59, 0.45); }
.df-name { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.df-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 16px; }
.df-price b { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: var(--money); font-variant-numeric: tabular-nums; }
.df-card .deal-actions { margin: 0; }
@media (max-width: 1000px) { .deal-float { display: none; } }

/* Post-mortems: the heading sits above the chart; with no facts yet (under 10 post-mortems) the chart stands alone */
.pm-why:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* Phones (owner, 25 Oct): the newsletter sign-up is one row, the email box and a shorter "Subscribe →" side by side */
@media (max-width: 720px) {
  .hx-news-form, .nl-band .hx-news-form { flex-direction: row; }
  .hx-news-form .input { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 15px; }
  .hx-news-form .btn, .nl-band .hx-news-form .btn { flex: none; width: auto; padding: 0 16px; white-space: nowrap; }
  .nl-band .hx-news-form .input { height: 54px; font-size: 16px; }
  .nl-band .hx-news-form .btn { min-height: 54px; font-size: 15px; }
  .hx-news-form .nl-long { display: none; }
}

/* Phones: one Filters button beside the search box; the rest of the filters open under it */
.flt-btn { display: none; }
@media (max-width: 720px) {
  .flt-on { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; }
  .flt-on > .flt-keep { order: -2; flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }
  .flt-on > .flt-btn { order: -1; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--rule-strong); border-radius: 99px; background: var(--sheet); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
  .flt-btn svg { width: 18px; height: 18px; }
  .flt-n { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--hivis); color: var(--ink); font-size: 12px; line-height: 1; }
  .flt-n[hidden] { display: none; }
  .flt-on.is-open > .flt-btn { background: var(--ink); border-color: var(--ink); color: #fff; }
  .flt-on:not(.is-open) > :not(.flt-keep):not(.flt-btn) { display: none !important; }
  .iv-side.flt-on.is-open > :not(.flt-keep):not(.flt-btn), .rml-filters.flt-on.is-open > :not(.flt-keep):not(.flt-btn):not(.sr-only) { flex: 1 1 100%; }
  .iv-side.flt-on.is-open > :not(.flt-keep):not(.flt-btn) { margin-top: 10px; }
}

/* ---------- Businesses + owner interviews in one tab (owner, 25 Oct) ---------- */
.bz-views { display: inline-flex; gap: 4px; margin-top: 22px; padding: 5px; border-radius: 16px; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--hivis); }
.bz-views button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 11px; transition: background .15s, color .15s; min-height: 48px; }
.bz-views button svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.bz-views button b { min-width: 28px; padding: 2px 8px; border-radius: 99px; background: var(--sheet); color: var(--ink); font-size: 13px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.bz-views button:hover { background: var(--sheet); }
.bz-views button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.bz-views button[aria-pressed="true"] b { background: var(--hivis); color: var(--ink); }
.bz-views button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 560px) {
  .bz-views { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 16px; box-shadow: 3px 3px 0 var(--hivis); }
  .bz-views button { flex-direction: column; gap: 4px; padding: 10px 6px; font-size: 14px; text-align: center; min-height: 72px; justify-content: center; }
  .bz-views button b { font-size: 12px; padding: 1px 7px; }
}
.mk-chip-iv { background: var(--ink); color: var(--paper); }
.bz-ivs { margin-top: 4px; }

/* ---------- Get verified: hero, progress rail, step badges, locked steps, finish card (owner, 25 Oct) ---------- */
.gv-hero { padding: 48px 0 28px; }
.gv-hero .eyebrow::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--hivis); margin-bottom: 14px; }
.gv-title { margin: 6px 0 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; max-width: 15em; }
.gv-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; padding: 0; }
.gv-proof li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.gv-proof svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--money); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gv-proof svg.gv-ico rect, .gv-proof svg.gv-ico path { stroke: var(--money); }

.gv-rail { position: sticky; top: 65px; z-index: 30; background: rgba(236, 238, 233, 0.92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.gv-rail .wrap { position: relative; }
.gv-rail ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 12px 0 14px; counter-reset: none; }
.gv-rail a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--muted); font-size: 14.5px; font-weight: 600; min-height: 36px; border-radius: 10px; }
.gv-rail a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.gv-rail i { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; font-style: normal; font-size: 14px; font-weight: 700; border: 1.5px solid var(--rule-strong); background: var(--paper); color: var(--muted); transition: background .2s, color .2s, border-color .2s; }
.gv-rail li.is-cur a { color: var(--ink); }
.gv-rail li.is-cur i { border-color: var(--ink); background: var(--hivis); color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.28); }
.gv-rail li.is-done a { color: var(--ink); }
.gv-rail li.is-done i { border-color: var(--money); background: var(--money); color: transparent; position: relative; }
.gv-rail li.is-done i::after { content: ""; position: absolute; width: 10px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.gv-rail li.is-locked a { opacity: .6; }
.gv-rail-bar { position: absolute; left: 24px; right: 24px; bottom: -1px; height: 3px; border-radius: 3px; overflow: hidden; }
.gv-rail-bar b { display: block; height: 100%; background: var(--money); transform-origin: left; transform: scaleX(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }

#main .gv-kicker::before { content: none; }
.gv-kicker { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.gv-kicker i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-style: normal; font-size: 16px; letter-spacing: 0; background: var(--ink); color: var(--hivis); transition: background .2s; }
.gv-kicker.is-done i { background: var(--money); color: transparent; position: relative; }
.gv-kicker.is-done i::after { content: ""; position: absolute; width: 12px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); }
.gv-lockchip { display: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--paper); border: 1px solid var(--rule-strong); font-style: normal; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.gv-lockchip svg { width: 14px; height: 14px; }
.gv-is-locked .gv-lockchip { display: inline-flex; }
.gv-is-locked .gv-kicker i { background: var(--rule-strong); color: var(--paper); }
.gv-is-locked #providers, .gv-is-locked .grid-2 > div, .gv-is-locked #connect-consent { opacity: .5; filter: saturate(.4); transition: opacity .3s, filter .3s; }
.gv-is-locked .grid-2 > div .gv-kicker { opacity: 1; }
#connect-first { display: none; }
#profile, #connect, #step3 { scroll-margin-top: 140px; }
#step4 { scroll-margin-top: 140px; }

.gv-unlock { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 0; max-width: 44em; padding: 14px 18px; border-radius: 14px; background: var(--ink); color: rgba(255, 255, 255, 0.86); font-size: 15px; line-height: 1.55; }
.gv-unlock b { color: #fff; }
.gv-unlock svg { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: var(--hivis); }

.gv-finish { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: 36px; border-radius: 22px; background: var(--ink); color: #fff; box-shadow: 8px 8px 0 var(--hivis); }
.gv-finish h2 { color: #fff; margin: 0 0 10px; }
.gv-finish p { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 16px; line-height: 1.6; max-width: 30em; }
.gv-kicker-dark { color: rgba(255, 255, 255, 0.6); }
.gv-kicker-dark i { background: var(--hivis); color: var(--ink); }
.gv-finish-side { display: grid; gap: 14px; }
.gv-done { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gv-done li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.gv-done li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); box-sizing: border-box; transition: background .2s, border-color .2s; }
.gv-done li.is-done { color: #fff; }
.gv-done li.is-done::before { border-color: var(--money); background: var(--money) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.gv-go { justify-content: center; min-height: 54px; font-size: 16px; }
#step4 #go-wait { color: rgba(255, 255, 255, 0.6); margin: 0; }
.gv-is-ready .gv-go { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.6); animation: gv-pulse 2.2s ease-out 2; }
@keyframes gv-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.55); } 100% { box-shadow: 0 0 0 16px rgba(255, 214, 10, 0); } }
@media (prefers-reduced-motion: reduce) { .gv-is-ready .gv-go { animation: none; } .gv-rail-bar b, .gv-kicker i, .gv-rail i { transition: none; } }

@media (max-width: 720px) {
  .gv-hero { padding: 32px 0 20px; }
  .gv-proof { display: grid; gap: 8px; }
  .gv-rail ol { gap: 4px; padding: 10px 0 12px; }
  .gv-rail a { flex-direction: column; gap: 4px; font-size: 11.5px; text-align: center; line-height: 1.2; }
  .gv-rail i { width: 28px; height: 28px; font-size: 13px; }
  .gv-finish { grid-template-columns: 1fr; padding: 24px; gap: 22px; box-shadow: 5px 5px 0 var(--hivis); }
  #profile, #connect, #step3, #step4 { scroll-margin-top: 150px; }
}
@media (max-width: 640px) { .gv-rail-bar { left: 16px; right: 16px; } }
@media (max-width: 380px) { .gv-rail span { font-size: 10.5px; } }

/* ---------- Lock wall: two equal ways in (owner, 25 Oct) ---------- */
.gate-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; margin: 4px auto 0; text-align: left; }
.gate-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule-strong); }
.gate-choice-k { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gate-choice h3 { margin: 0; font-size: 19px; }
.gate-choice p { margin: 0 0 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; flex: 1; }
.gate-choice .gate-cta { width: 100%; justify-content: center; min-height: 48px; padding: 0 18px; font-size: 15px; }
.gate-choice small { font-size: 13px; color: var(--muted); }
.gate-choice small b { color: var(--ink); }
.gate-dialog .gate-choices { grid-template-columns: 1fr; gap: 10px; }
.gate-dialog .gate-choice { padding: 16px; }
@media (max-width: 620px) { .gate-choices { grid-template-columns: 1fr; } }

/* ---------- Profile guide head and the founder's story (owner, 27 Oct) ---------- */
.gd-tag { display: flex; align-items: center; width: max-content; height: 24px; padding: 0 9px; margin: 0 0 10px; border-radius: 7px; background: var(--ink); color: var(--hivis); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.fs-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fs-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); overflow: hidden; }
.fs-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--fs, var(--ink)); }
.fs-charged { --fs: var(--money); } .fs-first { --fs: var(--carbon); } .fs-broke { --fs: var(--closed); } .fs-clicked { --fs: var(--hivis); }
.fs-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--paper); color: var(--ink); }
.fs-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fs-broke .fs-ico { background: #FBE4DF; color: #7F2618; } .fs-clicked .fs-ico { background: #FFF6CC; color: #6B5300; } .fs-charged .fs-ico { background: #E3F1E8; color: #145C37; } .fs-first .fs-ico { background: var(--carbon-soft); color: var(--carbon); }
.fs-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fs-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
@media (max-width: 560px) { .fs-grid { grid-template-columns: minmax(0, 1fr); } .gd-tag { height: 22px; font-size: 11px; } }

/* ---------- Tools section and tool modal (owner, 26–27 Oct) ---------- */
.tl-sum { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0 0 16px; }
.tl-sum > div { padding: 0 20px; }
.tl-sum > div:first-child { padding-left: 0; }
.tl-sum > div + div { border-left: 1px solid var(--rule); }
.tl-sum dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tl-sum dd { margin: 2px 0 0; font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-card { appearance: none; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; text-align: left; font: inherit; color: var(--ink); background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 14px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tl-card:hover { border-color: var(--ink); box-shadow: 0 12px 26px -20px rgba(19, 32, 59, 0.65); }
.tl-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tl-top { display: flex; align-items: center; gap: 12px; }
.tl-logo { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 11px; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.tl-logo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tl-c0 { background: #3140C2; } .tl-c1 { background: #1E6B52; } .tl-c2 { background: #13203B; } .tl-c3 { background: #A25B12; } .tl-c4 { background: #7A2E8E; }
.tl-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tl-id b { font-size: 16.5px; line-height: 1.25; }
.tl-id small { font-size: 13px; color: var(--muted); }
.tl-cost { flex: none; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tl-why { font-size: 15px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.tl-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding-top: 12px; border-top: 1px dashed var(--rule-strong); }
.tl-stars { display: inline-flex; gap: 2px; }
.tl-stars i { width: 14px; height: 14px; background: #D9DDD5; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.tl-stars i.on { background: #E8A400; }
.tl-score { font-size: 13px; font-weight: 700; color: var(--ink); }
.tl-rec { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.rec-yes { background: #E3F1E8; color: #145C37; } .rec-maybe { background: #FFF2C7; color: #6B5300; } .rec-no { background: #FBE4DF; color: #7F2618; }
.tl-more { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--carbon); }
.tl-more::after { content: " →"; }
.tl-dialog { width: min(720px, calc(100vw - 24px)); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: 22px; color: var(--ink); box-shadow: 0 40px 90px -30px rgba(19, 32, 59, 0.55); overflow: hidden; }
.tl-dialog::backdrop { background: rgba(19, 32, 59, 0.5); }
.tl-d { display: flex; flex-direction: column; max-height: min(88vh, 900px); }
.tl-d-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--rule); }
.tl-d-head .tl-logo { width: 52px; height: 52px; font-size: 18px; border-radius: 14px; }
.tl-d-head > div { flex: 1; min-width: 0; }
.tl-d-head h2 { margin: 0; font-family: var(--font-body); font-size: 22px; letter-spacing: -0.02em; }
.tl-d-head p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.tl-d-body { overflow-y: auto; padding: 18px 22px 8px; }
.tl-what { margin: 0 0 14px; font-size: 16px; color: var(--ink-2); }
.tl-d-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.tl-d-facts > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.tl-d-facts span:first-child { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tl-d-facts b { font-size: 15px; }
.tl-d-sec { padding: 18px 0; border-top: 1px solid var(--rule); }
.tl-d-sec:first-of-type { border-top: 0; }
.tl-d-sec h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-family: var(--font-body); font-size: 16px; letter-spacing: -0.01em; }
.tl-d-sec > p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.tl-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-pc > div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule); }
.tl-pc h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.tl-pc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.tl-pc li { position: relative; padding-left: 22px; }
.tl-pros li::before, .tl-cons li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.tl-pros li::before { content: "✓"; color: var(--money); } .tl-cons li::before { content: "✕"; color: var(--closed); }
.tl-qa { margin: 0; display: grid; gap: 12px; }
.tl-qa dt { font-size: 14px; font-weight: 700; color: var(--ink); }
.tl-qa dd { margin: 4px 0 0; padding-left: 12px; border-left: 3px solid var(--hivis); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.tl-price { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tl-price th, .tl-price td { padding: 9px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.tl-price th { font-weight: 700; width: 28%; } .tl-price td:last-child { color: var(--muted); }
.tl-note { font-size: 13px !important; color: var(--muted); margin: 8px 0 0 !important; }
.tl-users { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.tl-users li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #EEF0EC; font-size: 15px; }
.tl-users a { color: var(--ink); font-weight: 600; text-decoration: none; } .tl-users a:hover { text-decoration: underline; }
.tl-users small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.tl-alts { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-alts > span { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; border: 1px solid var(--rule); }
.tl-alts .tl-logo { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
.tl-alts small { color: var(--muted); font-size: 12.5px; }
.tl-d-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 22px 16px; border-top: 1px solid var(--rule); background: var(--paper); }
.tl-d-foot p { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  .tl-grid, .tl-pc { grid-template-columns: minmax(0, 1fr); }
  .tl-d-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .tl-d { max-height: 92vh; }
  .tl-d-foot .btn { flex: 1; justify-content: center; }
}

/* Tools editor in the owner dashboard */
.tlx-search { position: relative; }
.tlx-search > label span { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.tlx-sug { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% - 2px); list-style: none; margin: 0; padding: 6px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 0 18px 40px -20px rgba(19, 32, 59, 0.5); }
.tlx-sug li { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.tlx-sug li:hover { background: var(--paper); }
.tlx-sug b { font-size: 15px; } .tlx-sug small { font-size: 12.5px; color: var(--muted); }
.tlx-sug li[data-new] { border-top: 1px solid var(--rule); margin-top: 4px; }
.tlx-stars { display: inline-flex; gap: 2px; }
.tlx-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tlx-stars label span[aria-hidden] { font-size: 28px; line-height: 1; color: #D3D7D0; cursor: pointer; }
.tlx-stars:has(input[value="1"]:checked) label:nth-child(-n+1) span[aria-hidden] { color: #E8A400; }
.tlx-stars:has(input[value="2"]:checked) label:nth-child(-n+2) span[aria-hidden] { color: #E8A400; }
.tlx-stars:has(input[value="3"]:checked) label:nth-child(-n+3) span[aria-hidden] { color: #E8A400; }
.tlx-stars:has(input[value="4"]:checked) label:nth-child(-n+4) span[aria-hidden] { color: #E8A400; }
.tlx-stars:has(input[value="5"]:checked) label:nth-child(-n+5) span[aria-hidden] { color: #E8A400; }
.tlx-stars input:focus-visible + span { outline: 2px solid var(--ink); border-radius: 4px; }
.tlx-ai { padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--carbon); background: #F6F7FE; }
.tlx-ai-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.tlx-ai-head .btn { margin-left: auto; }

/* ---------- Booking page: one link for booking, video and payment (owner, 26 Oct) ---------- */
.bp { padding-top: 40px; padding-bottom: var(--sec-gap); }
.bp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px; border-radius: 24px; background: var(--ink); color: #fff; box-shadow: 8px 8px 0 var(--hivis); }
.bp-av { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 28px; background: var(--hivis); color: var(--ink); font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.bp-head .eyebrow { color: rgba(255, 255, 255, 0.6); }
.bp-head h1 { margin: 4px 0 2px; color: #fff; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; }
.bp-biz { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 16px; }
.bp-proof { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 12px 6px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); font-size: 14px; color: #fff; }
.bp-proof svg { width: 18px; height: 18px; flex: none; fill: var(--money); stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bp-proof b { color: var(--hivis); }
.bp-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.bp-rate b { color: #fff; }
.bp-links { display: flex; flex-direction: column; gap: 8px; }
.bp-links .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); justify-content: center; gap: 8px; }
.bp-links .btn:hover { background: #fff; color: var(--ink); }
.bp-share svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 40px; }
.bp-h { margin: 0 0 14px; font-size: 26px; }
.bp-opts { display: grid; gap: 10px; }
.bp-opt { position: relative; display: grid; gap: 4px; padding: 16px 18px 16px 52px; border-radius: 16px; background: var(--sheet); border: 1.5px solid #D3D8CE; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.bp-opt input { position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.bp-opt.is-on { border-color: var(--ink); box-shadow: 4px 4px 0 var(--hivis); }
.bp-opt:hover { border-color: var(--ink-2); }
.bp-opt-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.bp-opt-top b { font-size: 18px; }
.bp-opt-top em { font-style: normal; font-size: 16px; font-weight: 700; color: var(--money); white-space: nowrap; }
.bp-opt-tag { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.bp-opt-sub { font-size: 15px; color: var(--ink-2); }
.bp-seats { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.bp-seats i { position: relative; flex: 0 0 120px; height: 6px; border-radius: 3px; background: #E3E6E0; overflow: hidden; }
.bp-seats i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--carbon); border-radius: 3px; }
.bp-seats small { font-size: 13px; color: var(--ink-2); }
.bp-save { justify-self: start; margin-top: 4px; padding: 3px 9px; border-radius: 99px; background: #E3F1E8; color: #145C37; font-size: 12.5px; font-weight: 700; }
.bp-gets { margin-top: 26px; padding: 20px 22px; border-radius: 16px; background: var(--sheet); border: 1px solid #D3D8CE; }
.bp-gets h3 { margin: 0 0 12px; font-size: 17px; font-family: var(--font-body); }
.bp-topics { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.bp-topics em { font-style: normal; padding: 3px 10px; border-radius: 99px; background: var(--paper); color: var(--ink); font-weight: 600; }
.bp-how { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: bp; }
.bp-how li { counter-increment: bp; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; border: 1px dashed var(--rule-strong); font-size: 14px; color: var(--ink-2); }
.bp-how li::before { content: counter(bp); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--hivis); font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.bp-how b { color: var(--ink); font-size: 15px; }
.bp-revs { margin-top: 26px; display: grid; gap: 10px; }
.bp-revs h3 { margin: 0; font-size: 17px; font-family: var(--font-body); }
.bp-revs figure { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--sheet); border: 1px solid #D3D8CE; }
.bp-revs blockquote { margin: 0; font-size: 15px; line-height: 1.55; }
.bp-revs figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.bp-revs figcaption span { color: #E8A400; letter-spacing: 1px; }
.bp-side { position: sticky; top: 90px; }
.bp-panel { padding: 22px; border-radius: 20px; background: var(--sheet); border: 2px solid var(--ink); box-shadow: 0 30px 60px -40px rgba(19, 32, 59, 0.6); }
.bp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bp-steps > li + li { padding-top: 18px; border-top: 1px solid var(--rule); }
.bp-steps h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--font-body); font-size: 17px; }
.bp-steps h3 i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--hivis); font-style: normal; font-size: 13px; }
.bp-sub { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
.bp-sub:first-child { margin-top: 2px; }
.bp-sub small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.bp-durs label, .bp-times label, .bp-days label { position: relative; cursor: pointer; }
.bp-durs input, .bp-times input, .bp-days input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bp-durs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bp-durs span { display: flex; flex-direction: column; align-items: center; gap: 0; justify-content: center; padding: 7px 4px; border-radius: 12px; border: 1.5px solid #DCDFD8; background: var(--sheet); text-align: center; }
.bp-durs small { display: inline-block; margin-bottom: 2px; padding: 1px 8px; border-radius: 99px; background: #E4E7FA; color: #2B36A8; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.bp-durs input:checked + span small { background: var(--ink); color: var(--hivis); }
.bp-durs b { font-size: 15.5px; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }
.bp-durs em, .bp-durs i { font-style: normal; font-size: 10.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.bp-durs em { color: #145C37; font-weight: 700; }
.bp-dayrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 8px; }
.bp-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #E6E8E3; color: var(--ink); cursor: pointer; }
.bp-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bp-arrow:disabled { opacity: .35; cursor: default; }
.bp-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bp-days span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border-radius: 12px; border: 1.5px solid #DCDFD8; background: var(--sheet); font-size: 13.5px; color: var(--ink-2); }
.bp-days b { font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.bp-days b u { text-decoration: none; }
.bp-days .is-none span { opacity: .45; text-decoration: line-through; }
.bp-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bp-times span { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 10px; border: 1.5px solid #DCDFD8; background: var(--sheet); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bp-durs input:checked + span, .bp-days input:checked + span, .bp-times input:checked + span { border: 2px solid var(--ink); background: #FFF8D6; color: var(--ink); }
.bp-durs label:hover span, .bp-days label:not(.is-none):hover span, .bp-times label:hover span { border-color: var(--ink); }
.bp-durs input:focus-visible + span, .bp-days input:focus-visible + span, .bp-times input:focus-visible + span { outline: 2px solid var(--carbon); outline-offset: 2px; }
@media (max-width: 520px) { .bp-durs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bp-times { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bp-days { gap: 5px; } .bp-days b { font-size: 13px; line-height: 1.2; text-align: center; } .bp-days b u { display: block; } .bp-dayrow { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 5px; } .bp-arrow { width: 28px; height: 28px; } }
.bp-fine { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.bp-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bp-dates li { display: grid; grid-template-columns: 6.5em 1fr; align-items: baseline; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.bp-dates span { grid-row: span 2; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.bp-dates b { font-size: 15px; } .bp-dates small { font-size: 13px; color: var(--ink-2); }
.bp-fixed { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #FFF6CC; font-size: 14px; color: #5A4500; }
.bp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bp-wa { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; cursor: pointer; }
.bp-wa input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--money); flex: none; }
.bp-wa span { display: flex; flex-direction: column; font-size: 14.5px; }
.bp-wa small { font-size: 13px; color: var(--muted); }
.bp-pay { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--ink); }
.bp-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: 14px; color: var(--ink-2); }
.bp-total b { font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bp-cta { width: 100%; justify-content: center; min-height: 54px; font-size: 16px; }
.bp-cta[disabled] { opacity: .5; cursor: not-allowed; }
.bp-done { text-align: center; }
.bp-tick { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--money); box-shadow: 0 0 0 8px #E3F1E8; }
.bp-tick svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bp-done h2 { margin: 18px 0 6px; font-size: 26px; }
.bp-done > p { margin: 0 0 16px; color: var(--ink-2); }
.bp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; text-align: left; }
.bp-facts > div { padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.bp-facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.bp-facts dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; }
.bp-join { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: var(--ink); color: #fff; text-decoration: none; text-align: left; }
.bp-join span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.bp-join b { font-size: 17px; color: var(--hivis); word-break: break-all; }
.bp-join small { color: rgba(255, 255, 255, 0.7); }
.bp-cal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.bp-cal .btn { justify-content: center; }
.bp-sent { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.bp-sent li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.bp-sent b { color: var(--ink); }
.bp-sent i { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--paper); }
.bp-sent i.wa { background: #DCF8E6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5a8.5 8.5 0 00-7.3 12.8L3.5 20.5l4.3-1.1A8.5 8.5 0 1012 3.5z' fill='none' stroke='%231B8C4A' stroke-width='1.8'/%3E%3C/svg%3E") center / 16px no-repeat; }
.bp-sent i.mail { background: var(--carbon-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2' fill='none' stroke='%233140C2' stroke-width='1.8'/%3E%3Cpath d='M4 7l8 6 8-6' fill='none' stroke='%233140C2' stroke-width='1.8'/%3E%3C/svg%3E") center / 16px no-repeat; }
.bp-sent i.ai { background: #FFF6CC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5l1.6 4.6 4.6 1.6-4.6 1.6L10 15l-1.6-4.7L3.8 8.7l4.6-1.6z' fill='%236B5300'/%3E%3C/svg%3E") center / 15px no-repeat; }
.bp-after { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; }
.bp-after a { color: var(--carbon); font-weight: 600; }
.bp-off { max-width: 560px; margin: 40px auto; text-align: center; display: grid; justify-items: center; gap: 14px; }
.bp-off h1 { margin: 0; font-size: 32px; }
@media (max-width: 960px) { .bp-grid { grid-template-columns: minmax(0, 1fr); } .bp-side { position: static; } }
@media (max-width: 720px) {
  .bp { padding-top: 20px; }
  .bp-head { grid-template-columns: auto minmax(0, 1fr); padding: 20px; gap: 16px; box-shadow: 5px 5px 0 var(--hivis); }
  .bp-av { width: 64px; height: 64px; border-radius: 18px; font-size: 24px; align-self: start; }
  .bp-links { grid-column: 1 / -1; flex-direction: row; } .bp-links .btn { flex: 1; }
  .bp-how { grid-template-columns: minmax(0, 1fr); }
  .bp-two, .bp-cal, .bp-facts { grid-template-columns: minmax(0, 1fr); }
  .bp-panel { padding: 18px; }
}

/* Advice: ways to learn on the profile, floating advice/Ask box (owner, 26–27 Oct) */
.adv-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.adv-way { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--sheet); border: 1.5px solid #D3D8CE; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.adv-way:hover { border-color: var(--ink); box-shadow: 4px 4px 0 var(--hivis); }
.adv-way b { font-size: 16px; } .adv-way span { font-size: 13.5px; color: var(--ink-2); flex: 1; } .adv-way em { font-style: normal; font-weight: 700; color: var(--money); }
.adv-link { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-2); }
.bk-more { display: block; margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--carbon); text-decoration: none; }
.bk-more:hover { text-decoration: underline; }
.af-who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.af-who i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--hivis); font-style: normal; font-weight: 700; }
.af-who b { display: block; font-size: 16px; } .af-who small { color: var(--muted); font-size: 13px; }
.af-ways { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
.af-ways a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 14px; }
.af-ways a:hover { background: #E3E6E0; } .af-ways b { color: var(--money); }
.af-acts .btn { width: 100%; justify-content: center; }
.af-ask { display: block; margin: 6px 0 14px; font-size: 17px; line-height: 1.3; }
.dt-grid > .dt-aside:has(> #adv-float) { align-self: stretch; align-content: start; }

.bl-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: 6px 6px 0 var(--hivis); }
.bl-card .eyebrow { color: rgba(255, 255, 255, 0.6); }
.bl-card b { display: block; margin: 4px 0; font-size: 20px; color: var(--hivis); word-break: break-all; }
.bl-card p { margin: 0; max-width: 36em; color: rgba(255, 255, 255, 0.78); font-size: 14.5px; }
.bl-card .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.rec-row { padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.rec-row:last-child { border-bottom: 0; }
.rec-row > div { display: flex; gap: 10px; align-items: baseline; } .rec-row > div span { font-size: 13px; color: var(--muted); }
.rec-row p { margin: 6px 0; font-size: 14.5px; } .rec-row ul { margin: 0 0 6px; padding-left: 20px; font-size: 14px; color: var(--ink-2); }

/* ---------- Home hero v4 (owner, 27 Oct): a receipt deck that prints one verified business after another ---------- */
.rx { position: relative; width: min(370px, 100%); margin-inline: auto; }
.rx .till { z-index: 2; }
.rx-ghost { position: absolute; z-index: 1; top: 70px; width: 210px; padding: 16px 16px 18px; background: var(--sheet); border-radius: 4px; box-shadow: 0 18px 30px -18px rgba(19, 32, 59, 0.45); font-size: 12px; line-height: 1.5; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; transition: opacity .4s; }
.rx-ghost b { font-size: 13px; color: var(--ink); letter-spacing: .02em; }
.rx-ghost em { font-style: normal; margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rx-ghost i { font-style: normal; align-self: flex-start; font-size: 18px; font-weight: 700; color: var(--ink); padding: 0 3px; }
.rx-ghost small { margin-top: 6px; font-size: 11px; color: var(--muted); }
.rx-g1 { left: -96px; top: 300px; transform: rotate(-7deg); }
.rx-g2 { right: -96px; top: 120px; transform: rotate(6deg); align-items: flex-end; text-align: right; }
.rx-g2 i { align-self: flex-end; }
.rx-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; position: relative; z-index: 3; }
.rx-dots button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 99px; background: var(--sheet); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.rx-dots button i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); }
.rx-dots button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.rx-dots button[aria-pressed="true"] i { background: var(--money); box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.18); }
.rx-dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rx .receipt { min-height: 470px; }
.till.reprint .receipt { animation: till-feed 1.6s steps(20, end) both; }
.till.reprint .stamp { animation: stamp-down 0.28s cubic-bezier(0.2, 1.4, 0.4, 1) 1.7s both; }
.hx-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 26px 0 0; max-width: 560px; border-top: 1px solid var(--rule); }
.hx-proof > div { padding: 14px 16px 0 0; }
.hx-proof > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.hx-proof dt { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hx-proof dd { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
@media (max-width: 1100px) { .rx-g2 { right: -60px; } }
@media (max-width: 900px) { .rx-g1 { left: -40px; } .rx-g2 { right: -40px; } }
@media (max-width: 560px) { .rx-ghost { display: none; } .hx-proof dt { font-size: 24px; } .hx-proof > div { padding-right: 10px; } .hx-proof > div + div { padding-left: 10px; } }
@media (prefers-reduced-motion: reduce) { .till.reprint .receipt, .till.reprint .stamp { animation: none; } }

/* ---------- One trade, every page: cross-links (owner, 27 Oct) ---------- */
.tx { margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--rule); }
.tx > h2::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--hivis); margin-bottom: 14px; }
.tx h2 { margin: 0 0 4px; font-size: 24px; }
.tx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .tx-steps { grid-template-columns: minmax(0, 1fr); } .tx h2 { font-size: 21px; } }


/* ---------- Request an interview (owner, 27 Oct) ---------- */
.ri { padding: 48px 0 var(--sec-gap); }
.ri-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: start; }
.ri-intro .page-title { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; margin: 8px 0 16px; }
.ri-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: ri; }
.ri-steps li { counter-increment: ri; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--sheet); border: 1px solid #D3D8CE; }
.ri-steps li::before { content: counter(ri); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--hivis); font-weight: 700; }
.ri-steps b { font-size: 16px; } .ri-steps span { font-size: 14px; color: var(--ink-2); }
.ri-note { margin: 18px 0 0; font-size: 15px; }
.ri-form { position: sticky; top: 90px; display: grid; gap: 14px; padding: 26px; border-radius: 20px; background: var(--sheet); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--hivis); }
.ri-form h2 { margin: 0 0 4px; font-size: 24px; }
.ri-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ri-form textarea.input { min-height: 112px; }
.ri-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.ri-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--money); flex: none; }
.ri-check input[aria-invalid] { outline: 2px solid var(--closed); outline-offset: 2px; }
.ri-cta { width: 100%; justify-content: center; min-height: 52px; }
.ri-fine { margin: 0; font-size: 13px; color: var(--muted); }
.ri-done { text-align: center; justify-items: center; }
.ri-form[hidden] { display: none; }
/* Sponsor booking: the booking and the ad inside the card, with dividers, not boxes */
.sb-rows { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sb-rows .app-row { padding-left: 0; padding-right: 0; }
.sb-ad { margin-top: 16px; }
@media (max-width: 900px) { .ri-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .ri-form { position: static; } }
@media (max-width: 560px) { .ri { padding-top: 28px; } .ri-two { grid-template-columns: 1fr; } .ri-form { padding: 18px; box-shadow: 5px 5px 0 var(--hivis); } }

.mk-chip-app { background: #E3F1E8; color: #145C37; text-decoration: none; }
.job-tags .job-app { background: #E3F1E8; color: #145C37; font-weight: 700; }

.job-learn { padding: 0; }
.job-learn ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.job-learn li { display: flex; gap: 8px; align-items: flex-start; }
.job-learn li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--money); }

/* ---------- Refunds (owner, 27 Oct) ---------- */
.rf { margin-top: 32px; padding: 24px; border-radius: 18px; background: var(--sheet); border: 1px solid #D3D8CE; }
.rf-head h2 { margin: 6px 0 16px; font-size: 24px; }
.rf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
.rf-grid > div { padding: 2px 18px; }
.rf-grid > div:first-child { padding-left: 0; }
.rf-grid > div + div { border-left: 1px solid var(--rule); }
.rf-grid dt { font-weight: 700; font-size: 15px; } .rf-grid dd { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.rf-list { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.rf-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px; border-radius: 12px; background: var(--paper); font-size: 14px; cursor: pointer; }
.rf-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.gate-cta[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) { .rf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .rf-grid > div:nth-child(odd) { border-left: 0; padding-left: 0; } .rf-grid > div:nth-child(n + 3) { border-top: 1px solid var(--rule); padding-top: 14px; } }
@media (max-width: 560px) { .rf-grid { grid-template-columns: minmax(0, 1fr); } .rf-grid > div, .rf-grid > div + div { border-left: 0; padding: 0; } .rf-grid > div + div { border-top: 1px solid var(--rule); padding-top: 14px; } .rf { padding: 18px; } }

.rfx-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-radius: 16px; background: #FFF6CC; border: 1.5px solid var(--ink); }
.rfx-card b { display: block; margin: 4px 0; font-size: 18px; word-break: break-all; } .rfx-card p { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 40em; }

/* ---------- The founder's story as a course (owner, 27 Oct) ---------- */
.fc-list { margin: 14px 0 0; }
button.next-step { appearance: none; width: 100%; font: inherit; text-align: left; cursor: pointer; }
.next-step i svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fc-row small { font-size: 14px; }
.next-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fc-dlg { width: min(980px, calc(100vw - 24px)); height: min(88vh, 860px); padding: 0; border: 0; border-radius: 24px; color: var(--ink); box-shadow: 0 40px 100px -30px rgba(19, 32, 59, 0.6); overflow: hidden; }
.fc-dlg::backdrop { background: rgba(19, 32, 59, 0.55); }
.fc-d { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100%; }
.fc-nav { padding: 22px 16px; background: var(--paper); color: var(--ink); border-right: 1px solid var(--rule); overflow-y: auto; }
.fc-nav-h { display: block; margin: 0 0 14px 6px; font-size: 13px; color: var(--muted); }
.fc-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fc-nav button { appearance: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.fc-nav button:hover { background: rgba(19, 32, 59, 0.05); }
.fc-nav button[aria-current] { background: var(--sheet); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--ink); }
.fc-nav i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(19, 32, 59, 0.08); font-style: normal; font-size: 13px; font-weight: 700; }
.fc-nav button[aria-current] i { background: var(--ink); color: var(--hivis); }
.fc-nav button.is-done:not([aria-current]) i { background: rgba(19, 32, 59, 0.2); }
.fc-main { overflow-y: auto; padding: 22px 34px 0; }
.fc-d-head { display: flex; align-items: center; justify-content: space-between; }
.fc-d-k { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fc-main h2 { margin: 6px 0 14px; font-size: 30px; }
.fc-big { margin: 0 0 8px; padding: 20px 22px; border-radius: 18px; background: var(--paper); font-family: var(--font-display); font-size: 22px; line-height: 1.4; font-weight: 600; }
.fc-big cite { display: block; margin-top: 10px; font-family: var(--font-body); font-style: normal; font-size: 13.5px; font-weight: 400; color: var(--muted); }
.fc-s { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.fc-s h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--font-body); font-size: 17px; }
.fc-s p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.7; color: var(--ink); max-width: 40em; }
.fc-built { font-size: 13.5px !important; color: var(--muted) !important; }
.fc-ver { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; background: #E3F1E8; color: #145C37; font-size: 11.5px; font-weight: 700; }
.fc-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.fc-nums > div { --tint: #EEF0FB; --acc: #3140C2; display: flex; flex-direction: column; gap: 4px; padding: 11px 14px 12px; border-radius: 14px; background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 14%, transparent); }
.fc-nums > div:nth-child(4n+2) { --tint: #E8F4EC; --acc: #1E6B52; }
.fc-nums > div:nth-child(4n+3) { --tint: #FFF5D1; --acc: #8A6A00; }
.fc-nums > div:nth-child(4n+4) { --tint: #FCEEEA; --acc: #A63A2B; }
.fc-nums > div::before { content: ""; width: 22px; height: 3px; margin-bottom: 2px; border-radius: 2px; background: var(--acc); }
.fc-nums dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); line-height: 1.3; }
.fc-nums dd { margin: 0; font-family: var(--font-body); font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.fc-nums > div > span { margin-top: auto; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.fc-rm { border-bottom: 0; padding-bottom: 4px; }
.fc-rm .next-steps { margin-top: 0; }
.fc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: st; }
.fc-steps label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sheet); border: 1px solid #D3D8CE; cursor: pointer; font-size: 15.5px; line-height: 1.5; }
.fc-steps input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--money); }
.fc-steps label:has(input:checked) span { color: var(--muted); text-decoration: line-through; }
.fc-warn { margin-top: 20px; padding: 16px 18px; border: 1px solid #D3D8CE; border-radius: 14px; background: var(--sheet); }
.fc-warn p { margin: 0; }
.fc-chal { border-bottom: 0; }
.fc-q { font-family: var(--font-display); font-size: 20px !important; line-height: 1.45 !important; font-weight: 600; }
.fc-chal textarea { width: 100%; min-height: 90px; }
.fc-d-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -34px; padding: 14px 34px; background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--rule); }
.fc-end { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .fc-head { grid-template-columns: auto minmax(0, 1fr); } .fc-prog { grid-column: 1 / -1; }
  .fc-row { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 12px; } .fc-go { grid-column: 1 / -1; justify-content: center; }
  .fc-ans { font-size: 17px; }
  .fc-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .fc-d { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .fc-nav { padding: 10px; overflow-x: auto; } .fc-nav-h { display: none; }
  .fc-nav ol { display: flex; gap: 6px; } .fc-nav button { white-space: nowrap; padding: 8px 10px; }
  .fc-main { padding: 16px 18px 0; } .fc-main h2 { font-size: 24px; } .fc-big { font-size: 18px; padding: 16px; }
  .fc-d-foot { margin: 0 -18px; padding: 12px 18px; }
}

.fs-more { grid-column: 1 / -1; margin: -4px 0 6px; padding: 0 14px; border: 1px solid #D3D8CE; border-radius: 12px; background: var(--sheet); }
.fs-more > summary { padding: 12px 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.fs-more[open] > summary { border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.fs-more .muted { font-weight: 400; }

/* Owner preview bar (owner, 27 Oct): calm, sticky under the header */
.pv-bar { position: sticky; top: 65px; z-index: 40; background: var(--sheet); border-bottom: 2px solid var(--ink); }
.pv-in { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.pv-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--ink); color: var(--hivis); }
.pv-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pv-in p { flex: 1; min-width: 0; margin: 0; }
.pv-in p b { display: block; font-size: 15px; }
.pv-in p span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.pv-act { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-act .btn { min-height: 42px; }
@media (max-width: 720px) { .pv-bar { position: static; } .pv-in { flex-wrap: wrap; } .pv-act { width: 100%; } .pv-act .btn { flex: 1 1 auto; justify-content: center; } }

/* Right column: open roles, always in view near the owner (owner, 27 Oct) */
.aside-jobs ul { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 6px; }
.aside-jobs li a { display: block; padding: 10px 12px; border-radius: 12px; background: var(--sheet); border: 1px solid #D3D8CE; color: var(--ink); text-decoration: none; transition: border-color .15s; }
.aside-jobs li a:hover { border-color: var(--ink); }
.aside-jobs li b { display: block; font-size: 14.5px; line-height: 1.3; }
.aside-jobs li small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.aside-jobs .link { font-size: 14px; font-weight: 700; }

/* Home: the five questions as calm strips (owner, 27 Oct) */
.hx-goals.hx-strips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.hx-strips .next-step { grid-column: span 2; }
.hx-strips .next-step:nth-child(n+4) { grid-column: span 3; }
.hx-strips .next-step { gap: 12px; padding: 12px 14px; min-height: 76px; }
.hx-strips .next-step i { width: 36px; height: 36px; }
.hx-strips .next-step i svg { width: 18px; height: 18px; }
.hx-strips .next-step b { font-size: 15px; }
.hx-strips .next-step small { font-size: 12.5px; }
.hx-strips .next-step em { font-size: 17px; }
@media (max-width: 1020px) { .hx-goals.hx-strips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-strips .next-step, .hx-strips .next-step:nth-child(n+4) { grid-column: auto; } .hx-strips .next-step:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .hx-goals.hx-strips { grid-template-columns: minmax(0, 1fr); gap: 8px; } .hx-strips .next-step:last-child { grid-column: auto; } }

/* Lifetime access (owner, 27 Oct): a small line, not a box */
.gate-life { max-width: 640px; margin: 12px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-align: center; }
.gate-life a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.gate-dialog .gate-life { text-align: left; }
.pr-life { margin: 18px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.pr-life b { color: var(--ink); }
.pr-life .link { font-weight: 700; white-space: nowrap; }

/* Job page head (owner, 27 Oct): who's hiring, the facts in a row, apply first; the newsletter beside it */
.jh { padding: 28px 0 36px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; }
.jh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.jh-biz { display: inline-flex; align-items: center; gap: 12px; margin: 14px 0 10px; color: var(--ink); text-decoration: none; }
.jh-biz i { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--ink); color: var(--hivis); font-style: normal; font-weight: 700; font-size: 15px; }
.jh-biz b { display: block; font-size: 16px; }
.jh-biz small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 13.5px; color: var(--ink-2); }
.jh-biz:hover b { text-decoration: underline; text-underline-offset: 3px; }
.jh-ver { display: inline-flex; align-items: center; gap: 3px; color: var(--money); font-weight: 700; }
.jh-ver svg { width: 13px; height: 13px; }
.jh-title { margin: 0 0 20px; font-family: var(--font-display); font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08; letter-spacing: -0.02em; max-width: 18em; }
.jh-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 22px; border: 1px solid #D3D8CE; border-radius: 14px; background: var(--sheet); overflow: hidden; }
.jh-facts > div { padding: 12px 16px; border-left: 1px solid #E3E6E0; }
.jh-facts > div:first-child { border-left: 0; }
.jh-facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jh-facts dd { margin: 4px 0 0; font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.jh-facts dd small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.jh-act { display: flex; flex-wrap: wrap; gap: 10px; }
.jh-act .btn { min-height: 48px; }
.jh-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.jh-news { padding: 22px; border-radius: 18px; background: var(--hivis); color: var(--ink); }
.jh-news .eyebrow { color: var(--ink); opacity: .75; }
.jh-news-h { margin: 6px 0 6px; font-family: var(--font-display); font-size: 21px; line-height: 1.25; font-weight: 700; }
.jh-news-p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.jh-news .hx-news-form { flex-direction: column; gap: 8px; }
.jh-news .hx-news-form .input, .jh-news .hx-news-form .btn { width: 100%; min-height: 46px; }
.jh-news .nl-long { display: inline; }
@media (max-width: 960px) { .jh-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 640px) { .jh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jh-facts > div:nth-child(3) { border-left: 0; } .jh-facts > div:nth-child(n+3) { border-top: 1px solid #E3E6E0; } .jh-act .btn { flex: 1 1 auto; justify-content: center; } }

.adv-ways-note { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); }

.bp-weeks { display: grid; gap: 8px; margin: 0 0 12px; }
.bp-weeks label { position: relative; cursor: pointer; }
.bp-weeks input { position: absolute; opacity: 0; }
.bp-weeks span { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--sheet); border: 1.5px solid #D3D8CE; }
.bp-weeks b { font-size: 15px; } .bp-weeks small { grid-column: 1; font-size: 13px; color: var(--ink-2); }
.bp-weeks em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; color: var(--ink); }
.bp-weeks input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #FFFBE6; }
.bp-weeks input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.bp-mentor { margin: 0 0 12px; }
.bp-mentor li { font-size: 15px; }

.bp-extra-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bp-extra-h label { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.bp-x-rm { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.bp-x-rm:hover { color: var(--ink); }
.bp-steps li > .field, .bp-extra { display: block; margin-bottom: 14px; }
.bp-x-add { margin-top: 2px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1.5px dashed #B9BFB3; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.bp-x-add span { font-size: 18px; line-height: 1; }
.bp-x-add:hover { border-color: var(--ink); background: var(--sheet); }

/* ---------- Blog (owner, 29 Oct): listing and post. Number covers instead of stock photos; calm strips; skimmable rows ---------- */
.bl-c-starting { --c-bg: #E6F2EA; --c-ink: #145C37; }
.bl-c-pricing { --c-bg: #FFF4CC; --c-ink: #6B5300; }
.bl-c-customers { --c-bg: #E7EAFB; --c-ink: #2B36A8; }
.bl-c-hiring { --c-bg: #F0E8FA; --c-ink: #5B2E8C; }
.bl-c-buying { --c-bg: #E3F0F3; --c-ink: #1D5A68; }
.bl-c-closures { --c-bg: #FBEAE6; --c-ink: #8E2C1F; }
.bl-cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 150px; padding: 18px; border-radius: 16px; background: var(--c-bg); color: var(--c-ink); overflow: hidden; }
.bl-cover::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.bl-cover-ico { position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: var(--hivis); z-index: 1; }
.bl-cover-ico svg, .bl-topics svg, .bl-path-strips svg, .bl-story svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bl-cover-k { position: absolute; left: 64px; top: 26px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; z-index: 1; }
.bl-cover-fig { position: relative; font-family: var(--font-body); font-size: 34px; line-height: 1.05; font-weight: 700; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; z-index: 1; }
.bl-cover-lab { position: relative; font-size: 13px; font-weight: 700; z-index: 1; }
.bl-cover-foot { position: relative; margin-top: 8px; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 1; }
.bl-cover-l { min-height: 300px; padding: 26px; }
.bl-cover-l .bl-cover-fig { font-size: 64px; }
.bl-cover-l .bl-cover-lab { font-size: 15px; }
.bl-cover-s { height: auto; width: 100%; min-height: 0; aspect-ratio: 4 / 3; padding: 12px; border-radius: 12px; }
.bl-cover-s .bl-cover-ico { left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 8px; }
.bl-cover-s .bl-cover-ico svg { width: 15px; height: 15px; }
.bl-cover-s .bl-cover-k, .bl-cover-s .bl-cover-foot { display: none; }
.bl-cover-s .bl-cover-fig { font-size: 24px; }
.bl-cover-s .bl-cover-lab { font-size: 11px; line-height: 1.3; }
.bl-tag { display: inline-flex; align-items: center; width: max-content; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink, var(--ink-2)); text-decoration: none; }
.bl-t-starting { --c-ink: #145C37; } .bl-t-pricing { --c-ink: #8A6A00; } .bl-t-customers { --c-ink: #2B36A8; } .bl-t-hiring { --c-ink: #5B2E8C; } .bl-t-buying { --c-ink: #1D5A68; } .bl-t-closures { --c-ink: #A63A2B; }
a.bl-tag:hover { text-decoration: underline; text-underline-offset: 3px; }
.bl-by { display: inline-flex; align-items: center; gap: 8px; }
.bl-by i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--hivis); font-style: normal; font-size: 11px; font-weight: 700; }
.bl-by b { font-size: 13.5px; color: var(--ink); } .bl-by small { display: block; font-size: 12px; color: var(--muted); }
.bl-meta { font-size: 13px; color: var(--muted); }
.bl-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.bl-head { padding: 40px 0 28px; }
.bl-h1 { margin: 8px 0 10px; font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; max-width: 16em; }
.bl-head .lede { max-width: 40em; margin: 0 0 22px; }
.bl-search { position: relative; max-width: 560px; margin: 0 0 18px; }
.bl-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); }
.bl-search .input { width: 100%; height: 52px; padding-left: 44px; border-radius: 14px; border: 1.5px solid #CDD2CA; background: var(--sheet); font-size: 15.5px; }
.bl-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-topics a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1.5px solid #CDD2CA; background: var(--sheet); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.bl-topics a:hover { border-color: var(--ink); }
.bl-topics a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bl-top { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 28px; margin-bottom: 40px; }
.bl-feat { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 18px; }
.bl-feat-cover { display: block; text-decoration: none; }
.bl-feat-body h2 { margin: 6px 0 8px; font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.bl-feat-body h2 a, .bl-row h3 a, .bl-tops-t, .bl-most a, .bl-card h3 a { color: var(--ink); text-decoration: none; }
.bl-feat-body h2 a:hover, .bl-row h3 a:hover, .bl-tops-t:hover, .bl-most a:hover, .bl-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--hivis); }
.bl-feat-body p { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 38em; }
.bl-tops { padding: 22px; border-radius: 18px; background: var(--sheet); border: 1px solid #D9DDD5; align-self: start; }
.bl-tops h2, .bl-side-box h2 { margin: 0 0 6px; font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.bl-tops ol, .bl-most { list-style: none; margin: 0; padding: 0; }
.bl-tops li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid #E6E8E3; }
.bl-tops li:first-child { border-top: 0; }
.bl-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--paper); font-size: 13px; font-weight: 700; color: var(--ink); }
.bl-tops-t { display: block; margin: 3px 0 4px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.bl-tops small { font-size: 12.5px; color: var(--muted); }
.bl-sec-h { margin: 0 0 14px; font-family: var(--font-display); font-size: 24px; }
.bl-paths { margin-bottom: 44px; }
.bl-path-strips { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.bl-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; padding-bottom: 64px; }
.bl-list { display: grid; }
.bl-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--rule); }
.bl-row:first-child { border-top: 0; padding-top: 4px; }
.bl-row-cover { display: block; text-decoration: none; }
.bl-row h3 { margin: 4px 0 6px; font-family: var(--font-display); font-size: 21px; line-height: 1.25; }
.bl-row p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.bl-more { margin-top: 8px; }
.bl-empty { padding: 28px; border-radius: 14px; background: var(--sheet); border: 1px dashed var(--rule-strong); }
.bl-empty p { margin: 6px 0 0; color: var(--ink-2); }
.bl-side { position: sticky; top: 88px; display: grid; gap: 16px; }
.bl-side-box { padding: 20px; border-radius: 16px; background: var(--sheet); border: 1px solid #D9DDD5; }
.bl-most li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid #E6E8E3; }
.bl-most li:first-child { border-top: 0; }
.bl-most a { font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.bl-news { padding: 20px; border-radius: 16px; background: var(--hivis); color: var(--ink); }
.bl-news .eyebrow { color: var(--ink); opacity: .75; }
.bl-news h2 { margin: 6px 0 6px; font-family: var(--font-display); font-size: 20px; line-height: 1.25; }
.bl-news p { margin: 0 0 12px; font-size: 14px; }
.bl-news .hx-news-form { flex-direction: column; gap: 8px; }
.bl-news .hx-news-form .input, .bl-news .hx-news-form .btn { width: 100%; min-height: 46px; }
.bl-story { min-height: 64px; }
@media (max-width: 960px) {
  .bl-top, .bl-main { grid-template-columns: minmax(0, 1fr); }
  .bl-side { position: static; }
  .bl-path-strips { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .bl-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .bl-row h3 { font-size: 18px; }
  .bl-row p { display: none; }
  .bl-cover-s .bl-cover-fig { font-size: 18px; }
  .bl-cover-s .bl-cover-lab { display: none; }
  .bl-cover-l { min-height: 220px; }
  .bl-cover-l .bl-cover-fig { font-size: 46px; }
}

/* Blog post */
.pst-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.pst-progress i { display: block; height: 100%; background: var(--hivis); transform: scaleX(0); transform-origin: left; }
.pst-grid { display: grid; grid-template-columns: 250px minmax(0, 720px); justify-content: center; gap: 64px; padding-top: 28px; padding-bottom: 48px; }
.pst-main .crumbs { margin-bottom: 18px; }
.pst-h1 { margin: 10px 0 12px; font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.02em; }
.pst-dek { margin: 0 0 20px; font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.pst-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
.pst-byline .bl-by i { width: 38px; height: 38px; font-size: 13px; }
.pst-share { display: flex; gap: 6px; margin-left: auto; }
.pst-sh { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #CDD2CA; background: var(--sheet); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.pst-sh:hover { border-color: var(--ink); }
.pst-sh svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pst-cover { margin-bottom: 24px; }
.pst-cover .bl-cover-l { min-height: 260px; }
.pst-tldr { margin: 0 0 28px; padding: 0 0 24px; border-bottom: 1px solid var(--rule); }
.pst-tldr h2 { margin: 0 0 10px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pst-tldr ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pst-tldr li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.pst-tldr li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--hivis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.4-4.8' fill='none' stroke='%2313203B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.pst-sec { padding-top: 8px; scroll-margin-top: 90px; }
.pst-sec h2 { margin: 28px 0 12px; font-family: var(--font-display); font-size: 27px; line-height: 1.25; }
.pst-sec p { margin: 0 0 16px; font-size: 18px; line-height: 1.75; color: var(--ink); max-width: 40em; }
.pst-list { margin: 4px 0 20px; }
.pst-list li { font-size: 17px; }
.pst-quote { margin: 22px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--hivis); }
.pst-quote blockquote { margin: 0 0 12px; font-family: var(--font-display); font-size: 23px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.pst-quote figcaption { display: flex; align-items: center; gap: 10px; }
.pst-quote figcaption i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--hivis); font-style: normal; font-size: 12px; font-weight: 700; }
.pst-quote figcaption b { display: block; font-size: 14.5px; } .pst-quote figcaption small { font-size: 13px; color: var(--muted); }
.pst-stat { margin: 22px 0; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pst-stat-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
.pst-stat-top a { color: var(--ink); text-decoration: none; } .pst-stat-top a:hover b { text-decoration: underline; }
.pst-stat-top b { font-size: 16px; } .pst-stat-top small { font-size: 13px; color: var(--muted); }
.pst-ver { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; background: #E3F1E8; color: #145C37; font-size: 11.5px; font-weight: 700; }
.pst-ver svg { width: 12px; height: 12px; }
.pst-stat dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.pst-stat dl > div { padding: 2px 0; }
.pst-stat dt { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pst-stat dd { margin: 3px 0 0; font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.pst-stat dd.is-up { color: #145C37; } .pst-stat dd.is-down { color: #A63A2B; }
.pst-stat p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.pst-try { margin: 18px 0 8px; }
.pst-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 36px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--rule); }
.pst-author { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--rule); }
.pst-author > i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--hivis); font-style: normal; font-size: 18px; font-weight: 700; }
.pst-author b { font-size: 17px; } .pst-author small { display: block; font-size: 13px; color: var(--muted); }
.pst-author p { margin: 8px 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pst-rail { position: sticky; top: 88px; align-self: start; display: grid; gap: 28px; padding-top: 70px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; }
/* "In this article" like security.org: label in small capitals, links right-aligned, a rounded grey track with a black marker on the current part */
.pst-toc { text-align: right; }
.pst-toc h2 { margin: 0 0 18px; padding-right: 22px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pst-toc ol { position: relative; list-style: none; margin: 0; padding: 0 22px 0 0; }
.pst-toc ol::after { content: ""; position: absolute; right: 0; top: 4px; bottom: 4px; width: 7px; border-radius: 10px; background: #E2E5DF; }
.pst-toc li { position: relative; padding: 9px 0; }
.pst-toc a { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: #6A7183; text-decoration: none; transition: color .15s; }
.pst-toc a:hover { color: var(--ink); }
.pst-toc a[aria-current] { color: var(--ink); }
.pst-toc a[aria-current]::after { content: ""; position: absolute; right: -22px; top: 0; bottom: 0; width: 7px; border-radius: 10px; background: var(--ink); z-index: 1; }
/* Small screens: "Navigate to:" pills, the current one filled, with a reading bar under them */
.pst-nav { display: none; }
.pst-biz { padding: 20px 0 0; border-top: 1px solid var(--rule); }
.pst-biz > b { display: block; margin-top: 4px; font-size: 17px; } .pst-biz > small { display: block; font-size: 13px; color: var(--muted); }
.pst-biz .next-steps { margin-top: 12px; gap: 8px; }
.pst-biz .next-step { min-height: 60px; padding: 10px 12px; gap: 10px; }
.pst-biz .next-step i { width: 34px; height: 34px; } .pst-biz .next-step b { font-size: 14.5px; } .pst-biz .next-step small { font-size: 12.5px; }
.pst-biz svg, .pst-try svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pst-more { padding-bottom: 64px; }
.pst-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bl-card2 { display: flex; flex-direction: column; gap: 8px; }
.bl-card2 > a:first-child { display: block; margin-bottom: 4px; text-decoration: none; }
.bl-card2 .bl-cover-s { aspect-ratio: auto; height: 150px; padding: 14px; }
.bl-card2 .bl-cover-s .bl-cover-fig { font-size: 28px; }
.bl-card2 h3 { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.3; }
.bl-card2 h3 a { color: var(--ink); text-decoration: none; } .bl-card2 h3 a:hover { text-decoration: underline; text-decoration-color: var(--hivis); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 1020px) {
  .pst-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pst-rail { position: static; padding-top: 8px; }
  .pst-toc { display: none; }
  .pst-sec { scroll-margin-top: 170px; }
  .pst-rail { order: 2; max-height: none; overflow: visible; }
  .pst-nav { position: sticky; top: 65px; z-index: 20; display: block; margin: 0 -16px 8px; padding: 10px 16px 0; background: var(--paper); }
  .pst-nav-l { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
  .pst-pills { display: flex; gap: 8px; margin: 0; padding: 0 0 10px; list-style: none; overflow-x: auto; scrollbar-width: none; }
  .pst-pills::-webkit-scrollbar { display: none; }
  .pst-pills a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink); font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; }
  .pst-pills a[aria-current] { background: var(--ink); color: #fff; }
  .pst-nav-bar { display: block; height: 6px; border-radius: 10px; background: #E2E5DF; overflow: hidden; }
  .pst-nav-bar i { display: block; height: 100%; border-radius: 10px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
}
@media (max-width: 640px) {
  .pst-dek { font-size: 17px; }
  .pst-sec p { font-size: 17px; }
  .pst-share { margin-left: 0; }
  .pst-stat dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pst-quote blockquote { font-size: 20px; }
  .pst-cards { grid-template-columns: minmax(0, 1fr); }
  .bl-card2 .bl-cover-s { height: 120px; }
}

/* Blog: how-to guides and owners' posts (owner, 29 Oct) */
.bl-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bl-kind { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.bl-kind.is-guide { background: var(--ink); color: var(--hivis); }
.bl-kind.is-owner { background: var(--hivis); color: var(--ink); }
.bl-by.is-owner i { background: var(--hivis); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.bl-kinds, .bl-tlist { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-tlab { display: none; }
.bl-topics { row-gap: 10px; }
.bl-topics-sep { display: none; }
.bl-cover.is-guide { background-image: repeating-linear-gradient(0deg, transparent 0 23px, rgba(19, 32, 59, 0.06) 23px 24px); }
.bl-guides { margin-bottom: 48px; padding: 36px 0 40px; background: var(--ink); color: #fff; }
.bl-guides .eyebrow { color: var(--hivis); }
.bl-guides-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.bl-guides-head .bl-sec-h { margin: 4px 0 6px; color: #fff; }
.bl-guides-head p { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 15px; }
.bl-guides-head .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.bl-gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bl-gcard { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 16px; background: var(--c-bg); color: var(--ink); text-decoration: none; border: 2px solid transparent; }
.bl-gcard:hover { border-color: var(--hivis); }
.bl-gcard-n { display: inline-flex; align-items: baseline; gap: 6px; width: max-content; margin-bottom: 6px; padding: 6px 12px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.bl-gcard-n b { font-size: 22px; line-height: 1; color: var(--hivis); font-variant-numeric: lining-nums tabular-nums; }
.bl-gcard-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); }
.bl-gcard-t { font-family: var(--font-display); font-size: 20px; line-height: 1.3; }
.bl-gcard-d { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.bl-gcard small { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.bl-owners { list-style: none; margin: 4px 0 12px; padding: 0; }
.bl-owners li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid #E6E8E3; }
.bl-owners li:first-child { border-top: 0; }
.bl-owners i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hivis); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-style: normal; font-size: 12px; font-weight: 700; }
.bl-owners a { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--ink); text-decoration: none; }
.bl-owners a:hover { text-decoration: underline; text-decoration-color: var(--hivis); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bl-owners small { font-size: 12.5px; color: var(--muted); }
.bl-story svg { color: inherit; }
@media (max-width: 600px) {
  /* Phones: every filter in view at once. The three kinds as one segmented bar, the six topics in two columns. */
  .bl-topics { display: grid; gap: 14px; }
  .bl-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--sheet); border: 1.5px solid #CDD2CA; }
  .bl-kinds a { justify-content: center; min-height: 44px; padding: 0 6px; border: 0; border-radius: 10px; font-size: 13.5px; line-height: 1.2; text-align: center; }
  .bl-kinds a svg { display: none; }
  .bl-tlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bl-tlab { display: block; grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .bl-tlist a { min-height: 44px; padding: 0 12px; font-size: 14px; line-height: 1.2; }
  .bl-tlist a svg { flex: none; }
}
@media (max-width: 960px) { .bl-gcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .bl-guides { padding: 28px 0 30px; } .bl-gcard-d { display: none; } }
.pst-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; padding: 12px 16px; border-radius: 14px; background: var(--hivis); color: var(--ink); border: 2px solid var(--ink); }
.pst-preview span { flex: 1 1 240px; font-size: 14.5px; }
.pst-step { display: block; margin-bottom: 4px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pst-needs { margin: 0 0 28px; padding: 0 0 24px; border-bottom: 1px solid var(--rule); }
.pst-needs h2 { margin: 0 0 10px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pst-needs ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; }
.pst-owner-note { display: flex; align-items: flex-start; gap: 10px; margin: -8px 0 22px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pst-owner-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pst-img { margin: 22px 0; }
.pst-img img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--paper); }
.pst-img figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.pst-sec p .link { font-weight: 600; }

/* Blog editor (assets/writer.js): admin #blog and the owner dashboard #blog */
.wr-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; padding: 20px 22px; border-radius: 16px; background: var(--sheet); border: 1px solid #D9DDD5; border-left: 5px solid var(--hivis); }
.wr-tips > div > b { display: block; margin-bottom: 10px; font-size: 15px; }
.wr-tips .check-list { gap: 8px; font-size: 14.5px; line-height: 1.5; }
.wr-dont { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.wr-dont li { position: relative; padding-left: 28px; }
.wr-dont li::before { content: "×"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #FBE4DF; color: #A63A2B; font-weight: 700; font-size: 14px; line-height: 1; }
.wr-note { color: #8E2C1F; }
.wr-rv-dek { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.wr-rv-check { margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--rule); }
.wr-rv-check b { display: block; margin-bottom: 8px; font-size: 14px; }
.wr-rv-check .check-list { gap: 6px; font-size: 14px; }
.wr-ed .rma-errors b { display: block; }
.wr-ed .rma-errors button.link { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; text-decoration: underline; cursor: pointer; }
.wr-sec .rma-badge { background: var(--sheet); }
.wr-extras { margin-top: 14px; }
.wr-extras > summary b { font-size: 14.5px; }
.wr-has { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.wr-extras > .app-form { padding: 4px 14px 16px; }
.wr-photo-box { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.wr-photo-box img { width: 100%; border-radius: 12px; border: 1px solid var(--rule); }
.wr-photo-box .app-form { gap: 12px; }
.wr-photo-box .btn { justify-self: start; }
.wr-drop { position: relative; display: flex; align-items: center; min-height: 72px; padding: 12px 16px; border: 1.5px dashed var(--rule-strong); border-radius: 12px; background: #FAFBF9; cursor: pointer; }
.wr-drop:hover, .wr-drop:focus-within { border-color: var(--ink); }
.wr-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wr-drop > span { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.wr-drop svg { grid-row: span 2; width: 28px; height: 28px; padding: 5px; border-radius: 8px; background: var(--hivis); color: var(--ink); }
.wr-drop b { font-size: 14.5px; } .wr-drop small { font-size: 13px; color: var(--muted); }
.wr-check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.wr-check-row input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }
.wr-next-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.wr-next-grid .field > .ed-lab { font-size: 13px; }
.wr-about-box { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; }
.wr-about-box > i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--hivis); }
.wr-about-box > i svg { width: 18px; height: 18px; }
.wr-about-box b { display: block; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.wr-about-box p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 720px) {
  .wr-tips, .wr-photo-box, .wr-next-grid { grid-template-columns: minmax(0, 1fr); }
  .wr-photo-box img { max-width: 260px; }
}

/* Just started (owner, 29 Oct): businesses in their first year, month by month */
.bz-views a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 18px; border-radius: 11px; color: var(--ink); font-size: 16px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.bz-views a svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bz-views a b { min-width: 28px; padding: 2px 8px; border-radius: 99px; background: var(--sheet); color: var(--ink); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.bz-views a:hover { background: var(--sheet); }
.bz-views a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.bz-views a[aria-current="page"] b { background: var(--hivis); color: var(--ink); }
.bz-views button svg path { stroke-linejoin: round; }
.st-lede { max-width: 40em; }
.st-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.st-sec-head h2 { margin: 0; font-family: var(--font-display); font-size: 24px; }
.st-new { margin-top: 28px; margin-bottom: 36px; }
.st-all { margin-top: 28px; margin-bottom: 40px; }
.st-sort { display: inline-flex; align-items: center; gap: 8px; }
.st-filters { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 20px; }
.st-search { position: relative; max-width: 520px; margin: 0 0 16px; }
.st-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); }
.st-search .input { width: 100%; height: 48px; padding-left: 42px; border-radius: 14px; border: 1.5px solid #CDD2CA; background: var(--sheet); font-size: 15px; }
.st-filt-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; min-width: 0; }
.st-filters .st-filt-block { margin-bottom: 0; }
.st-filt-l { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.st-chips button small { margin-left: 4px; font-size: 12px; font-weight: 700; opacity: .6; }
.st-sub { padding: 8px; border-radius: 14px; background: var(--sheet); border: 1px dashed #CDD2CA; justify-self: start; max-width: 100%; }
.st-sub button { min-height: 36px; font-size: 13.5px; }
/* Phones: one "Filters" button and the active filters as removable pills; the groups open in a sheet from the bottom */
.st-mbar, .st-fhead, .st-ffoot, .st-scrim { display: none; }
@media (max-width: 640px) {
  .st-mbar { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
  .st-fbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
  .st-fbtn svg { width: 18px; height: 18px; }
  .st-fbtn b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--hivis); font-size: 12px; }
  .st-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px 0 14px; border-radius: 99px; border: 0; background: var(--ink); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
  .st-pill span { font-size: 18px; line-height: 1; opacity: .75; }
  .st-fpanel { display: none; }
  .st-fpanel.is-open { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-height: 86vh; overflow-y: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--paper); box-shadow: 0 -18px 40px -12px rgba(19, 32, 59, 0.35); }
  .st-scrim { display: block; position: fixed; inset: 0; z-index: 89; background: rgba(19, 32, 59, 0.45); }
  .st-fhead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 0 -16px 14px; padding: 16px 16px 12px; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .st-fhead b { flex: 1; font-family: var(--font-display); font-size: 20px; }
  .st-fhead .link { padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
  .st-fx { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--rule-strong); border-radius: 50%; background: var(--sheet); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
  .st-ffoot { position: sticky; bottom: 0; display: block; margin: 8px -16px 0; padding: 12px 16px 0; background: var(--paper); }
  .st-ffoot .btn { width: 100%; min-height: 50px; }
}
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chips button { min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1.5px solid #CDD2CA; background: var(--sheet); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.st-chips button:hover { border-color: var(--ink); }
.st-chips button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.st-empty { grid-column: 1 / -1; }
.st-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: var(--sheet); border: 1px solid #D9DDD5; }
.st-card.is-closed { background: #FBF5F3; }
.st-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.st-month { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--hivis); color: var(--ink); font-size: 12.5px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--ink); }
.st-month.is-closed { background: #FBE4DF; color: #8E2C1F; box-shadow: inset 0 0 0 1.5px #E7B4A8; }
.st-trade { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.st-card h3 { margin: 4px 0 0; font-family: var(--font-display); font-size: 21px; line-height: 1.25; }
.st-card h3 a { color: var(--ink); text-decoration: none; }
.st-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--hivis); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.st-who { margin: 0; font-size: 13.5px; color: var(--muted); }
.st-site { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: -2px; font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: none; }
.st-site svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.st-site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; text-decoration: underline; text-decoration-color: var(--hivis); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.st-site i { font-style: normal; color: var(--muted); }
.st-site:hover span { text-decoration-color: var(--ink); }
.st-bars { display: flex; align-items: flex-end; gap: 4px; height: 54px; margin: 6px 0 2px; }
.st-bar { position: relative; flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.st-bar i { display: block; width: 100%; height: var(--h); min-height: 3px; border-radius: 4px 4px 2px 2px; background: #C9D3E6; }
.st-bar.is-last i { background: var(--ink); }
.st-bar.is-future i { height: 100%; background: none; border: 1.5px dashed #D3D8CE; border-bottom: 0; }
.st-year { display: flex; justify-content: space-between; margin-top: -2px; font-size: 11px; font-weight: 700; color: var(--muted); }
.st-bars.is-closed .st-bar.is-last i { background: #C2543F; }
.st-bars.is-big { height: 200px; gap: 8px; margin: 20px 0 6px; padding-bottom: 22px; }
.st-bars.is-big .st-bar i { border-radius: 6px 6px 2px 2px; }
.st-bars.is-big .st-bar b { margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-bars.is-big .st-bar small { position: absolute; bottom: -22px; font-size: 12px; color: var(--muted); }
.st-bars.is-big .st-bar.is-last b { color: var(--ink); }
.st-fig { margin: 0; font-size: 14px; color: var(--ink-2); }
.st-fig b { font-size: 17px; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.is-up { color: #145C37; font-weight: 700; } .is-down { color: #A63A2B; font-weight: 700; }
.st-quote { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--paper); font-size: 14px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.st-quote span { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.st-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.st-card-foot small { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.st-card-foot small svg { width: 13px; height: 13px; color: #145C37; }
.st-follow { min-width: 92px; }
.st-join { margin-bottom: 64px; }
.st-join-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 26px 28px; border-radius: 20px; background: var(--hivis); color: var(--ink); }
.st-join-box h2 { margin: 6px 0 6px; font-family: var(--font-display); font-size: 26px; line-height: 1.2; }
.st-join-box p { margin: 0; max-width: 40em; font-size: 15px; line-height: 1.55; }
.st-join-box .eyebrow { color: var(--ink); opacity: .75; }
/* One business's first year */
.sp-wrap { padding-top: 28px; padding-bottom: 64px; }
.sp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; margin: 18px 0 24px; }
.sp-h1 { margin: 10px 0 12px; }
.sp-who { display: flex; align-items: center; gap: 12px; margin: 0; }
.sp-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--hivis); font-size: 15px; font-weight: 700; }
.sp-who b { display: block; font-size: 16px; } .sp-who small { font-size: 14px; color: var(--muted); }
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "main fc" "main side"; grid-template-rows: auto 1fr; gap: 20px 28px; align-items: start; }
.sp-grid > .sp-main { grid-area: main; } .sp-grid > .sp-fc { grid-area: fc; } .sp-grid > .sp-side { grid-area: side; }
/* Follow card: what's coming next is the reason to follow */
.sp-fc { display: grid; gap: 12px; padding: 20px 22px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: 6px 6px 0 var(--hivis); }
.sp-fc .eyebrow { color: var(--hivis); }
.sp-fc h2 { margin: -4px 0 0; font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: #fff; }
.sp-fc-goal { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); font-size: 14.5px; line-height: 1.45; }
.sp-fc-goal b { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.sp-fc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.sp-fc-list li { position: relative; padding-left: 18px; }
.sp-fc-list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--hivis); }
.sp-fc .sp-fc-btn { width: 100%; }
.sp-fc .st-follow.btn-ghost { background: var(--hivis); border-color: var(--hivis); color: var(--ink); }
.sp-fc .st-follow.btn-ink { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.sp-fc small { font-size: 13px; color: rgba(255, 255, 255, 0.7); text-align: center; }
.sp-fc.is-closed { background: #FBF5F3; color: var(--ink); box-shadow: none; border: 1px solid #EBCFC7; }
.sp-fc.is-closed p { margin: 0; font-size: 15px; line-height: 1.5; } .sp-fc.is-closed small { color: var(--muted); text-align: left; }
.sp-more-btn { margin-top: 6px; }
/* How it's set up */
.sp-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sp-h3 { margin: 18px 0 10px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.sp-set > div > .sp-h3:first-child { margin-top: 0; }
.sp-setfacts { list-style: none; margin: 0; padding: 0; display: grid; }
.sp-setfacts li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.sp-setfacts li:first-child { padding-top: 0; }
.sp-setfacts span { font-size: 13.5px; color: var(--muted); } .sp-setfacts b { font-size: 14.5px; line-height: 1.4; }
a.st-trade { text-decoration: none; } a.st-trade:hover { color: var(--ink); text-decoration: underline; }
.sp-chan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-chan li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 38px; align-items: center; gap: 10px; font-size: 14px; }
.sp-chan i { display: block; height: 8px; border-radius: 99px; background: var(--paper); overflow: hidden; }
.sp-chan i b { display: block; height: 100%; border-radius: 99px; background: var(--hivis); box-shadow: inset 0 0 0 1px rgba(19, 32, 59, 0.15); }
.sp-chan em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sp-cost-bar { display: flex; gap: 2px; height: 14px; margin-bottom: 12px; border-radius: 99px; overflow: hidden; }
.sp-cost-bar b { display: block; height: 100%; }
.sp-cost { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-cost li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.sp-cost li i { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(19, 32, 59, 0.12); }
.sp-cost li b { font-variant-numeric: tabular-nums; }
/* How it compares */
.sp-cmp-l { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.sp-cmp-t { margin: 10px 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.sp-cmp-t b { color: var(--ink); }
.sp-cmp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sp-cmp-c { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; }
.sp-cmp-c.is-green { background: #E6F2EA; --ring: #1F8A4C; }
.sp-cmp-c.is-yellow { background: #FFF4CC; }
.sp-cmp-c > div > b { display: block; font-size: 18px; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.sp-cmp-c > div > span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: #145C37; }
/* A ring filled to "n in 100" */
.sp-ring { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(var(--ring) calc(var(--p) * 1%), rgba(31, 138, 76, 0.16) 0); }
.sp-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #E6F2EA; }
.sp-ring b { position: relative; font-size: 16px; font-weight: 700; color: #145C37; font-variant-numeric: tabular-nums; }
/* Cost to start: the usual cost and this owner's, as two bars */
.sp-cmp-cost { flex-direction: column; align-items: stretch; gap: 7px; }
.sp-cmp-k { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6B5300; }
.sp-cbar { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }
.sp-cbar span { color: #6B5300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-cbar i { display: block; height: 10px; border-radius: 99px; background: rgba(107, 83, 0, 0.12); overflow: hidden; }
.sp-cbar i b { display: block; height: 100%; border-radius: 99px; background: #C9A227; }
.sp-cbar.is-you i b { background: var(--ink); }
.sp-cbar.is-you span { font-weight: 700; color: var(--ink); }
.sp-cbar em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sp-box { padding: 22px 24px; border-radius: 18px; background: var(--sheet); border: 1px solid #D9DDD5; }
.sp-box h2 { margin: 0; font-family: var(--font-display); font-size: 22px; }
.sp-box-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 16px; }
/* The four figures: soft coloured cards (label with an icon, the figure, a short pill), the latest month in ink */
.sp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.sp-k { --k-bg: var(--paper); --k-ink: var(--ink-2); --k-ico: var(--sheet); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px 16px; border-radius: 16px; background: var(--k-bg); }
.sp-k.is-ink { --k-bg: var(--ink); --k-ink: rgba(255, 255, 255, 0.78); --k-ico: rgba(255, 255, 255, 0.12); color: #fff; }
.sp-k.is-green { --k-bg: #E6F2EA; --k-ink: #145C37; --k-ico: #C9E5D3; }
.sp-k.is-blue { --k-bg: #E7EAFB; --k-ink: #2B36A8; --k-ico: #CFD5F6; }
.sp-k.is-yellow { --k-bg: #FFF4CC; --k-ink: #6B5300; --k-ico: #FBE59A; }
.sp-k.is-red { --k-bg: #FBEAE6; --k-ink: #8E2C1F; --k-ico: #F4CFC6; }
.sp-k dt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--k-ink); }
.sp-k dt i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--k-ico); color: var(--k-ink); }
.sp-k.is-ink dt i { color: var(--hivis); }
.sp-k dt svg { width: 16px; height: 16px; }
.sp-k dd { margin: 2px 0 0; font-size: 26px; line-height: 1.1; font-weight: 700; color: inherit; font-variant-numeric: lining-nums tabular-nums; }
.sp-k:not(.is-ink) dd { color: var(--ink); }
.sp-pill { display: inline-flex; align-items: center; max-width: 100%; min-height: 24px; padding: 3px 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.7); color: var(--k-ink); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.sp-k { min-width: 0; }
.sp-k.is-ink .sp-pill { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sp-k.is-ink .sp-pill.is-up { background: #DDF1E4; color: #145C37; }
.sp-k.is-ink .sp-pill.is-down { background: #FBE4DF; color: #8E2C1F; }
.sp-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.sp-goal { padding: 18px 22px; border-radius: 18px; background: var(--ink); color: #fff; }
.sp-goal .eyebrow { color: var(--hivis); }
.sp-goal p { margin: 6px 0 0; font-family: var(--font-display); font-size: 22px; line-height: 1.35; }
.sp-closed { background: #FBF5F3; border-color: #EBCFC7; }
.sp-why { margin: 14px 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; line-height: 1.5; }
.sp-say { margin: 0; padding-left: 16px; border-left: 4px solid #C2543F; font-family: var(--font-display); font-size: 19px; line-height: 1.45; }
.sp-say cite { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 13.5px; font-style: normal; font-weight: 700; color: var(--ink-2); }
.sp-time { position: relative; list-style: none; margin: 0; padding: 0; }
.sp-time::before { content: ""; position: absolute; left: 92px; top: 6px; bottom: 6px; width: 2px; background: #E2E5DF; }
.sp-time li { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 28px; padding: 12px 0; }
.sp-time li::before { content: ""; position: absolute; left: 87px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--ink); }
.sp-time li.has-mile::before { background: var(--hivis); }
.sp-time-m b { display: block; font-size: 14.5px; } .sp-time-m small { font-size: 13px; color: var(--muted); }
.sp-time-b p { margin: 4px 0; font-size: 16px; line-height: 1.6; }
.sp-mile { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; background: var(--hivis); font-size: 12.5px; font-weight: 700; }
.sp-side { position: sticky; top: 88px; display: grid; gap: 16px; }
.sp-tip { padding: 18px 20px; border-radius: 16px; background: var(--hivis); }
.sp-tip .eyebrow { color: var(--ink); opacity: .75; }
.sp-tip p { margin: 6px 0 0; font-family: var(--font-display); font-size: 19px; line-height: 1.4; }
.sp-next h2 { font-size: 18px; }
.sp-next .next-steps { margin-top: 12px; gap: 8px; }
.sp-next .next-step { min-height: 60px; padding: 10px 12px; gap: 10px; }
.sp-next .next-step i { width: 34px; height: 34px; } .sp-next .next-step b { font-size: 14.5px; } .sp-next .next-step small { font-size: 12.5px; }
.sp-next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-more { margin-top: 44px; }
.hm-starts .st-grid { margin-top: 4px; }
.su-fig { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--paper); font-size: 14.5px; }
.su-goal { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
/* Page views (owner dashboard) */
.vw-range { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sheet); border: 1.5px solid #CDD2CA; }
.vw-range button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.vw-range button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.vw-kpis .sp-k dt svg { width: 16px; height: 16px; }
.vw-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 170px; margin-bottom: 22px; }
.vw-bars.is-days { gap: 3px; }
.vw-bar { position: relative; display: block; height: 100%; }
.vw-bar i { position: absolute; left: 0; right: 0; bottom: 0; display: block; border-radius: 4px 4px 1px 1px; background: #C9D3E6; }
.vw-bar.is-last i { background: var(--ink); }
.vw-bar small { position: absolute; left: 0; bottom: -22px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.vw-bars:not(.is-days) .vw-bar small { left: 50%; transform: translateX(-50%); }
.vw-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vw-two .sp-h3 { margin-top: 0; }
.vw-chan li { grid-template-columns: minmax(0, 1fr) 110px 40px; }
.vw-n { font-size: 20px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .vw-two { grid-template-columns: minmax(0, 1fr); }
  .vw-chan li { grid-template-columns: minmax(0, 1fr) 70px 38px; }
  .vw-bars { height: 130px; }
  .vw-bars.is-days .vw-bar small { font-size: 10px; }
}
@media (max-width: 640px) { .su-goal { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) {
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fc" "main" "side"; grid-template-rows: auto; }
  .sp-set { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sp-side { position: static; }
}
/* Three tabs now (All businesses, Owner interviews, Just started): one row of three on small screens */
@media (max-width: 720px) {
  .bz-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 16px; box-shadow: 3px 3px 0 var(--hivis); }
  .bz-views a, .bz-views button { flex-direction: column; justify-content: center; gap: 4px; min-height: 72px; padding: 10px 4px; font-size: 13.5px; text-align: center; line-height: 1.2; }
  .bz-views a b, .bz-views button b { font-size: 12px; padding: 1px 7px; }
}
@media (max-width: 640px) {
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .st-filters { display: grid; gap: 10px; }
  .st-join-box { padding: 22px 20px; } .st-join-box .btn { width: 100%; }
  .sp-head { align-items: flex-start; }
  .sp-box { padding: 18px 16px; }
  .sp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sp-cmp-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sp-chan li { grid-template-columns: minmax(0, 1fr) 70px 38px; }
  .sp-fc { box-shadow: 4px 4px 0 var(--hivis); }
  .sp-k { padding: 12px 12px 14px; }
  .sp-k dt { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 11px; } .sp-k dt i { width: 26px; height: 26px; }
  .sp-pill { height: auto; min-height: 24px; padding: 3px 9px; white-space: normal; line-height: 1.3; }
  .sp-k dd { font-size: 21px; }
  .st-bars.is-big { height: 170px; gap: 4px; }
  .st-bars.is-big .st-bar b { display: none; } /* the figures are in the boxes above; bars alone on phones */
  .st-bars.is-big .st-bar small { font-size: 11px; }
  .sp-time::before { left: 70px; }
  .sp-time li { grid-template-columns: 60px minmax(0, 1fr); gap: 24px; }
  .sp-time li::before { left: 65px; }
}

/* ---------- Every dropdown uses the "Pick a business" picker (owner, 25 Oct): form fields, sorts and small pickers ---------- */
.pick-field { max-width: none; width: 100%; }
.pick-field > select[hidden], .pick > select[hidden] { display: none; }
.pick-field .pick-box { height: 46px; padding: 0 4px 0 12px; border-radius: 10px; }
.pick-field .pick-box input { width: 0; font-size: 15px; cursor: pointer; }
.pick-field .pick-box input:not([readonly]) { cursor: text; }
.pick-field .pick-toggle { width: 34px; height: 34px; }
.pick-sm { min-width: 0; }
.pick-sm .pick-box { height: 32px; padding: 0 2px 0 10px; border-width: 1.5px; }
.pick-sm .pick-box input { font-size: 13.5px; min-width: 4ch; }
.pick-sm .pick-toggle { width: 26px; height: 26px; }
.pick-sm .pick-list { width: 200px; left: auto; right: 0; }
.mk-sort .pick-sm .pick-box { border-color: transparent; }
.pick.is-disabled .pick-box { opacity: 0.55; }
.pick.is-disabled .pick-box input { cursor: not-allowed; }

/* ==========================================================
   [roadmaps] Start-up roadmaps: roadmaps.html (list) and roadmap.html (one trade × country).
   A route down the page: hi-vis stage signs on a carbon dashed line, steps branching off it.
   ========================================================== */
.rm-head { padding-bottom: 28px; }
.rm-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.rm-head .page-title { max-width: 17em; }
.rm-meta { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 16px; color: var(--ink-2); }
.rm-meta li { display: flex; align-items: center; gap: 5px; }
.rm-meta li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--rule-strong); margin-right: 15px; }
.rm-meta b { color: var(--ink); }

/* Progress card: the receipt you keep as you go */
.rm-prog { padding: 20px; border: 2px solid var(--ink); }
.rm-prog-top { display: flex; align-items: center; gap: 14px; }
.rm-prog-top svg { flex: none; }
.rm-prog-top svg circle:last-child { transition: stroke-dashoffset 0.5s var(--ease); }
.rm-prog-pct { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.rm-prog-sub { display: block; font-size: 15px; color: var(--muted); margin-top: 4px; }
.rm-prog-next { margin: 16px 0 14px; padding-top: 14px; border-top: 1px dashed var(--rule-strong); min-height: 82px; }
.rm-prog-next span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--carbon); }
.rm-prog-next b { display: block; font-size: 16px; line-height: 1.3; margin: 4px 0 2px; }
.rm-prog-next small { display: block; font-size: 15px; color: var(--muted); line-height: 1.4; }
.rm-prog-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.rm-prog-foot .link { border: 0; background: none; padding: 0; cursor: pointer; font-size: 14.5px; }

.rm-facts { margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.rm-facts > div { padding: 16px 16px 4px; border-left: 1px solid var(--rule); }
.rm-facts > div:first-child { padding-left: 0; border-left: 0; }
.rm-facts dt { font-size: 15px; color: var(--muted); margin-bottom: 4px; }
.rm-facts dd { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rm-facts dd .tag { font-size: 13px; vertical-align: 3px; margin-left: 6px; }
.rm-facts-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 14px 0 0; font-size: 16px; }

/* Compact title area: title, one line of facts and progress in one band, so the map starts on the first screen */
.rm-page .rm-head { padding: 22px 0 18px; }
.rm-page .rm-head .crumbs { margin-bottom: 10px; }
.rm-page .rm-head-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.rm-page .rm-head .page-title { font-size: 34px; max-width: none; }
.rm-head-lede { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 46em; }
.rm-page .rm-meta { margin-top: 12px; gap: 6px 22px; font-size: 15.5px; }
.rm-page .rm-meta li + li::before { content: none; }
.rm-page .rm-meta .tag { font-size: 12px; margin-left: 4px; }
.rm-page .rm-prog { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 14px; max-width: 460px; }
.rm-prog svg { flex: none; }
.rm-prog-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rm-prog-txt b { font-size: 17px; }
.rm-prog-txt span { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.rm-page .rm-prog .btn { flex: none; min-height: 44px; }
.rm-prog-reset { border: 0; background: none; padding: 0 4px; font: inherit; font-size: 13.5px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.rm-page .rm-grid { padding-top: 20px; }
.rm-page .rm-warn { margin-bottom: 20px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 900px) {
  .rm-page .rm-head-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rm-page .rm-head .page-title { font-size: 27px; }
  .rm-page .rm-prog { max-width: none; }
  .rm-prog-txt { flex: 1; }
  .rm-prog-txt span { max-width: none; }
}
@media (max-width: 600px) {
  .rm-head-lede { display: none; }
  .rm-page .rm-meta { gap: 4px 16px; font-size: 15px; }
  .rm-page .rm-prog { flex-wrap: wrap; gap: 10px 12px; padding: 10px 12px; }
  .rm-page .rm-prog svg { width: 40px; height: 40px; }
  .rm-prog-txt b { white-space: nowrap; font-size: 16px; }
  .rm-prog-reset { flex-basis: 100%; text-align: right; padding: 0; margin-top: -4px; }
}

.rm-preview { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 15px; }
.rm-preview .link { color: var(--hivis); }

/* Sticky tool bar under the site header */
.rm-bar { position: sticky; top: 64px; z-index: 30; background: rgba(236, 238, 234, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.rm-bar-in { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.rm-bar .tabs { flex: none; padding: 3px; border: 1.5px solid var(--rule-strong); border-radius: 9px; background: var(--sheet); gap: 2px; }
.rm-bar .tab { padding: 6px 14px; }
.rm-filter { flex: none; flex-wrap: nowrap; }
.rm-filter span { padding: 6px 11px; font-size: 15.5px; }
.rm-search { position: relative; flex: 1 1 180px; max-width: 280px; }
.rm-search svg { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.rm-search .input { height: 38px; padding-left: 34px; font-size: 16px; }
.rm-bar-prog { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.rm-bar-prog b { font-size: 16px; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.rm-bar-prog .rm-track { width: 140px; }
.rm-track { display: block; height: 6px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.rm-track i { display: block; height: 100%; width: 0; background: var(--grow); border-radius: inherit; transition: width 0.4s var(--ease); }
.btn:disabled { opacity: 0.45; cursor: default; }

.rm-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 32px calc(var(--sec-gap) / 2); }
.rm-aside { position: sticky; top: 146px; display: grid; gap: 16px; }
.rm-aside .card { padding: 18px; }
.rm-aside h3 { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.rm-index ol { list-style: none; margin: 0 -8px; padding: 0; display: grid; gap: 1px; }
.rm-index a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; text-decoration: none; font-size: 16px; line-height: 1.3; color: var(--ink-2); }
.rm-index a:hover { background: var(--paper); color: var(--ink); }
.rm-index a.is-here { background: var(--paper); color: var(--ink); font-weight: 700; }
.rm-ix-no { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--rule-strong); display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--sheet); }
.rm-ix-no svg { width: 13px; height: 13px; }
.rm-index a.is-done .rm-ix-no { background: var(--grow); border-color: var(--grow); color: #fff; }
.rm-index a.is-current .rm-ix-no { background: var(--hivis); border-color: var(--ink); color: var(--ink); }
.rm-index small { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rm-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.rm-legend li > span:first-child { display: table; margin-bottom: 3px; }
.rm-keys { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--sheet); font-family: var(--font-body); font-size: 13px; text-align: center; color: var(--ink); }
.rm-real { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--carbon); white-space: nowrap; }
.rm-real::before { content: ""; width: 14px; height: 7px; border-radius: 2px; background: var(--hivis); }
.rm-warn { margin-bottom: 36px; max-width: 46em; }

/* ---------- The map ---------- */
.rm-map[hidden], .rm-list[hidden] { display: none; }
.rm-stage { position: relative; padding-bottom: 44px; }
/* The route: carbon dashes, solid green once a stage is done */
.rm-stage::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, var(--carbon) 0 7px, transparent 7px 13px); opacity: 0.55; }
.rm-stage.is-done::before { background: var(--grow); opacity: 1; }
.rm-node {
  position: relative; z-index: 1; display: block; width: min(420px, 100%); margin: 0 auto; padding: 14px 20px 16px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--hivis); color: var(--ink);
  box-shadow: 0 4px 0 var(--ink); text-align: center; cursor: pointer; transition: background-color 0.12s ease;
}
.rm-node:hover { background: var(--hivis-hover); }
.rm-node-no { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.rm-node-t { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 4px 0 6px; }
.rm-node-meta { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.rm-node .rm-track { width: 160px; margin: 0 auto; background: rgba(19, 32, 59, 0.16); }
.rm-node .rm-track i { background: var(--ink); }
.rm-stage.is-done .rm-node { background: var(--sheet); }
.rm-stage.is-done .rm-node .rm-track i { background: var(--grow); }
/* Done stamp: the same carbon stamp as the verified receipt */
.rm-stamp {
  position: absolute; right: -10px; top: -14px; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--carbon); border: 2.5px solid var(--carbon); border-radius: 6px; padding: 3px 8px 2px; line-height: 1; background: var(--sheet);
  transform: rotate(-8deg);
}
.rm-stamp small { display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.1em; margin-top: 2px; }
.rm-stage.just-done .rm-stamp { animation: stamp-down 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.rm-node-blurb { position: relative; z-index: 1; max-width: 30em; margin: 14px auto 24px; padding: 4px 12px; text-align: center; font-size: 16px; line-height: 1.5; color: var(--ink-2); background: var(--paper); }

.rm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 72px; }
.rm-step {
  position: relative; display: flex; align-items: stretch; min-height: 64px;
  background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: 10px; transition: border-color 0.12s ease, background-color 0.12s ease;
}
.rm-step:hover { border-color: var(--ink); }
/* Branches from the route to each step */
.rm-step::after { content: ""; position: absolute; top: 50%; width: 36px; border-top: 2px solid var(--rule-strong); }
.rm-step:nth-child(odd)::after { right: -37.5px; }
.rm-step:nth-child(even)::after { left: -37.5px; }
.rm-step.is-done::after { border-top-color: var(--grow); }
.rm-check {
  flex: none; align-self: center; display: grid; place-items: center; width: 26px; height: 26px; margin: 0 0 0 14px; padding: 0;
  border: 2px solid var(--ink); border-radius: 7px; background: var(--sheet); color: #fff; cursor: pointer; position: relative;
}
.rm-check::before { content: ""; position: absolute; inset: -10px; } /* 46px tap target */
.rm-check svg { width: 16px; height: 16px; }
.rm-check:hover { background: var(--carbon-soft); }
.rm-check i { font-style: normal; font-weight: 700; color: var(--muted); }
.rm-open { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 14px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 0 9px 9px 0; }
.rm-step-t { font-weight: 700; font-size: 15px; line-height: 1.3; }
.rm-step-t mark { background: var(--hivis); color: inherit; border-radius: 2px; }
.rm-step-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14.5px; color: var(--muted); }
.rm-step-m .sp-need { font-size: 13px; }
.rm-next-tag { align-self: flex-start; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--carbon); margin-bottom: -2px; }

.rm-step.is-done, .rm-lrow.is-done { background: #F4F7F2; border-color: var(--sage-line); }
.is-done > .rm-check { background: var(--grow); border-color: var(--grow); }
.is-done .rm-step-t { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1.5px; }
.is-doing > .rm-check { background: var(--hivis); }
.is-doing > .rm-check::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.rm-step.is-doing { border-color: var(--ink); }
.rm-step.is-skip { border-style: dashed; background: transparent; }
.is-skip > .rm-check { border-color: var(--rule-strong); }
.is-skip .rm-step-t { color: var(--muted); }
.rm-step.is-next { border-color: var(--carbon); box-shadow: 0 0 0 3px var(--carbon-soft); }

.rm-end { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.rm-end-pin { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sheet); display: grid; place-items: center; margin-bottom: 8px; }
.rm-end-pin svg { width: 18px; height: 18px; }
.rm-end b { display: block; font-family: var(--font-display); font-size: 20px; }
.rm-end small { display: block; font-size: 15px; color: var(--muted); }
.rm-end.is-done .rm-end-pin { background: var(--grow); border-color: var(--grow); color: #fff; }

/* ---------- Checklist view ---------- */
.rm-list { display: grid; gap: 16px; }
.rm-lsec { padding: 6px 0 4px; margin: 0; }
.rm-lhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--rule); }
.rm-lhead h3 { font-size: 18px; margin: 0; }
.rm-lhead h3 span { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.rm-lcount { font-size: 15px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rm-lrows { list-style: none; margin: 0; padding: 0; }
.rm-lrow { display: flex; align-items: center; border-bottom: 1px solid var(--rule); padding-left: 6px; }
.rm-lrow:last-child { border-bottom: 0; }
.rm-lrow .rm-open { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 14px 16px; border-radius: 0; }
.rm-lrow .rm-step-t { flex: 1 1 260px; }
.rm-lrow .rm-chev { color: var(--muted); }
.rm-lrow .rm-chev svg { width: 16px; height: 16px; }
.rm-lrow:hover { background: #FAFBF9; }
.rm-lrow.is-next .rm-step-t::after { content: "Next up"; margin-left: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--carbon); vertical-align: 1px; }
.rm-doing { font-weight: 700; color: var(--you); }
.rm-print-todo { display: none; }

.rm-finish { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; padding: 28px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.rm-finish h3 { font-size: 24px; margin: 0; }
.rm-finish .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.rm-finish .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.rm-after { margin-top: 8px; }
.rm-after .grid-2 { margin-top: 20px; }
.rm-fab { display: none; }

/* ---------- Step panel ---------- */
html.rm-locked { overflow: hidden; }
.rm-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
  display: flex; flex-direction: column; transform: translateX(104%); transition: transform 0.26s var(--ease);
  box-shadow: -18px 0 50px rgba(19, 32, 59, 0.18);
}
.rm-drawer:not([open]) { display: none; }
.rm-drawer.is-in { transform: none; }
.rm-drawer::backdrop { background: rgba(19, 32, 59, 0.32); }
.rm-d-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--rule); }
.rm-d-eyebrow { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-d-count { font-size: 14.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-d-x { width: 36px; height: 36px; border: 0; border-radius: 8px; background: var(--paper); display: grid; place-items: center; cursor: pointer; }
.rm-d-x svg { width: 16px; height: 16px; }
.rm-d-x:hover { background: var(--rule); }
.rm-d-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 28px; }
.rm-d-body h2 { font-size: 26px; line-height: 1.2; margin: 0 0 10px; outline: 0; }
.rm-d-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 18px; font-size: 15.5px; color: var(--ink-2); }
.rm-d-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 20px; }
.rm-d-status span { display: block; text-align: center; padding: 9px 4px; font-size: 15.5px; }
.rm-d-status input:checked + .rm-st-done { background: var(--grow); border-color: var(--grow); }
.rm-d-status input:checked + .rm-st-doing { background: var(--hivis); border-color: var(--ink); color: var(--ink); }
.rm-d-why { font-size: 16px; line-height: 1.65; color: var(--ink); }
.rm-d-sec { margin-top: 24px; }
.rm-d-sh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.rm-d-sh h3 { font-family: var(--font-body); font-size: 16px; font-weight: 700; margin: 0; }
.rm-d-sh > span { font-size: 14.5px; color: var(--muted); }
.rm-d-sh > .rm-real { color: var(--carbon); }
.rm-todo { list-style: none; margin: 0; padding: 0; }
.rm-todo li { border-bottom: 1px solid var(--rule); }
.rm-todo label { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; font-size: 15px; line-height: 1.45; cursor: pointer; }
.rm-todo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rm-todo-box { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--ink-2); border-radius: 5px; display: grid; place-items: center; color: transparent; background: var(--sheet); }
.rm-todo-box svg { width: 13px; height: 13px; }
.rm-todo input:checked + .rm-todo-box { background: var(--grow); border-color: var(--grow); color: #fff; }
.rm-todo input:checked ~ span:last-child { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule-strong); }
.rm-todo input:focus-visible + .rm-todo-box { outline: 2px solid var(--carbon); outline-offset: 2px; }
.rm-watch { margin: 22px 0 0; font-size: 15.5px; color: var(--ink-2); }
.rm-data .rm-d-sh { border-bottom-width: 1px; border-bottom-color: var(--rule-strong); }
.rm-data .sp-list li { font-size: 16.5px; padding: 10px 0; }
.rm-data .sp-list li:last-child { border-bottom: 0; }
.rm-dl-total { font-weight: 700; border-top: 2px solid var(--ink); }
.rm-data .hbars { margin-top: 10px; }
.rm-data .check-list { margin-top: 12px; font-size: 15px; }
.rm-data .side-list { margin-top: 12px; }
.rm-data-big { font-size: 18px; font-weight: 700; margin: 12px 0 4px; }
.rm-data-note { font-size: 16px; color: var(--ink-2); margin: 8px 0 0; }
.rm-data-src { font-size: 14.5px; color: var(--muted); margin: 12px 0 0; }
.rm-data-src .link { font-size: 15px; }
.rm-pits { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.rm-pits li { display: grid; gap: 2px; padding: 10px 0 0; border-top: 1px solid var(--rule); font-size: 16.5px; line-height: 1.45; }
.rm-pits li:first-child { border-top: 0; }
.rm-pits em { font-style: normal; font-size: 15px; color: var(--carbon); }
.rm-links { list-style: none; margin: 0; padding: 0; }
.rm-links a { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 16.5px; font-weight: 600; }
.rm-links a:hover .rm-lk-t { text-decoration: underline; text-underline-offset: 3px; }
.rm-links svg { flex: none; width: 15px; height: 15px; color: var(--muted); margin-left: auto; }
.rm-lk-t { min-width: 0; }
.rm-lk-kind { flex: none; width: 66px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rm-lk-official { color: var(--grow); }
.rm-lk-humdays { color: var(--carbon); }
.rm-note { height: auto; min-height: 84px; padding: 10px 12px; margin-top: 10px; resize: vertical; line-height: 1.5; }
.rm-ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 14px 16px; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); text-decoration: none; font-weight: 700; font-size: 16.5px; }
.rm-ask:hover { border-color: var(--ink); }
.rm-ask svg { flex: none; width: 16px; height: 16px; }
.rm-d-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); background: var(--sheet); }
.rm-d-foot > :last-child { flex: 1; }

/* ---------- Roadmaps list page: plain tiles, roadmap.sh-style ---------- */
.rml-head { padding: 64px 0 8px; text-align: center; }
.rml-head h1 { font-size: 40px; }
.rml-head .lede { margin: 16px auto 0; }
/* Filter row: search, sector, country */
.rml-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; padding: 14px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; }
.rml-q { position: relative; flex: 1 1 260px; }
.rml-q svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.rml-q .input { height: 44px; padding-left: 40px; border-radius: 99px; font-size: 16px; }
.rml-cat { width: auto; min-width: 220px; height: 44px; border-radius: 99px; padding-left: 16px; font-size: 16px; }
.rml-countries { flex-wrap: nowrap; }
.rml-countries .chip { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; }
.rml-chip-n { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rml-countries .chip[aria-pressed="true"] .rml-chip-n { color: var(--hivis); }
.rml-countries .chip:disabled { opacity: 0.45; cursor: default; }
.rml-countries .chip:disabled:hover { border-color: var(--rule-strong); }
.rml-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border: 1.5px dashed var(--rule-strong); border-radius: 10px; }
.rml-empty p { margin: 0; font-weight: 600; }
.rml-none { grid-column: 1 / -1; margin: 0; }
@media (max-width: 900px) {
  .rml-countries { flex-wrap: wrap; }
  .rml-cat { flex: 1 1 200px; }
}
@media (max-width: 560px) {
  .rml-filters { padding: 12px; gap: 10px; }
  .rml-q, .rml-cat { flex-basis: 100%; }
  .rml-countries { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
  .rml-countries .chip { height: 40px; padding: 0 13px; flex: none; }
  .rml-tile.rml-odds b { white-space: normal; }
}
.rml-sec { padding: 40px 0 8px; }
.rml-sec + .rml-sec { padding-top: 48px; }
.rml-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.rml-sec-h h2 { font-family: var(--font-body); font-size: 19px; letter-spacing: -0.01em; }
.rml-sec-h h2::before { content: none !important; }
.rml-sec-h span { font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rml-sec-sub { margin: -8px 0 18px; font-size: 16px; color: var(--ink-2); }
.rml-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* One-line tiles, about 54px tall like roadmap.sh: the trade on the left, the details small on the right */
.rml-tile {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 16px 12px 18px;
  background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: 10px; color: var(--ink); text-decoration: none; text-align: left;
  font: inherit; cursor: pointer; overflow: hidden; transition: border-color 0.12s ease;
}
.rml-tile:hover { border-color: var(--ink); }
.rml-tile b { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rml-tile small { flex: none; font-size: 14.5px; color: var(--muted); white-space: nowrap; }
/* A roadmap you've started: the share done, and a thin green line along the bottom */
.rml-pct { font-weight: 700; color: var(--grow); font-variant-numeric: tabular-nums; }
.rml-tile .rml-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rule); }
.rml-tile .rml-bar i { display: block; height: 100%; background: var(--grow); }
/* The one highlighted tile */
.rml-tile.rml-odds { background: var(--hivis); border-color: var(--ink); }
.rml-tile.rml-odds:hover { background: var(--hivis-hover); }
.rml-tile.rml-odds svg { flex: none; width: 22px; height: 22px; }
.rml-tile.rml-odds small { color: var(--ink-2); font-weight: 600; }
/* On the way: the same tile, dashed, with a vote count you can add to */
.rml-tile.rml-soon { background: transparent; border-style: dashed; padding-right: 10px; }
.rml-vote { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1.5px solid var(--rule-strong); border-radius: 99px; background: var(--sheet); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rml-vote svg { width: 11px; height: 11px; }
.rml-tile.rml-soon:hover .rml-vote { border-color: var(--ink); }
.rml-tile.rml-soon[aria-pressed="true"] { border-style: solid; border-color: var(--ink); background: var(--sheet); }
.rml-tile.rml-soon[aria-pressed="true"] .rml-vote { background: var(--ink); border-color: var(--ink); color: var(--hivis); }
.rml-sec:last-child { padding-bottom: 80px; }
@media (max-width: 900px) { .rml-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .rml-tiles { grid-template-columns: minmax(0, 1fr); }
  .rml-head { padding-top: 40px; }
  .rml-head h1 { font-size: 30px; }
}
/* The route in miniature: one stop per stage */

@media (max-width: 1100px) {
  .rm-grid { grid-template-columns: minmax(0, 1fr); }
  .rm-aside { display: none; }
  .rm-bar-prog .rm-track { width: 90px; }
}
@media (max-width: 900px) {
  .rm-head-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rm-prog { max-width: 420px; }
  .rm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .rm-search { display: none; }
}
@media (max-width: 720px) {
  .rm-bar { position: static; background: var(--paper); }
  .rm-bar-in { flex-wrap: wrap; gap: 10px; padding-block: 12px; }
  .rm-bar-prog, .rm-bar [data-next] { display: none; }
  .rm-bar .tabs { flex: 1 1 100%; } .rm-bar .tab { flex: 1; }
  .rm-filter { flex: 1 1 100%; } .rm-filter label { flex: 1; } .rm-filter span { text-align: center; display: block; white-space: nowrap; }
  .rm-meta { gap: 6px 16px; } .rm-meta li + li::before { content: none; }
  .rm-facts dd { font-size: 18px; }
  .rm-facts > div { padding-right: 10px; }
  .rm-grid { padding-top: 20px; }
  .rm-warn { margin-bottom: 28px; }
  /* Route runs down the left edge on phones */
  .rm-stage::before { left: 17px; }
  .rm-node { width: 100%; text-align: left; padding: 12px 16px 14px; box-shadow: 0 3px 0 var(--ink); }
  .rm-node-t { font-size: 19px; }
  .rm-node .rm-track { margin: 0; }
  .rm-stamp { right: 8px; top: -12px; }
  .rm-node-blurb { margin: 10px 0 16px 36px; padding: 0; text-align: left; }
  .rm-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-left: 36px; }
  .rm-step:nth-child(n)::after { left: -19.5px; right: auto; width: 18px; }
  .rm-end { flex-direction: row; gap: 14px; text-align: left; }
  .rm-end-pin { margin: 0; }
  .rm-lhead { padding: 12px 16px; }
  .rm-lrow { padding-left: 0; }
  .rm-lrow .rm-chev { display: none; }
  .rm-finish { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .rm-fab {
    display: inline-flex; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    gap: 10px; padding: 0 18px 0 12px; min-height: 50px; border-radius: 99px; box-shadow: 0 8px 24px rgba(19, 32, 59, 0.28);
  }
  .rm-ring svg { display: block; }
  /* Step panel becomes a bottom sheet */
  .rm-drawer { inset: auto 0 0 0; width: 100%; height: auto; max-height: 90dvh; border-left: 0; border-radius: 16px 16px 0 0; transform: translateY(104%); }
  .rm-d-head { position: relative; padding-top: 20px; }
  .rm-d-head::before { content: ""; position: absolute; left: 50%; top: 7px; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: var(--rule-strong); }
  .rm-d-body { padding: 18px 18px 24px; }
  .rm-d-body h2 { font-size: 23px; }
  .rm-d-status span { font-size: 14.5px; padding: 9px 2px; }
  .rm-hide-s { display: none; }
}

/* Roadmap pages: everything at least 2px larger than the site default, and the grey dark enough to read on paper (4.5:1 or better) */
main.rm-page { --muted: #555D70; }
main.rm-page .crumbs { font-size: 15.5px; }
main.rm-page .chip { font-size: 16px; }
main.rm-page .small { font-size: 16px; }
main.rm-page .tag { font-size: 14px; }
main.rm-page .eyebrow { font-size: 14px; }
main.rm-page .key-hl { font-size: 15px; }
main.rm-page .btn { font-size: 16px; }
main.rm-page .btn-sm { font-size: 15px; }
main.rm-page .tab { font-size: 16.5px; }
main.rm-page .sp-need { font-size: 14px; }
main.rm-page .sp-list li { font-size: 16.5px; }
main.rm-page .sp-paper p { font-size: 16px; }
main.rm-page .hbar { font-size: 16.5px; }
main.rm-page .hbar-val { font-size: 15.5px; }
main.rm-page .check-list { font-size: 17px; }
main.rm-page .select { font-size: 16px; }
main.rm-page .mk-chip { font-size: 13px; }
main.rm-page .mk-lab { font-size: 12.5px; }
main.rm-page .iv-meta2 { font-size: 15px; }
main.rm-page .iv-by { font-size: 15.5px; }
main.rm-page .iv-by i { font-size: 13.5px; }
main.rm-page .iv-stat-sub { font-size: 15px; }
main.rm-page .verified { font-size: 14px; }
main.rm-page .note { font-size: 16px; }

@media print {
  .site-header, .site-footer, .nl-band, .rm-bar, .rm-aside, .rm-map, .rm-fab, .rm-drawer, .rm-prog, .rm-finish, .rm-after, .rm-facts-src { display: none !important; }
  .rm-list[hidden] { display: grid !important; }
  .rm-grid { display: block; padding: 0; }
  .rm-print-todo { display: block; margin: 0 0 10px 52px; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
  .rm-lsec { break-inside: avoid; }
}

/* [dashboards] Roadmaps on the member dashboard */
.rmd-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.rmd-sum > div { padding: 18px 20px; border-left: 1px solid var(--rule); }
.rmd-sum > div:first-child { border-left: 0; }
.rmd-sum .mk-lab { font-size: 12px; margin: 0 0 4px; }
.rmd-sum .mk-val { font-size: 22px; }
.rmd-prog { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--ink-2); }
.rmd-bar { flex: 1; max-width: 360px; height: 8px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.rmd-bar i { display: block; height: 100%; background: var(--grow); border-radius: inherit; }
.rmd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin: 18px 0; }
.rmd-h { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.rmd-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rmd-stages li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 14.5px; }
.rmd-stages li.is-here { background: var(--paper); font-weight: 700; }
.rmd-sn { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rule-strong); display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--sheet); }
.rmd-sn svg { width: 13px; height: 13px; }
.rmd-stages li.is-done .rmd-sn { background: var(--grow); border-color: var(--grow); color: #fff; }
.rmd-stages li.is-here .rmd-sn { background: var(--hivis); border-color: var(--ink); }
.rmd-sc { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rmd-plan { display: grid; gap: 12px; padding: 14px; border-radius: 12px; background: var(--paper); margin-bottom: 16px; }
.rmd-plan .input { background: var(--sheet); }
.rmd-remind { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.rmd-pace { margin: 0; font-size: 14px; color: var(--ink-2); }
.rmd-doing { margin: 0; padding-left: 18px; font-size: 14.5px; display: grid; gap: 4px; }
.rmd-note { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); background: #FFFBE3; border: 1px solid #EFE3A8; border-radius: 8px; padding: 10px 12px; }
@media (max-width: 720px) {
  .rmd-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rmd-sum > div:nth-child(3) { border-left: 0; }
  .rmd-sum > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .rmd-cols { grid-template-columns: minmax(0, 1fr); }
}

/* [dashboards] Roadmaps admin */
.rma-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 14px; }
.rma-bar .mk-search { flex: 1 1 260px; max-width: 360px; }
.rma-bar .select { width: auto; min-width: 170px; }
.rma-more { position: relative; display: inline-block; }
.rma-more > summary { list-style: none; cursor: pointer; }
.rma-more > summary::-webkit-details-marker { display: none; }
.rma-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; padding: 6px; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: 0 16px 40px -18px rgba(19, 32, 59, 0.45); display: grid; }
.rma-menu button { text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 8px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.rma-menu button:hover { background: var(--paper); }
.rma-menu button.is-danger { color: var(--closed); }
.app-act .rma-more { margin-left: 6px; }
.rma-ed .app-sec-head p { margin: 4px 0 0; }
.rma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rma-grid .field.wide { grid-column: 1 / -1; }
.rma-req { color: var(--closed); }
.rma-stage { background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; padding: 18px 20px 20px; margin-bottom: 16px; }
.rma-stage-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rma-badge { display: inline-block; padding: 4px 12px; border-radius: 99px; background: var(--hivis); border: 1.5px solid var(--ink); font-size: 13px; font-weight: 700; }
.rma-tools { display: inline-flex; gap: 4px; margin-left: auto; }
.rma-tools button { width: 32px; height: 32px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--sheet); font: inherit; font-size: 15px; cursor: pointer; }
.rma-tools button:hover:not(:disabled) { border-color: var(--ink); }
.rma-tools button:disabled { opacity: 0.35; cursor: default; }
.rma-steps { display: grid; gap: 8px; margin: 16px 0 12px; }
.rma-step { border: 1px solid var(--rule-strong); border-radius: 12px; background: #FAFBF9; }
.rma-step[open] { background: var(--sheet); border-color: var(--ink); }
.rma-step > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.rma-step > summary::-webkit-details-marker { display: none; }
.rma-step > summary b { font-size: 15px; }
.rma-num { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rma-step > .app-form { padding: 4px 14px 16px; }
.rma-faq { display: grid; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
.rma-faq .btn { justify-self: start; }
.rma-errors { margin: 16px 0 0; padding: 14px 18px; border-radius: 12px; background: #FBE4DF; color: #7A2318; border: 1px solid #F0C3B9; }
.rma-errors ul { margin: 8px 0 0; padding-left: 18px; }
.rma-errors a { color: inherit; font-weight: 600; }
.rma-ed [aria-invalid="true"] { border-color: var(--closed); box-shadow: 0 0 0 2px #FBE4DF; }
.rma-foot { position: sticky; bottom: 12px; z-index: 10; margin-top: 24px; }
.mk-val.down { color: var(--closed); }
@media (max-width: 720px) { .rma-grid { grid-template-columns: minmax(0, 1fr); } .rma-bar .select { flex: 1 1 45%; } }
.rma-foot.pub-bar { box-shadow: 0 12px 30px -16px rgba(19, 32, 59, 0.45); }

/* ---------- Brief: emails ---------- */
/* emails.html (X-G1): one look for every email HumDays sends. The email frame is 600px, the width mail apps expect;
   inside it, the dialog type (AzoSans, 24px heading, 15.5px body) and the existing button, chip, box and sage tones. */
.em-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.em-toc { display: grid; gap: 16px; margin-top: 28px; }
.em-toc .eyebrow { margin-bottom: 8px; }
.em-toc .pm-toc { margin: 0; }
.em-group { padding: 48px 0 0; }
.em-group:last-child { padding-bottom: 72px; }
.em-group > h2 { font-size: 25px; line-height: 1.18; margin-bottom: 8px; }
.em-item { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 24px 48px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.em-group > .em-item:first-child { padding-top: 0; }
.em-about { min-width: 0; }
.em-about h2, .em-about h3 { font-family: var(--font-body); font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 12px; }
.em-about .eyebrow { margin-bottom: 6px; }
.em-about .mk-chips { margin-bottom: 14px; }
.em-dl { margin: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; }
.em-dl dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.em-dl dd { margin: 2px 0 0; color: var(--ink-2); }
.em-vers { display: grid; gap: 8px; margin-top: 18px; }
.em-parts { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.em-parts b { display: block; color: var(--ink); }
.em-col { min-width: 0; width: 100%; max-width: 600px; }
.em-inbox { margin-bottom: 12px; padding: 12px 16px; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 12px; }
.em-inbox p { margin: 0; }
.em-inbox-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--muted); }
.em-inbox-meta b { color: var(--ink-2); }
.em-inbox p.em-inbox-subj { margin-top: 4px; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.em-inbox p.em-inbox-pre { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em { width: 100%; background: var(--sheet); border: 1px solid #D3D8CE; border-radius: 16px; box-shadow: 0 1px 2px rgba(19, 32, 59, 0.05); overflow: hidden; color: var(--ink); font-family: var(--font-body); }
.em-head { padding: 18px 28px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.em-head .logo { color: var(--ink); }
.em-body { padding: 28px; }
.em-body p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.em-body p.em-h { margin: 0 0 14px; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.em-body p.em-sub { margin-top: -8px; font-size: 14px; color: var(--muted); }
.em-body p.em-grey { font-size: 14px; color: var(--muted); }
.em-banner { margin: 0 0 20px; padding: 12px 14px; border-radius: 12px; background: var(--sage); border: 1px solid var(--sage-line); font-size: 14px; line-height: 1.5; color: var(--ink); }
.em-facts { margin: 4px 0 18px; border-radius: 12px; box-shadow: none; }
.em-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 16px; }
.em-facts > div + div { border-top: 1px solid var(--rule); }
.em-facts span { flex: none; font-size: 13.5px; color: var(--muted); }
.em-facts b { font-size: 15px; line-height: 1.4; text-align: right; color: var(--ink); overflow-wrap: anywhere; }
.em-facts b small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.em-facts .sc-verdict { height: 26px; font-size: 13px; }
.em-quote { margin: 4px 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--sage); border: 1px solid var(--sage-line); }
.em-body .em-quote p { margin: 0; color: var(--ink); }
.em-quote cite { display: block; margin-top: 8px; font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--muted); }
.em-list { margin: 0 0 16px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.em-code { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; white-space: nowrap; }
.em-cta { margin-top: 22px; }
.em-body p.em-copy { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.em-body p.em-after { margin: 12px 0 0; font-size: 14.5px; }
.em-body p.em-links { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14.5px; }
.em-links span { color: var(--rule-strong); }
.em-foot { padding: 18px 28px 22px; border-top: 1px solid var(--rule); background: var(--paper); }
.em-foot p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.em-foot p:last-child { margin-bottom: 0; }
.em-foot a { color: var(--ink-2); }
.em-ph { border-bottom: 1px dashed var(--rule-strong); }
.em-fv + .em-fv { margin-top: 18px; }
.em-fv .eyebrow { margin-bottom: 8px; }
.em-qs { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; line-height: 1.4; }
.em-qs span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.em-stars { display: flex; gap: 8px; margin: 0 0 16px; }
.em-stars a { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid #D3D8CE; border-radius: 10px; background: var(--sheet); color: #D69E2E; }
.em-stars a:hover { border-color: var(--ink-2); }
.em-stars svg { width: 24px; height: 24px; }
.em-mk { margin: 0 0 16px; box-shadow: none; }
.em-mk:hover { box-shadow: none; }
.em-mk .mk-chips { margin-bottom: 8px; }
.em-mk .mk-title { margin: 0; font-size: 17px; }
.em-mk .mk-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.em-mk .mk-fig:nth-child(n) { border-left: 0; }
.em-mk .mk-fig + .mk-fig { border-left: 1px solid var(--rule); }
/* The Sunday Till issue */
.em-mast { padding: 22px 28px 16px; background: var(--paper); border-bottom: 1px dashed var(--rule-strong); }
.em-mast p { margin: 0; }
.em-mast-t { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.em-mast p.em-mast-s { margin-top: 4px; font-size: 13px; color: var(--muted); }
.em-spon { margin: 0 0 24px; padding: 14px 16px; border: 1.5px solid var(--rule-strong); border-radius: 12px; }
.em-spon .mk-chip { margin-bottom: 8px; }
.em-spon p { margin: 0 0 6px; font-size: 14.5px; }
.em-spon p b { color: var(--ink); }
.em-body .nl-issue-fig { margin: 0 0 16px; }
.em-body .nl-issue-fig b { color: var(--money); }
.em-sec { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.em-body p.em-h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--ink); }
.em-week { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; }
.em-class { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.em-class li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.em-class .mk-chip { flex: none; height: 20px; font-size: 10px; }
/* Mail apps that block web fonts fall back to the stack the site already declares */
.em-fallback .em, .em-fallback .em * { font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Tahoma, Arial, sans-serif; }
@media (max-width: 1020px) {
  .em-item { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .em-head { padding: 16px 20px; }
  .em-body { padding: 22px 20px; }
  .em-foot { padding: 16px 20px 20px; }
  .em-mast { padding: 18px 20px 14px; }
  .em-cta .btn { width: 100%; white-space: normal; }
  .em-body p.em-h { font-size: 22px; }
  .em-facts > div { flex-direction: column; gap: 2px; }
  .em-facts b { text-align: left; }
  .em-class li { flex-direction: column; gap: 4px; }
}
.em-quote-h { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--money); }
.em-toc .pm-toc a { height: auto; min-height: 32px; padding-block: 5px; line-height: 1.3; }
/* ---------- Brief: admin ---------- */
/* Step-up states (P2-G3, P2-G50): the waiting check is numbered by its place in the list */
.stepup-checks li.is-next:nth-child(1)::before { content: "1"; }
.stepup-checks li.is-next:nth-child(2)::before { content: "2"; }
/* Overview (P8-G50): a fifth "Access open now" KPI, only while a grant is open */
@media (min-width: 901px) { .lb-kpis:has(> .lb-kpi:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) { .lb-kpis > .lb-kpi:nth-child(5) { grid-column: 1 / -1; border-left: 0; } }
/* Long admin status chips ("Paused while the numbers are re-checked") wrap on phones instead of running off the screen */
@media (max-width: 640px) { [data-page="admin"] .app-act .mk-chip { max-width: 100%; height: auto; min-height: 24px; padding-top: 4px; padding-bottom: 4px; white-space: normal; line-height: 1.3; } }
/* ---------- Brief: member and buyer area ---------- */
/* Admin acting as a member: the "greyed-out buttons" line under the banner shows on phones only (P8-G40) */
.act-phone-note { display: none; margin: 8px 4px 0; }
@media (max-width: 720px) { .act-phone-note { display: block; } }
/* Member threads on phones (X-G4): the list alone, or one conversation full width with "Back to conversations" */
.thread-back { display: none; }
@media (max-width: 760px) {
  .inbox:not(.is-open) > .thread { display: none; }
  .inbox.is-open > .inbox-list { display: none; }
  .thread-head .thread-back { display: flex; flex-basis: 100%; margin: 0 0 4px; }
}
/* ---------- Brief: public and site-wide pages ---------- */
/* Footer legal links (P8-G1): same size and colour as the rest of the footer note; "Cookie settings" is a button drawn as a link */
.footer-legal a, .footer-legal button { color: inherit; font: inherit; }
.footer-legal button { padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; }
/* Newsletter (P2-G2): "Check your email to confirm" takes the form's place at its height; the error line sits under the field */
.hx-news-sent { margin: 0; font-size: 15.5px; line-height: 1.5; }
.hx-news-sent b { margin-right: 4px; }
.hx-news-err { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--closed); }
/* Report a question or an answer (P3b-G72): small muted text button */
.qa-report { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.qa-ans .qa-report { margin-left: 12px; }
span.qa-report { text-decoration: none; cursor: default; }
/* Cookie banner (P8-G1): sits over the page, never pushes it */
.cookie-bar { position: fixed; z-index: 150; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); display: flex; align-items: center; gap: 16px 20px; padding: 16px 18px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 18px 40px -22px rgba(19, 32, 59, 0.6); }
.cookie-bar p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cookie-btns { display: flex; gap: 10px; flex: none; }
.cookie-btns .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 720px) { .cookie-bar { flex-direction: column; align-items: stretch; } .cookie-btns > .btn { flex: 1 1 0; } }
/* CSV button lock and the locked Pro blocks on a city guide (P4-G1, P4-G2) */
.csv-btn svg { width: 15px; height: 15px; margin-left: 6px; }
.paywall.is-locked { position: relative; max-height: 260px; overflow: hidden; filter: blur(5px); opacity: 0.55; pointer-events: none; user-select: none; }
.paywall.is-locked + .paywall.is-locked { max-height: 120px; }
/* The lock wall inside a guide's reading column keeps its own heading look (no section rule, no top margin) */
.prose .gate-wall h2 { margin: 0 0 8px; font-size: 24px; }
.prose .gate-wall h2::before { display: none; }
.prose .gate-wall > p { max-width: 34em; }
/* Job post form (P7-G4): pay from, pay up to and paid by in one row, stacked on phones like the other form rows */
.bk-gift-grid.jp-pay { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .bk-gift-grid.jp-pay { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Brief: owner dashboard part A ---------- */
/* Report: the first read still running keeps the space of the month tabs and cover (hard rule 9) */
.rp-wait { min-height: 380px; display: grid; place-content: center; }
/* Owner inbox on phones (X-G4): the list, or one conversation full width with "Back" */
.thread-back { display: none; }
#dep-all, .thread-back { border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px; cursor: pointer; }
@media (max-width: 760px) {
  .inbox:not(.is-open) .thread { display: none; }
  .inbox:not(.is-open) .inbox-list { border-bottom: 0; }
  .inbox:not(.is-open) .inbox-list button[aria-pressed="true"] { background: transparent; box-shadow: none; }
  .inbox.is-open .inbox-list { display: none; }
  .inbox.is-open .thread-back { display: block; flex-basis: 100%; text-align: left; }
}
/* The report as a PDF (P3-G24): A4, black on white, only the report */
.rp-print { display: none; }
@media print {
  @page { size: A4; margin: 14mm; }
  body.rp-printing { background: #fff; color: #000; }
  body.rp-printing #hd-header, body.rp-printing #hd-footer, body.rp-printing .app-side, body.rp-printing .toast, body.rp-printing #app-main > :not(#v-report) { display: none !important; }
  body.rp-printing #v-report .rp-months, body.rp-printing #v-report .btn-row, body.rp-printing #v-report .rp-foot, body.rp-printing #v-report .table-toggle, body.rp-printing #v-report .chart-key { display: none !important; }
  body.rp-printing .app { display: block; padding: 0; }
  body.rp-printing * { box-shadow: none !important; }
  body.rp-printing .rp-print { display: block; margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #000; }
  body.rp-printing .rp-print ~ .rp-print { margin: 18px 0 0; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
  body.rp-printing .rp-cover, body.rp-printing .rp-tile, body.rp-printing .cr, body.rp-printing .rp-fix, body.rp-printing .cg, body.rp-printing .cg-n, body.rp-printing .note { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; }
  body.rp-printing .rp-cover { grid-template-columns: minmax(0, 1fr) 190px; padding: 20px; }
  body.rp-printing .rp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.rp-printing .hl { background: none; }
  body.rp-printing .rp-ring { background: conic-gradient(#000 calc(var(--p) * 1%), #ccc 0); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.rp-printing .rp-ring::before { background: #fff; }
  body.rp-printing .app-sec, body.rp-printing .rp-cover, body.rp-printing .cr, body.rp-printing .rp-tiles, body.rp-printing .rp-fix { break-inside: avoid; }
  body.rp-printing .chart svg path[fill] { fill: #000; }
}
/* ---------- Brief: business and market pages ---------- */
/* A market card with fewer figures (no money kept without an accounting connection; anonymous pages show two) keeps its columns even */
@media (min-width: 561px) {
  .mk-figs:has(> .mk-fig:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-figs:has(> .mk-fig:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Buttons that can't be used in this state (paused listing, waiting for Stripe): the app's disabled look on public pages */
.deal-actions .btn:disabled, .dr-foot .btn:disabled, .dt-bar .btn:disabled, .bk-submit:disabled { opacity: 0.45; cursor: not-allowed; }
/* The booking dialog swaps its parts per state */
.bk-d-inner > [hidden] { display: none; }
/* Home leaderboard: three KPIs when the money-kept one is left out (fewer than 10 accounting connections) */
@media (min-width: 901px) { .lb-kpis:has(> .lb-kpi:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- Brief: owner dashboard part B ---------- */
/* "Before your card shows": a line not yet true shows an empty box instead of the tick */
.adv-checks li.is-no { color: var(--ink-2); }
.adv-checks li.is-no::before { -webkit-mask: none; mask: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
/* The buyer strip with "Watching" left out (fewer than 5 saves) */
.bj.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .bj.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bj.is-4 li:last-child { grid-column: auto; border-left: 1px solid var(--rule); } }
/* Admin acting as the owner: the one-line reminder under the banner shows on phones only */
.adm-phone { display: none; }
@media (max-width: 720px) { .adm-phone { display: block; } }
/* The data room summary keeps its height while it is being prepared (hard rule 9) */
.dr-sum { min-height: 200px; }
/* Escrow.com steps inside a row: the step numbers keep their size when the labels wrap on phones */
.app-row .dr-steps b { flex: none; }

/* Just started: the sponsored slot below the follow card (lower on phones). A plain card; the label says what it is. */
.sp-spon { display: grid; gap: 6px; padding: 18px 20px; }
.sp-spon .sp-spon-k { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sp-spon h2 { font-size: 18px; line-height: 1.3; }
.sp-spon p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sp-spon .link { font-size: 14px; font-weight: 700; }

/* Loading placeholders (components/Skeleton.tsx): soft shapes in the page's own layout while its part loads */
.skel { display: block; background: var(--rule); border-radius: 8px; opacity: 0.6; animation: skel-pulse 1.4s ease-in-out infinite; }
.skel-stack { display: grid; gap: 12px; }
.skel-card { display: grid; gap: 12px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
.skel-panel { max-width: 640px; margin: 32px auto; }
.app-side .skel-stack { padding: 18px; }
@keyframes skel-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
/* A business page before its reader's own copy arrives: the deeper sections wait, blurred, as when locked */
.dt-wait .dt-grid > div:first-child > .dt-section:not(.dt-about):not(#pm):not(#qa):not(#jobs):not(#advice) { max-height: 260px; overflow: hidden; filter: blur(5px); opacity: 0.55; pointer-events: none; user-select: none; }