/* Probily marketing landing — Bureau (alpha587).
 *
 * The marketing site is the «outside the gate» surface — brand
 * accent is amber, not green. Green stays reserved for the
 * /login + /signup pages per BUREAU-ROLLOUT.md §2.2.
 *
 * Sister files:
 *   - tokens-bureau.css   — tokens + reset
 *   - cabinet-login.css   — login/signup
 *   - cabinet-dashboard.css — dashboard
 *
 * tokens-bureau.css sets `body { overflow: auto }` and the app uses
 * `.app` for the dashboard grid. Marketing is plain document flow —
 * we reset that here.
 */

html, body { height: auto; overflow: visible; }
body {
  overflow-x: hidden;
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* The whole page sits over a soft amber bloom from the top. */
.bg-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(640px 420px at 50% -4%, color-mix(in oklch, var(--brand-500) 11%, transparent), transparent 70%);
}
.lp { position: relative; z-index: 1; }
.wrap { max-width: var(--pub-w-wide); margin: 0 auto; padding: 0 var(--pub-gutter); }

/* ── Sticky top bar ──────────────────────────────────────────── */
/* alpha713 — unified top-strip across landing/login/cabinet.
   Pre-alpha713 landing had a 58 px sticky glass bar (.lp-top with
   backdrop-filter blur), cabinet had a 40 px solid dark bar
   (.topbar, see tokens-bureau.css:158). Result: «попадаем в другой
   сайт» on the navigation between surfaces.
   alpha713: landing .lp-top now matches .topbar visually — same
   height (40 px), same solid var(--bg-0) background, same
   border-bottom. Sticky positioning kept for landing's long scroll. */
.lp-top {
  position: sticky; top: 0; z-index: 30;
  height: 40px;
  display: flex; align-items: center;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border-subtle);
}
/* alpha713.1 — override the base .wrap max-width:1080px so the
   top-strip extends edge-to-edge and the brandmark sits at x=14
   like the cabinet/login topbar (was rendering at x≈189 — wrap
   was centered inside 1440 viewport at 1080 max-width). */
.lp-top .wrap { display: flex; align-items: center; gap: 14px; width: 100%; max-width: none; margin: 0; padding: 0 14px; }
.brandmark { display: flex; align-items: center; gap: 9px; }
.brandmark .logo-img { display: block; height: 18px; width: auto; }
.beta-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--brand-500);
  border: 1px solid color-mix(in oklch, var(--brand-500) 32%, transparent);
  background: color-mix(in oklch, var(--brand-500) 9%, transparent);
  padding: 3px 8px; border-radius: 999px;
}
.beta-chip .d { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-500); }
.lp-top .sp { flex: 1; }
.navlink {
  font-size: var(--pub-type-body); color: var(--text-tertiary); text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}
.navlink:hover { color: var(--text-primary); }

.btn-amber {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--r-sm);
  background: var(--brand-500); color: var(--gray-1000);
  font-size: var(--pub-type-body); font-weight: 600; cursor: pointer; border: 0;
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn-amber:hover { background: var(--brand-400); }
.btn-amber:active { transform: translateY(1px); }
.btn-amber.lg { height: 40px; padding: 0 20px; font-size: var(--pub-type-body); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--border-default);
  color: var(--text-secondary); font-size: var(--pub-type-body); cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-1); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost.lg { height: 40px; padding: 0 20px; font-size: var(--pub-type-body); }

/* PASS 1.3 §9 — the shared action language is Geist sans, no underline, on
   EVERY page. These buttons previously omitted font-family (so they inherited
   the serif body font of the old reading shell) and lost their
   `text-decoration:none` to a higher-specificity prose-link underline. Keeping
   the component self-contained means a primary/secondary action never renders
   as a serif underlined link (product hero + CTAs were the outlier).
   The public document family now underlines prose links via `.pub-doc a`,
   which cannot reach a button because buttons never sit inside prose. */
.btn-amber, .btn-ghost { font-family: var(--font-sans); }
a.btn-amber, a.btn-ghost { text-decoration: none; }

/* ── Hero ──────────────────────────────────────────────────────
   alpha735 — rebuilt as 2-column (text left, anomalous-matter
   figure right) per owner: «текст оставил бы слева в 2 строчки,
   анимацию сделал бы как в логине крупнее и по другую сторону».
   Pre-alpha735 was a single centered column with masked #art.
*/
.hero { padding-top: var(--pub-hero-top); padding-bottom: var(--pub-hero-bottom); position: relative; }
.hero .wrap.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--pub-gap-split);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-copy { min-width: 0; }
.hero-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 560px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(165deg,
    color-mix(in oklch, var(--brand-500) 5%, var(--bg-1)) 0%,
    var(--bg-0) 65%);
  border: 1px solid var(--border-subtle);
}
.hero-art #art {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0.78;
  pointer-events: auto;
}
.hero-art #art canvas { display: block; }
.hero-art .stage-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 50%,
    color-mix(in oklch, var(--brand-500) 14%, transparent),
    transparent 70%);
}
.hero-art .stage-grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.35;
  background-image:
    linear-gradient(to right, color-mix(in oklch, white 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, white 6%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 35%, transparent 90%);
          mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 35%, transparent 90%);
}

.hero .kick {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px solid var(--border-default); background: var(--bg-1);
  padding: 5px 11px; border-radius: 999px;
}
.hero .kick .d {
  width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 22%, transparent);
}
/* Scale, weight and tracking now come from THE public page heading rule
   below (search "THE public page heading"). Only the balancing stays here. */
.hero h1 { text-wrap: balance; }
.hero h1 .am { color: var(--brand-500); }
.hero .sub {
  font-family: var(--font-mono);
  font-size: var(--pub-type-body); line-height: var(--pub-lh-body); color: var(--text-tertiary);
  letter-spacing: 0.01em;
  max-width: 46ch; margin: 22px 0 0;
}
.hero .sub b {
  color: var(--text-secondary); font-weight: 500;
  border-bottom: 1px dotted color-mix(in oklch, var(--brand-500) 45%, transparent);
}

/* alpha735 — Bureau-style hero search. Smaller, tighter, mono-only,
   with a left-anchored magnifier icon and inline amber CTA chip. */
.cta-input.bureau {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 520px; margin: 28px 0 0;
  background: var(--bg-1); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); padding: 5px 5px 5px 12px;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.cta-input.bureau:hover { border-color: var(--border-strong); background: var(--bg-2); }
.cta-input.bureau:focus-within {
  border-color: color-mix(in oklch, var(--brand-500) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand-500) 14%, transparent);
  background: var(--bg-1);
}
.cta-input.bureau svg { color: var(--text-disabled); flex: none; }
.cta-input.bureau:focus-within svg { color: var(--brand-500); }
.cta-input.bureau input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--pub-type-body); letter-spacing: 0.01em;
  min-width: 0; height: 30px;
}
.cta-input.bureau input::placeholder {
  color: var(--text-disabled);
  font-family: var(--font-mono); font-size: var(--pub-type-body);
}
.cta-input.bureau .btn-amber.sm {
  height: 28px; padding: 0 13px; flex: none;
  font-size: var(--pub-type-body); letter-spacing: 0.04em;
  border-radius: var(--r-xs);
  gap: 5px;
}

.cta-note {
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  color: var(--text-tertiary); margin-top: 12px;
  letter-spacing: 0.02em;
}
.cta-note b { color: var(--text-secondary); font-weight: 500; }

.cta-alt {
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  color: var(--text-tertiary); margin-top: 6px;
}
.cta-alt a {
  color: var(--brand-500); text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklch, var(--brand-500) 50%, transparent);
  transition: border-color var(--dur-2) var(--ease-out);
}
.cta-alt a:hover { border-bottom-color: var(--brand-500); }

/* Hero collapse on narrower viewports — text above, art below. */
@media (max-width: 920px) {
  .hero .wrap.hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { max-height: 420px; }
}

/* ── Foundations intro + the pillar shape ────────────────────── */
.foundations { text-align: center; padding-top: 30px; padding-bottom: 8px; }
.sec-kick {
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-500);
}
.foundations h2 {
  font-size: var(--pub-type-section); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text-primary);
  margin: 12px 0 0;
}
.foundations p {
  font-family: var(--font-serif); font-size: var(--pub-type-body);
  color: var(--text-tertiary);
  margin: 12px auto 0; max-width: 48ch; line-height: var(--pub-lh-body);
}

.pillar { padding: 78px 0; }
.pillar.band {
  background: var(--bg-1);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.pillar-head { text-align: center; }
.pnum {
  display: inline-block;
  font-family: var(--font-sans); font-size: var(--pub-type-display); font-weight: 700;
  line-height: var(--pub-lh-tight); letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.4px color-mix(in oklch, var(--brand-500) 48%, transparent);
}
.pkick {
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brand-500); margin-top: 12px;
}
.pillar-head h2 {
  font-size: var(--pub-type-section); font-weight: 600;
  letter-spacing: -0.022em; color: var(--text-primary);
  margin: 11px auto 0; max-width: 20ch; line-height: var(--pub-lh-snug);
}
.pillar-lead {
  font-family: var(--font-serif); font-size: var(--pub-type-body); line-height: var(--pub-lh-body);
  color: var(--text-secondary);
  margin: 16px auto 0; max-width: 58ch; text-align: center;
}
.pillar-lead b { color: var(--text-primary); font-weight: 500; }
.pillar-visual { margin-top: 40px; }

/* ── Pillar 1 · source catalogue ──────────────────────────────── */
.srcgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; align-items: start;
}
.srcgroup {
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); padding: 15px 16px;
}
.pillar.band .srcgroup { background: var(--bg-2); }
.srcgroup-h {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 9px;
  border-bottom: 1px solid var(--border-subtle);
}
.srcgroup-h .gi {
  width: 26px; height: 26px; border-radius: var(--r-sm); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--border-default);
  color: var(--brand-500);
}
.srcgroup-h .gn { font-size: var(--pub-type-meta); font-weight: 600; color: var(--text-primary); }
.srcrow { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.srcrow .sname { font-size: var(--pub-type-meta); color: var(--text-secondary); }
.srcrow .sst {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 999px;
}
.srcrow .sst .dt { width: 5px; height: 5px; border-radius: 50%; }
.sst.live { color: var(--success); background: color-mix(in oklch, var(--success) 10%, transparent); }
.sst.live .dt { background: var(--success); }
.sst.planned { color: var(--brand-500); background: color-mix(in oklch, var(--brand-500) 10%, transparent); }
.sst.planned .dt { background: var(--brand-500); }
/* honest «built but disabled right now» state — grey, not green (founder: show what's off, not just on) */
.sst.paused { color: var(--text-tertiary); background: color-mix(in oklch, var(--text-tertiary) 12%, transparent); }
.sst.paused .dt { background: var(--text-tertiary); }
/* «adapter built, wiring/keys in progress» — the trajectory, honestly (blue = info) */
.sst.building { color: var(--info, #6a9bcc); background: color-mix(in oklch, var(--info, #6a9bcc) 13%, transparent); }
.sst.building .dt { background: var(--info, #6a9bcc); }

/* databases surface — premium browser-window frame around the source catalogue */
.db-window { max-width: 1020px; margin: 6px auto 0; }
.db-legend { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; padding: 9px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-0); font-family: var(--font-mono); font-size: var(--pub-type-meta); }
.db-legend .db-leg { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.db-legend .db-leg .dt { width: 6px; height: 6px; border-radius: 50%; }
.db-leg .dt.s-live { background: var(--success); }
.db-leg .dt.s-building { background: var(--info, #6a9bcc); }
.db-leg .dt.s-planned { background: var(--brand-500); }
.db-leg .dt.s-paused { background: var(--text-tertiary); }
.db-legend .db-legcount { margin-left: auto; color: var(--text-tertiary); }
.db-window .srcgrid { padding: 18px 16px; gap: 14px 22px; }
.db-window .srcgroup { background: var(--bg-0); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 14px 15px; }
.db-window .srcgroup-h { margin-bottom: 8px; padding-bottom: 9px; }
/* signature treatment: each source carries a green «covered» check (branded, uniform — no status parade) */
.db-window .srcrow { padding: 5px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-window .srcrow::after { content: "✓"; color: var(--success); font-size: var(--pub-type-meta); flex: none; opacity: .9; }
@media (max-width: 820px) { .db-window .srcgrid { grid-template-columns: 1fr; } }
.srccap {
  text-align: center;
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  color: var(--text-tertiary); margin-top: 20px;
}
.srccap b { color: var(--text-secondary); }

/* ── Pillar 2 · Wikipedia panel ──────────────────────────────── */
.wikipanel {
  max-width: 760px; margin: 0 auto;
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); overflow: hidden;
}
.pillar.band .wikipanel { background: var(--bg-2); }
.wp-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.wp-stats .s {
  padding: 18px 16px; text-align: center;
  border-right: 1px solid var(--border-subtle);
}
.wp-stats .s:last-child { border-right: 0; }
.wp-stats .s .v {
  font-family: var(--font-mono); font-size: var(--pub-type-section);
  color: var(--text-primary);
}
.wp-stats .s .k {
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-tertiary); margin-top: 4px;
}
.wp-flow {
  display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: center; padding: 20px 18px;
  border-top: 1px solid var(--border-subtle);
}
.wp-node {
  background: var(--bg-0); border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm); padding: 11px 12px; text-align: center;
}
.pillar.band .wp-node { background: var(--bg-1); }
.wp-node .nl {
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-disabled);
}
.wp-node .nt {
  font-size: var(--pub-type-meta); color: var(--text-primary);
  margin-top: 5px; font-weight: 500;
}
.wp-node .ns {
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  color: var(--text-tertiary); margin-top: 3px;
}
.wp-node.amber {
  border-color: color-mix(in oklch, var(--brand-500) 35%, transparent);
  background: color-mix(in oklch, var(--brand-500) 7%, var(--bg-0));
}
.pillar.band .wp-node.amber {
  background: color-mix(in oklch, var(--brand-500) 7%, var(--bg-1));
}
.wp-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-disabled);
}
.wp-link {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-top: 1px solid var(--border-subtle);
  text-decoration: none; color: inherit;
  transition: background var(--dur-2) var(--ease-out);
}
.wp-link:hover { background: var(--bg-2); }
.wp-link .wi {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--brand-500) 12%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--brand-500) 24%, transparent);
  color: var(--brand-500);
}
.wp-link .wt {
  font-size: var(--pub-type-meta); color: var(--text-primary); font-weight: 500;
}
.wp-link .ws {
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  color: var(--text-tertiary); margin-top: 2px;
}
.wp-link .wgo {
  margin-left: auto; color: var(--brand-500); font-size: var(--pub-type-body);
}

/* ── Pillar 3 · verifiable report sample card ───────────────── */
.vrep {
  max-width: 720px; margin: 0 auto;
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: 17px 18px;
}
.pillar.band .vrep { background: var(--bg-2); }
.vrep-h {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 13px; border-bottom: 1px solid var(--border-subtle);
}
.vrep-fav {
  width: 17px; height: 17px;
  border-radius: 4px; flex: none;
  background: var(--bg-2);
  object-fit: contain;
  display: block;
}
.vrep-h .vt { font-size: var(--pub-type-meta); font-weight: 600; color: var(--text-primary); }
.vrep-h .vid {
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  color: var(--text-disabled); margin-left: auto;
}
.vrep-art {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--pub-type-body); line-height: var(--pub-lh-meta);
  color: var(--text-primary); margin-top: 13px;
}
.vrep-arch {
  display: flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 9px 11px; border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklch, var(--brand-500) 26%, transparent);
  background: color-mix(in oklch, var(--brand-500) 6%, transparent);
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  color: var(--text-secondary); flex-wrap: wrap;
}
.vrep-arch svg { color: var(--brand-500); flex: none; }
.vrep-arch .sep { color: var(--text-disabled); }
.vrep-arch a { color: var(--brand-500); text-decoration: none; }
.vrep-arch a:hover { text-decoration: underline; }
.vrep-cap {
  font-family: var(--font-serif); font-size: var(--pub-type-meta); line-height: var(--pub-lh-body);
  color: var(--text-tertiary); text-align: center;
  margin: 18px auto 0; max-width: 54ch;
}

/* The entity gallery row inside the sample report — alpha590. */
.vrep-gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.vcard {
  background: var(--bg-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.vcard:hover {
  border-color: color-mix(in oklch, var(--brand-500) 40%, transparent);
  transform: translateY(-2px);
}
.vcard-h { display: flex; align-items: center; gap: 9px; padding: 12px 12px 0; }
.vcard-av {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex: none;
  background: var(--bg-2);
  border: 1px solid var(--border-default);
}
.vcard-av.org { object-fit: contain; padding: 5px; }
.vcard-nm { min-width: 0; }
.vcard-name {
  font-size: var(--pub-type-body);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: var(--pub-lh-snug);
}
.vcard-role {
  font-family: var(--font-mono);
  font-size: var(--pub-type-meta); line-height: var(--pub-lh-meta);
  color: var(--text-tertiary);
  margin-top: 4px;
}
.vcard-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 10px 12px 12px;
}
.vchip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-2);
  color: var(--text-secondary);
}
.vchip .td { width: 6px; height: 6px; border-radius: 50%; }
.vchip .td.person { background: oklch(0.72 0.16 220); } /* entity-type colour for persons */
.vchip.q { color: var(--text-tertiary); }
.vcard-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
}
.vcard-foot svg { flex: none; }
.vcard-foot.ok {
  color: var(--success);
  background: color-mix(in oklch, var(--success) 8%, transparent);
}
.vcard-foot.warn {
  color: var(--warning);
  background: color-mix(in oklch, var(--warning) 11%, transparent);
}

/* «+11 more entities» line under the gallery */
.vrep-more {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px;
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  color: var(--text-tertiary);
}
.vrep-more .pl {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 21px; height: 21px;
  border-radius: 6px;
  border: 1px dashed color-mix(in oklch, var(--brand-500) 44%, transparent);
  color: var(--brand-500);
  font-size: var(--pub-type-meta);
  flex: none;
}
.vrep-more b { color: var(--text-secondary); font-weight: 500; }

/* ── Closing CTA ─────────────────────────────────────────────── */
.endcta { text-align: center; padding-top: var(--pub-sec-y); padding-bottom: var(--pub-sec-y); }
.endcta h2 { font-size: var(--pub-type-section); font-weight: 600; letter-spacing: -0.022em; color: var(--text-primary); margin: 0; }
.endcta p { font-family: var(--font-serif); font-size: var(--pub-type-body); color: var(--text-tertiary); margin: 14px 0 0; max-width: 58ch; margin-left: auto; margin-right: auto; }
.endcta .row { display: flex; gap: 10px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ── Footer ──────────────────────────────────────────────────── */
.lp-foot { border-top: 1px solid var(--border-subtle); padding-top: 32px; padding-bottom: 40px; }
.lp-foot .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lp-foot .logo-img { display: block; height: 14px; opacity: 0.78; }
.lp-foot .ftag { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); }
.lp-foot .sp { flex: 1; }
.lp-foot .fl { font-size: var(--pub-type-meta); color: var(--text-tertiary); text-decoration: none; transition: color var(--dur-2) var(--ease-out); }
.lp-foot .fl:hover { color: var(--text-primary); }
.lp-foot .fcopy { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-disabled); }

/* ── Mobile breakpoint ───────────────────────────────────────── */
@media (max-width: 820px) {
  /* gutter comes from the shared contract, not a third local value */
  .srcgrid, .wp-stats, .vrep-gal { grid-template-columns: 1fr; }
  .wp-flow { grid-template-columns: 1fr; gap: 8px; }
  .wp-arrow { transform: rotate(90deg); }
  .lp-top .navlink { display: none; }
  .pillar { padding: 56px 0; }


}

/* ══════════════════════════════════════════════════════════════════════════
   EDITORIAL / CONTENT PAGES (methodology · about · use-cases · guide)
   ──────────────────────────────────────────────────────────────────────────
   The landing (`marketing/index.html`) is the hero-driven surface above; the
   static content pages (`static/*.html`) are editorial. They share this ONE
   marketing stylesheet — same Bureau tokens, same amber, same Geist/serif —
   but need a document layout (sticky TOC, numbered sections, principle cards),
   not hero-art. These `.mkt-*` classes provide it and never collide with the
   landing's `.hero`/`.pillar`/`.wrap` space.

   A page declares which family it belongs to via `_base.html`'s
   `shell_variant` block: composed pages override it to empty and bring their
   own container, reference and legal pages inherit `pub-doc`.

   (Until the shared public shell landed, composed pages had to ESCAPE the
   layout: `.static-shell:has(.mkt)` / `:has(.hm)` / `main.static-shell:has(.cd)`
   existed only to shed a 720px serif reading column that the shell imposed on
   every page. Pages were fighting the shell instead of being served by it.
   `_base.html` no longer renders `.static-shell`, so those three rules are
   gone — see public-site.css.)
   ══════════════════════════════════════════════════════════════════════════ */

.mkt { color: var(--text-primary); font-family: var(--font-sans); font-size: var(--pub-type-body); line-height: var(--pub-lh-body); }
/* THE public container. Values unchanged (1080 / 34px) — now sourced from the
   named width contract in tokens-bureau.css so every public family measures
   from one place instead of repeating the literal per template. */
.mkt-wrap { max-width: var(--pub-w-wide); margin: 0 auto; padding: 0 var(--pub-gutter); }

.mkt-eyebrow {
  font-family: var(--font-mono); font-size: var(--pub-type-meta);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary);
  display: inline-flex; align-items: center; gap: 10px;
}
.mkt-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--brand-500); }
.mkt-serif { font-family: var(--font-serif); }
.mkt-mono  { font-family: var(--font-mono); font-size: var(--pub-type-meta); }
.mkt-amber { color: var(--brand-500); }
.mkt b { color: var(--text-primary); font-weight: 600; }
.mkt a { color: var(--brand-500); text-decoration: none; transition: color var(--dur-2, 160ms) var(--ease-out, ease); }
.mkt a:hover { color: var(--brand-400); }
/* buttons keep their own text colour inside .mkt (else amber-on-amber = invisible) */
.mkt a.btn-amber { color: var(--gray-1000); }
.mkt a.btn-amber:hover { color: var(--gray-1000); }

.mkt-hero { padding-top: var(--pub-hero-top); padding-bottom: var(--pub-hero-bottom); }
/* ══ THE public page heading ═══════════════════════════════════════════════
   ONE declaration for the h1 of every public page below the homepage. The
   homepage keeps its own larger display face (`.home-display`, 40→66px) —
   that is the frozen canon and the deliberate one-step-up of the landing.
   Every other public page uses this: 34→56px, weight 560, -.022em.

   These selectors were four separate declarations across three files, which
   is why the same role rendered at 68/600 on Product, 64/560 on Methodology,
   62/560 on Use cases and 44/650 on Databases. Adding a public page means
   adding its hero selector HERE, not writing a fifth scale. ═════════════ */
.mkt-hero h1,
.hero h1,
.uc-hero-copy h1,
.pillar-head h1,
.pub-h1 {
  font-family: var(--font-sans); font-size: var(--pub-type-title);
  letter-spacing: -.022em; font-weight: 560; line-height: var(--pub-lh-tight);
  color: var(--text-primary); margin: 16px 0 0; max-width: 17ch;
}
.mkt-hero .lede {
  font-family: var(--font-serif); font-size: var(--pub-type-body); line-height: var(--pub-lh-body);
  color: var(--text-secondary); max-width: 58ch; margin: 18px 0 0;
}
/* Shared heading defaults — every public page root carries .mkt, so any
   heading resolves to a canonical role even with no page rule at all: h2 is
   the section role, h3 the body role (weight carries its hierarchy), and both
   take the snug leading instead of inheriting the 1.6 body leading or a
   browser-default size. Component rules restate the same tokens; nothing can
   fall through to a sixth size. */
.mkt h2, .mkt h3 { line-height: var(--pub-lh-snug); }
.mkt h2 { font-size: var(--pub-type-section); }
.mkt h3 { font-size: var(--pub-type-body); }

.mkt-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--pub-gap-split); padding-top: 52px; padding-bottom: 24px; align-items: start; }
.mkt-toc { position: sticky; top: 62px; font-size: var(--pub-type-meta); }
.mkt-toc a { display: block; color: var(--text-tertiary); text-decoration: none; padding: 6px 0 6px 14px; border-left: 1px solid var(--border-subtle); }
.mkt-toc a:hover { color: var(--text-primary); border-left-color: var(--brand-500); }

.mkt-sec { padding-bottom: var(--pub-hero-bottom); max-width: 680px; }
.mkt-sec h2 {
  font-family: var(--font-sans); font-size: var(--pub-type-section); font-weight: 600; letter-spacing: -.01em;
  color: var(--text-primary); margin: 0 0 6px; display: flex; align-items: baseline; gap: 12px;
  border: none; padding: 0; text-transform: none;
}
.mkt-sec h2 .n { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--brand-500); }
.mkt-sec .lead { font-family: var(--font-serif); font-size: var(--pub-type-body); color: var(--text-secondary); margin: 0 0 20px; }
.mkt-sec p { color: var(--text-secondary); font-size: var(--pub-type-body); line-height: var(--pub-lh-body); margin: 0 0 12px; }
.mkt-sec h3 { font-family: var(--font-sans); font-size: var(--pub-type-body); font-weight: 600; color: var(--text-primary); margin: 2px 0 5px; }

.mkt-prin { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 0; }
.mkt-prin .c { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-1); padding: var(--pub-card-pad-sm); }
.mkt-prin .c h3 { font-size: var(--pub-type-body); font-weight: 600; margin: 0 0 6px; }
.mkt-prin .c p { font-size: var(--pub-type-body); margin: 0; color: var(--text-secondary); }

.mkt-flow { counter-reset: s; margin: 6px 0 0; border-left: 1px solid var(--border-default); }
.mkt-flow .st { position: relative; padding: 0 0 22px 26px; }
.mkt-flow .st::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; left: -13px; top: 0; width: 26px; height: 26px;
  background: var(--bg-2); border: 1px solid var(--border-default); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--brand-500);
}
.mkt-flow .st h3 { font-size: var(--pub-type-body); font-weight: 600; margin: 2px 0 5px; }
.mkt-flow .st p { font-size: var(--pub-type-body); margin: 0; color: var(--text-secondary); }

.mkt-callout {
  border: 1px solid color-mix(in oklch, var(--brand-500) 30%, transparent); border-left-width: 3px;
  background: color-mix(in oklch, var(--brand-500) 6%, var(--bg-1)); border-radius: 8px; padding: 18px 20px; margin: 8px 0 0;
}
.mkt-callout .k { font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-500); margin-bottom: 8px; }
.mkt-callout p { color: var(--text-primary); font-size: var(--pub-type-body); margin: 0; }

.mkt-receipt {
  font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary);
  background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: 6px;
  padding: 10px 12px; margin-top: 14px; overflow-wrap: anywhere;
}

.mkt-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mkt-list li { position: relative; padding: 0 0 10px 18px; font-size: var(--pub-type-body); color: var(--text-secondary); line-height: var(--pub-lh-body); }
.mkt-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-500); }
.mkt-list li b { color: var(--text-primary); font-weight: 600; }
.mkt code { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-primary); background: var(--bg-2); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 6px; }

/* single-column editorial body — about / short narrative pages (no TOC) */
.mkt-body { max-width: 720px; margin: 0 auto; padding-top: 44px; padding-bottom: 8px; }
.mkt-body h2 { font-family: var(--font-sans); font-size: var(--pub-type-section); font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); margin: 40px 0 10px; border: none; padding: 0; text-transform: none; }
.mkt-body h2:first-child { margin-top: 0; }
.mkt-body p { color: var(--text-secondary); font-size: var(--pub-type-body); line-height: var(--pub-lh-body); margin: 0 0 14px; }
.mkt-pull { font-family: var(--font-serif); font-size: var(--pub-type-body); line-height: var(--pub-lh-snug); color: var(--text-primary); border-left: 2px solid var(--brand-500); padding-left: 18px; margin: 28px 0; }

/* 3-up card variant + kicker (used by «what we believe» etc.) */
.mkt-prin.c3 { grid-template-columns: repeat(3, 1fr); }
.mkt-prin .c .k { display: block; font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-500); margin-bottom: 6px; }

/* operator / identity card */
.mkt-idcard { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-1); padding: var(--pub-card-pad); margin-top: 24px; font-size: var(--pub-type-body); color: var(--text-secondary); line-height: var(--pub-lh-body); }
.mkt-idcard .mono { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); }

/* worked-example panel — a real case rendered as «what one paste produces» */
.mkt-example { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-1); padding: var(--pub-card-pad); margin: 8px 0 0; }
.mkt-example .art { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); margin: 0 0 4px; }
.mkt-example .ttl { font-family: var(--font-serif); font-size: var(--pub-type-body); line-height: var(--pub-lh-snug); color: var(--text-primary); margin: 0 0 6px; }
.mkt-example .cap { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); overflow-wrap: anywhere; }
.mkt-example hr { border: none; border-top: 1px solid var(--border-subtle); margin: 16px 0; }
.mkt-example .lbl { font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 8px; }
.mkt-chip { display: inline-block; font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: .03em; text-transform: uppercase; color: var(--brand-500); border: 1px solid color-mix(in oklch, var(--brand-500) 30%, transparent); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.mkt-chip.clean { color: var(--text-tertiary); border-color: var(--border-default); }

@media (max-width: 900px) {
  .mkt-layout, .mkt-prin, .mkt-prin.c3 { grid-template-columns: 1fr; gap: 28px; }
  .mkt-toc { position: static; display: none; }
  /* Gutter step 1 of 2 — set on the token so every public family narrows
     together (was a .mkt-wrap-only literal, which left the other families
     on the desktop gutter at tablet width). */
  :root { --pub-gutter: 22px;
          --pub-hero-top: 52px; --pub-hero-bottom: 40px;
          --pub-sec-y: 56px; --pub-sec-y-band: 46px; --pub-sec-y-roomy: 76px;
          --pub-gap-split: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   USE-CASES — faithful port of the founder's handoff hero + snapshot demo
   (uc-hero.jsx / uc-common.jsx / landing.css). Static «snapshot ready» state
   with the REAL FTX worked example. Composed inside the shared header/footer;
   `.uc-*` names are the founder's, on the app's Bureau tokens. No collisions.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --et-person:  oklch(0.74 0.13 30);
  --et-company: oklch(0.72 0.13 280);
  --et-domain:  oklch(0.78 0.10 80);
  --et-email:   oklch(0.78 0.12 200);
}
.uc-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: var(--pub-gap-split); align-items: center; padding-top: var(--pub-hero-top); padding-bottom: var(--pub-hero-bottom); }
/* .uc-hero-copy h1 — folded into THE public page heading rule above. */
.uc-hero-copy .lede { font-family: var(--font-serif); font-size: var(--pub-type-body); line-height: var(--pub-lh-body); color: var(--text-secondary); max-width: 46ch; margin: 20px 0 0; }
.uc-hero-cta { display: flex; gap: 12px; margin-top: 28px; align-items: center; flex-wrap: wrap; }
.uc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 22px; border-radius: var(--r-md); border: 1px solid var(--border-default); background: var(--bg-2); color: var(--text-primary); font-size: var(--pub-type-body); font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 140ms, transform 140ms var(--ease-out, ease); }
.uc-btn:hover { background: var(--bg-3); }
.uc-btn.primary { background: var(--brand-500); color: var(--gray-1000); border-color: var(--brand-600); font-weight: 600; }
.uc-btn.primary:hover { background: var(--brand-400); transform: translateY(-1px); }
.uc-btn.ghost { background: transparent; }
.uc-btn.ghost:hover { background: var(--bg-1); }
.uc-hero-note { margin-top: 22px; font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-disabled); letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.uc-hero-note .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); flex: none; }

/* product-window chrome */
.uc-window { border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-1); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .8), 0 0 0 1px var(--border-subtle); overflow: hidden; }
.uc-window .win-bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-0); }
.uc-window .win-bar .dots { display: flex; gap: 6px; }
.uc-window .win-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-3); display: block; }
.uc-window .win-bar .addr { flex: 1; display: flex; align-items: center; gap: 7px; height: 22px; margin: 0 8px; padding: 0 9px; border-radius: var(--r-sm); background: var(--bg-1); border: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.uc-window .win-bar .addr .lock { color: var(--success); flex: none; }
.uc-window .win-bar .tag { font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--text-disabled); }

/* demo rows */
.uc-drow { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-0); }
.uc-arow { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.uc-arow .ico { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); flex: none; }
.uc-elabel { font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--text-disabled); padding: 10px 14px 6px; }
.uc-erow { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 6px 14px; }
.uc-esq { width: 22px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.uc-ename { font-size: var(--pub-type-meta); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-elab { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-ebadge { margin-left: 6px; font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: .05em; text-transform: uppercase; color: var(--brand-500); border: 1px solid color-mix(in oklch, var(--brand-500) 30%, transparent); border-radius: 3px; padding: 1px 4px; white-space: nowrap; }
.uc-ebadge.mut { color: var(--text-tertiary); border-color: var(--border-default); }
.uc-conf { display: inline-flex; align-items: center; gap: 6px; }
.uc-conf .track { width: 34px; height: 3px; background: var(--bg-3); border-radius: 999px; overflow: hidden; display: inline-block; }
.uc-conf .fill { display: block; height: 100%; border-radius: 999px; }
.uc-conf .pct { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); width: 24px; }
/* real resolved identity (Wikidata QID) — replaces any decorative confidence score */
.uc-qid { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; border-bottom: 1px solid transparent; }
.uc-qid:hover { color: var(--brand-500); border-bottom-color: color-mix(in oklch, var(--brand-500) 40%, transparent); }

/* live metrics */
.uc-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-subtle); }
.uc-metric { padding: 10px 12px; border-right: 1px solid var(--border-subtle); }
.uc-metric:last-child { border-right: 0; }
.uc-metric .n { font-family: var(--font-mono); font-size: var(--pub-type-body); color: var(--text-primary); letter-spacing: -.01em; }
.uc-metric .k { font-family: var(--font-mono); font-size: var(--pub-type-meta); text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); margin-top: 2px; }

/* how it works — 3 cards */
.uc-hiw { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; margin-top: 22px; }
.uc-hiw .c { padding: var(--pub-card-pad); border-right: 1px solid var(--border-subtle); }
.uc-hiw .c:last-child { border-right: 0; }
.uc-hiw .c .hn { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); }
.uc-hiw .c .hn .ic { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border-subtle); background: var(--bg-1); display: flex; align-items: center; justify-content: center; color: var(--brand-500); }
.uc-hiw .c h3 { font-family: var(--font-sans); font-size: var(--pub-type-body); font-weight: 600; color: var(--text-primary); margin: 16px 0 8px; }
.uc-hiw .c p { font-size: var(--pub-type-body); color: var(--text-secondary); margin: 0; line-height: var(--pub-lh-body); }

@media (max-width: 900px) {
  .uc-hero-grid, .uc-hiw { grid-template-columns: 1fr; }
  .uc-hero-grid { gap: 32px; }
  .uc-hiw .c { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .uc-hiw .c:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME (flagship) — Probily3 «What's on the record» design, in-system.
   Living SVG entity-graph fed by REAL data from the current free /sample report.
   ══════════════════════════════════════════════════════════════════════════ */
.home-hero-sec { padding-top: 56px; padding-bottom: 20px; position: relative; overflow: hidden; }
.home-hero-sec::before { content: ""; position: absolute; top: -30%; left: 50%; width: 900px; height: 900px; transform: translateX(-50%); background: radial-gradient(circle, color-mix(in oklch, var(--brand-500) 8%, transparent), transparent 62%); pointer-events: none; z-index: 0; }
.home-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--pub-gap-split); align-items: center; position: relative; z-index: 1; }
.home-hero-copy .mkt-eyebrow { color: var(--text-secondary); }
.home-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand-500) 55%, transparent); animation: home-pulse 2s infinite; }
@keyframes home-pulse { 0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--brand-500) 55%,transparent)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.home-display { font-family: var(--font-sans); font-size: var(--pub-type-display); line-height: var(--pub-lh-tight); letter-spacing: -.028em; font-weight: 560; color: var(--text-primary); margin: 18px 0 0; }
.home-lede { font-family: var(--font-serif); font-size: var(--pub-type-body); line-height: var(--pub-lh-body); color: var(--text-secondary); max-width: 46ch; margin: 20px 0 0; }
.home-url { display: flex; align-items: center; gap: 8px; margin-top: 28px; height: 52px; padding: 0 8px 0 14px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-1); max-width: 520px; }
.home-url:focus-within { border-color: color-mix(in oklch, var(--brand-500) 55%, transparent); }
.home-url .ic { color: var(--text-tertiary); flex: none; display: flex; }
.home-url input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--pub-type-body); outline: none; }
.home-url input::placeholder { color: var(--text-disabled); }
.home-url .uc-btn { height: 40px; flex: none; }
.home-hero-note { margin-top: 18px; font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-disabled); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-hero-note .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); flex: none; }
.home-hero-note a { color: var(--brand-500); text-decoration: none; }
.home-hero-note a:hover { color: var(--brand-400); }

/* the graph window */
.home-graph-win { }
.home-graph-frame { display: block; width: 100%; height: 520px; border: 0; background: var(--bg-1); }
@media (max-width: 900px) { .home-graph-frame { height: 440px; } }
.home-graph { display: block; width: 100%; height: auto; background: var(--bg-1); }
.hg-edge { opacity: .9; }
.hg-node .hg-label { font-family: var(--font-mono); font-size: 12px; fill: var(--text-secondary); }
.hg-node.center .hg-label { fill: var(--text-primary); font-size: 13px; }
.hg-node { opacity: 0; animation: hg-pop 460ms var(--ease-out, ease) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes hg-pop { from { opacity: 0; transform-box: fill-box; } to { opacity: 1; } }
.home-graph-foot { padding: 10px 14px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); }
.home-graph-foot a { color: var(--brand-500); text-decoration: none; }

/* bands + cta + scroll reveal */
.home-band { padding-top: 40px; padding-bottom: 8px; }
.home-cta { text-align: left; padding-top: 72px; padding-bottom: 24px; }
.home-cta h2 { font-family: var(--font-sans); font-size: var(--pub-type-section); font-weight: 600; letter-spacing: -.02em; color: var(--text-primary); margin: 0; }
.home-cta p { font-family: var(--font-serif); font-size: var(--pub-type-body); color: var(--text-secondary); margin: 12px 0 22px; }
.home-cta .uc-btn { margin: 0 10px 0 0; }
.home-rev { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease-out, ease), transform 520ms var(--ease-out, ease); }
.home-rev.in { opacity: 1; transform: none; }

/* ── filled sections: report / traceability / audiences / method ─────── */
.home-sec { padding-top: var(--pub-sec-y-band); padding-bottom: 10px; }
.home-band-alt { background: var(--bg-1); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding-top: var(--pub-sec-y-band); padding-bottom: var(--pub-sec-y-band); margin-top: 40px; }
.home-h2 { font-family: var(--font-sans); font-size: var(--pub-type-section); font-weight: 600; letter-spacing: -.02em; color: var(--text-primary); margin: 8px 0 0; max-width: 20ch; }
.home-lede2 { font-family: var(--font-serif); font-size: var(--pub-type-body); line-height: var(--pub-lh-body); color: var(--text-secondary); margin: 16px 0 0; max-width: 52ch; }

/* feature rows */
.home-feature { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 36px; padding-bottom: 36px; border-top: 1px solid var(--border-subtle); }
.home-feature:first-of-type { border-top: 0; }
.home-feature.flip .home-feature-copy { order: 2; }
.home-fidx { font-family: var(--font-mono); font-size: var(--pub-type-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-500); }
.home-feature-copy h3 { font-family: var(--font-sans); font-size: var(--pub-type-body); font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); margin: 8px 0 10px; }
.home-feature-copy > p { font-family: var(--font-serif); font-size: var(--pub-type-body); line-height: var(--pub-lh-body); color: var(--text-secondary); margin: 0 0 14px; }
.home-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.home-flist li { display: flex; gap: 10px; align-items: baseline; font-family: var(--font-sans); font-size: var(--pub-type-body); color: var(--text-secondary); }
.home-flist .b { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); flex: none; transform: translateY(-1px); }

/* legend media */
.home-legend { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-0); padding: 20px 22px; display: grid; gap: 13px; }
.home-legend .lg { display: flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-size: var(--pub-type-meta); color: var(--text-primary); }
.home-legend .lg.mono { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); border-top: 1px solid var(--border-subtle); padding-top: 12px; margin-top: 3px; }
.home-legend .lgd { width: 15px; height: 15px; flex: none; }
.home-legend .lgd.person { border-radius: 50%; background: color-mix(in oklch, var(--brand-500) 78%, transparent); }
.home-legend .lgd.org { border-radius: 3px; background: transparent; border: 2px solid var(--text-primary); }
.home-legend .lgd.money { width: 0; height: 0; background: none; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid var(--success); }
.home-legend .lgd.place { border-radius: 3px; background: var(--text-tertiary); }

/* registry chips */
.home-regchips { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.home-regchips.tall { align-self: center; }
.home-regchips .rc { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 11px; background: var(--bg-0); }
.home-regchips .rc.hot { color: var(--text-primary); border-color: color-mix(in oklch, var(--brand-500) 45%, var(--border-subtle)); background: color-mix(in oklch, var(--brand-500) 8%, var(--bg-0)); }

/* receipts */
/* section header full-width on its own row, content stacked below (founder: don't put the heading in a column) */
.home-receipts-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.home-receipt { display: grid; gap: 10px; }
.home-receipt .rc-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-0); padding: 12px 15px; }
.home-receipt .rc-src { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: var(--pub-type-meta); font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.home-receipt .rc-src .ok { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }
.home-receipt .rc-mid { min-width: 0; }
.home-receipt .rc-ref { font-family: var(--font-sans); font-size: var(--pub-type-meta); color: var(--text-secondary); }
.home-receipt .rc-url { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-receipt .rc-meta { text-align: right; font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--text-tertiary); line-height: var(--pub-lh-meta); white-space: nowrap; }
.home-receipt .rc-meta .sha { color: var(--brand-500); }

/* audiences */
.home-aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.home-aud a { display: block; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-0); padding: 22px 20px; text-decoration: none; transition: border-color 180ms ease, transform 180ms ease; }
.home-aud a:hover { border-color: color-mix(in oklch, var(--brand-500) 50%, var(--border-subtle)); transform: translateY(-2px); }
.home-aud .ic { font-size: var(--pub-type-body); color: var(--brand-500); line-height: 1; }
.home-aud h3 { font-family: var(--font-sans); font-size: var(--pub-type-body); font-weight: 600; color: var(--text-primary); margin: 12px 0 6px; }
.home-aud p { font-family: var(--font-serif); font-size: var(--pub-type-body); line-height: var(--pub-lh-body); color: var(--text-secondary); margin: 0 0 12px; }
.home-aud .go { font-family: var(--font-mono); font-size: var(--pub-type-meta); color: var(--brand-500); }

/* method */
.home-method-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

@media (prefers-reduced-motion: reduce) {
  .home-pulse, .hg-node { animation: none; opacity: 1; }
  .home-rev { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .home-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  /* Display must never fall below the title role. The recovered legacy step
     (1.6rem + 1.75vw) dipped under the title clamp on tablet — 39px vs 41.9px
     at 768. This slope dominates the title curve at every width in the
     breakpoint (display−title = 0.55vw, cap 48px > title's 45.6px at 900px)
     and still reaches the shared 34px floor by ≤400px, where display and
     title deliberately merge on phones. */
  :root { --pub-type-display: clamp(2.125rem, 1.3rem + 3.3vw, 3rem); }
  /* The desktop <br> in «Read between the lines <br>of any story» pinned line 1
     onto ONE line (~425px at 34px) → the hero copy overflowed the phone and was
     silently CLIPPED by .home-hero-sec{overflow:hidden} (the «disgusting» tell).
     Drop the <br> on mobile so the headline wraps naturally; min-width:0 lets the
     grid children shrink to the column instead of holding min-content width. */
  .home-display br { display: none; }
  .home-hero-copy, .home-graph-wrap, .home-hero-grid { min-width: 0; }
  .home-feature { grid-template-columns: 1fr; gap: 22px; }
  .home-feature.flip .home-feature-copy { order: 0; }
  .home-receipts-grid, .home-method-grid { grid-template-columns: 1fr; gap: 26px; }
  .home-aud { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   UNIVERSAL MOBILE LAYER — founder 2026-07-03: «удобная читаемая мобилка …
   универсальные правила». ONE place, loaded by every marketing page. Every
   multi-column grid stacks, flex feature-rows stack, fluid gutters, 44px touch
   targets, tamer section rhythm. (Header hamburger = public_header.html;
   cabinet React = separate pass.) `!important` = win the cross-layer cascade.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .home-hero-grid,.mkt-layout,.mkt-prin,.uc-erow,.uc-metrics,.uc-hiw,.home-aud,
  .wp-stats,.pg-ws,.pg-plans,.wiki-grid,.lg-layout,.rep-gal,.home-method-grid,
  .home-regchips.tall{ grid-template-columns:1fr !important; }
  .dbstat{ grid-template-columns:1fr 1fr !important; }
  .home-feature{ display:flex !important; flex-direction:column !important; gap:20px; }
  /* Gutter step 2 of 2. The token drives every public family; the explicit
     override stays for .uc-wrap and any legacy caller that sets its own. */
  :root { --pub-gutter: 16px;
          --pub-hero-top: 40px; --pub-hero-bottom: 32px;
          --pub-sec-y: 44px; --pub-sec-y-band: 38px; --pub-sec-y-roomy: 56px;
          --pub-gap-split: 24px; --pub-card-pad: 18px; }
  /* The pre-token mobile pass forced every section to 46/46 !important and
     re-asserted the 16px gutter here. Both duplicated (and silently OVERRODE)
     the canonical owners: the spacing tokens step to their mobile values in
     the :root block above, and the gutter token already resolves to 16px.
     Removed so the token contract is the real computed owner at every
     viewport; the browser layout probe holds the geometry accountable. */
  .uc-btn,.btn-amber,.btn-ghost,.home-aud a,.b-amber,.b-ghost{ min-height:44px; display:inline-flex; align-items:center; touch-action:manipulation; }
}
@media (max-width: 400px){ .dbstat{ grid-template-columns:1fr !important; } }

/* ════ PASS 1.2 §1 — rendering integrity (root cause, shared layer) ════
   Grid/flex items default to min-width:auto, so a child's min-content
   (long mono strings in .win-bar/.rep-gal, unbreakable h1 words) can push
   the item wider than the viewport even when the track says 1fr — the page
   then reports body.scrollWidth > innerWidth and full-page screenshots
   come out wider than the requested viewport (the 418px home / 376px
   product defect). Fix the DEFAULT, not the screenshots: layout children
   may always shrink, product windows never exceed their container, and
   the window address line truncates instead of dictating page width. */
.home-feature-copy, .home-feature-media,
.hero-copy, .hero-graph,
.wrap.hero-grid > *, .uc-hero-grid > *,
.pillar-visual, .home-graph-wrap { min-width: 0; }
.uc-window { max-width: 100%; min-width: 0; }
.uc-window iframe { max-width: 100%; }
.win-bar { min-width: 0; }
.win-bar .addr { min-width: 0; overflow: hidden; }
.win-bar .addr span, .win-bar .addr { white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 900px){
  /* PASS 1.2 §1 — inline align-items:start/center on feature rows switches
     stacked (column) flex children from stretch to fit-content sizing, so a
     product window inflates to its max-content (long mono lines ≈400px) and
     drags body.scrollWidth past the viewport. On the stacked layout every
     feature child takes the full column width, always. */
  .home-feature > *{ width:100% !important; min-width:0; }
}