/* dilbdrbk.com.np: dark, grainy, hairline-grid layout. */

:root {
  --bg: #262626;
  --bg-raise: #2e2e2e;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.24);
  --ink: #f5f5f4;
  --ink-2: #d6d4d3;
  --muted: #9a9898;
  --accent: #c9f25d;
  --accent-ink: #1c1c1c;

  --rail: 300px;
  --gutter: clamp(16px, 2.4vw, 32px);
  --topbar: 48px;
  --radius: 2px;

  /* One font sitewide: Archivo condensed (72% width) for headings and text alike.
     Free stand-in for Roc Grotesk Condensed; to switch, change these lines. */
  --font: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --mono: var(--font);
  --font-display: var(--font);
  --display-stretch: 72%;
  --text-stretch: 72%;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Film grain over everything; purely decorative. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[role="list"] { list-style: none; }
dl, dd { margin: 0; }

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 8px; color: var(--accent-ink); }

/* ------------------------------------------------------------ topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  align-items: center;
  height: var(--topbar);
  border-bottom: 1px solid var(--line);
  background: rgba(38, 38, 38, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.8125rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding-inline: var(--gutter);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-logo { display: block; width: auto; height: 24px; }

/* Condensed Archivo for headings and big text; everything else is Archivo at normal width. */
body { font-stretch: var(--text-stretch); }
.idx, .pipe-dot, .status-pill, .cite, time { font-variant-numeric: tabular-nums; }
h3, .ch-title {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.display, .page-title, .section-title, .prose h2, .role h2,
.contact-value, .profile-platform, .post-title, .empty-title {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  letter-spacing: -0.015em;
  word-spacing: 0.1em;
}
.display { font-size: clamp(2.8rem, 1rem + 6.4vw, 8rem); line-height: 0.9; max-width: 19ch; }
.display-sm { font-size: clamp(2.4rem, 1rem + 4.4vw, 5.6rem); }
.page-title { font-size: clamp(2.6rem, 1rem + 4.8vw, 6rem); line-height: 0.92; max-width: 20ch; }
.section-title { font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem); line-height: 0.95; }
.prose h2, .role h2 { font-size: clamp(1.9rem, 1rem + 2.2vw, 3rem); line-height: 0.95; }

/* Industries: three groups on the home page, typed rows on the industries page. */
.split-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.niche-grid-typed li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 12px; }
.niche-type { grid-column: 2; color: var(--muted); font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.02em; }
@media (max-width: 1100px) { .split-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .split-3 { grid-template-columns: minmax(0, 1fr); } }

/* About: big-number stats, a four-step flow, and a lede that sits under an h2. */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 36px; background: var(--line); border: 1px solid var(--line); }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 18px 18px 20px; background: var(--bg); }
.stats dd { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800; font-size: clamp(2.4rem, 1rem + 2.6vw, 3.6rem); line-height: 0.9; letter-spacing: -0.01em; }
.stats dt { color: var(--muted); font-size: 0.8125rem; }
.flow.flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lede-tight { margin-top: 0; margin-bottom: 28px; }
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow.flow-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Home hero: full width (no rail), sized to its content, copy left and orbit right. */
.hero.hero-full { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.hero-full .hero-body { padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(36px, 5vw, 64px); }
.hero-body { justify-content: center; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.hero-facts dt { margin-bottom: 4px; color: var(--muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-facts dd { font-size: 0.9375rem; font-weight: 500; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.display.hero-title { text-indent: 0; max-width: none; font-size: clamp(2.7rem, 1rem + 4.2vw, 5.6rem); line-height: 0.92; }
.hero-title .hl { display: block; color: var(--accent); }
.markets { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 34px; font-size: 0.9375rem; font-weight: 500; }
.markets-label { color: var(--muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.btn-arrow::after { content: "\2192"; margin-left: 10px; transition: transform 0.2s; }
.btn-arrow:hover::after { transform: translateX(3px); }
.btn-icon { gap: 9px; }
.btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.orbit-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.orbit {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.35s ease-out;
}
.orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-lines .ring { fill: none; stroke: var(--line-strong); stroke-width: 0.25; }
.orbit-lines .ring-inner { stroke-dasharray: 0.8 1.6; }
.orbit-edge { stroke: var(--line-strong); stroke-width: 0.3; transition: stroke 0.25s, stroke-width 0.25s; }
.orbit-edge.is-active { stroke: var(--accent); stroke-width: 0.7; }
.orbit-pulse { fill: none; stroke: var(--accent); stroke-width: 0.9; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 100; opacity: 0; }
.orbit-photo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg-raise);
  box-shadow: 0 0 0 10px rgba(201, 242, 93, 0.06), 0 24px 60px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}
.orbit-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.5s; }
.orbit:hover .orbit-photo img { filter: none; }
.orbit-node {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transform: translate(-50%, -50%);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.orbit-node::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--muted); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s; }
.orbit-node:hover, .orbit-node:focus-visible, .orbit-node.is-active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(201, 242, 93, 0.08); }
.orbit-node:hover::before, .orbit-node:focus-visible::before, .orbit-node.is-active::before { border-color: var(--accent); background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .orbit-pulse { opacity: 1; animation: pulse-travel 3.6s linear infinite; }
  @keyframes pulse-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
}

/* Home: stats bar and the scrolling tools strip, both full width. */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
.stat-row div { display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; padding: 26px 16px 28px; text-align: center; }
.stat-row div + div { border-left: 1px solid var(--line); }
.stat-row dd { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800; font-size: clamp(2.4rem, 1rem + 2.6vw, 3.8rem); line-height: 0.9; }
.stat-row dt { color: var(--muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }

.tools { padding: 34px 0 40px; border-bottom: 1px solid var(--line); }
.tools-label { margin-bottom: 22px; color: var(--muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; flex-shrink: 0; gap: 14px; padding-right: 14px; list-style: none; }
.tool { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 11px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-raise); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
.tool-mark { display: inline-grid; place-items: center; min-width: 32px; height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--accent); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
  .marquee-track[aria-hidden="true"] { display: none; }
}

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .orbit-wrap { margin-top: 12px; }
}
@media (max-width: 560px) {
  .orbit-node { gap: 5px; padding: 4px 8px; font-size: 0.6875rem; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row div:nth-child(3) { border-left: 0; }
  .stat-row div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* Profile tiles ("Find me across the web"). */
.web-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; list-style: none; }
.web-tiles-detailed { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.web-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.web-tile:hover, .web-tile:focus-visible { border-color: var(--accent); color: var(--accent); background: rgba(201, 242, 93, 0.04); }
.web-tile-name { display: grid; gap: 3px; min-width: 0; }
.web-tile-handle { color: var(--muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.web-tile-arrow { flex: none; color: var(--muted); font-size: 0.8125rem; transition: transform 0.2s, color 0.2s; }
.web-tile:hover .web-tile-arrow { color: var(--accent); transform: translateX(2px); }

/* Home: full-width "Find me across the web" strip, six tiles a row. */
.web-strip { padding: clamp(36px, 4.5vw, 64px) var(--gutter); border-bottom: 1px solid var(--line); }
.web-strip-title {
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.web-tiles-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.web-tiles-6 .web-tile { min-height: 50px; padding: 13px 16px; font-size: 0.875rem; }
.web-strip-note { margin-top: 18px; color: var(--muted); font-size: 0.875rem; }
.web-strip-note a { color: var(--ink); }
@media (max-width: 1100px) { .web-tiles-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .web-tiles-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Hire me" pop-up form. */
.lead {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--bg-raise);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lead::backdrop { background: rgba(10, 10, 10, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html:has(.lead[open]) { overflow: hidden; }
.lead-inner { position: relative; padding: 34px 32px 26px; text-align: center; }
.lead-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.lead-close:hover { border-color: var(--accent); color: var(--accent); }
.lead-kicker { color: var(--accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.lead-title { margin: 10px 0 8px; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800; font-size: clamp(2rem, 1.2rem + 2vw, 2.7rem); line-height: 0.95; }
.lead-sub { max-width: 44ch; margin: 0 auto 22px; color: var(--ink-2); font-size: 0.9375rem; }
.lead-form { display: grid; gap: 14px; text-align: left; }
.lead-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lead-form label { display: grid; gap: 6px; font-size: 0.8125rem; font-weight: 600; }
.lead-form label > span { color: var(--accent); }
.lead-form input, .lead-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
}
.lead-form textarea { min-height: 110px; resize: vertical; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: #7a7878; }
.lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201, 242, 93, 0.15); }
.btn.lead-submit { justify-content: center; width: 100%; margin-top: 4px; border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.btn.lead-submit:hover { background: #d8f884; }
.lead-status { min-height: 1.2em; color: var(--accent); font-size: 0.875rem; text-align: center; }
.lead-status:empty { display: none; }
.lead-alt { margin-top: 12px; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; text-align: center; }
.lead-alt a { color: var(--ink); }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 560px) {
  .lead-row { grid-template-columns: minmax(0, 1fr); }
  .lead-inner { padding: 30px 18px 22px; }
}

/* About: habits as a plain numbered list, no boxes. */
.habits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); list-style: none; border-top: 1px solid var(--line); }
.habits li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.habits .idx { grid-row: span 2; padding-top: 5px; color: var(--accent); }
.habits h3 { font-size: 1.125rem; }
.habits p { color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 860px) { .habits { grid-template-columns: minmax(0, 1fr); } }

/* Hero availability pill. */
.status-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-bottom: 24px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.status-pill:hover { border-color: var(--accent); color: var(--accent); }
.status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .status-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    animation: ping 2s ease-out infinite;
  }
  @keyframes ping { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
}

.nav ul { display: flex; gap: 22px; list-style: none; padding-inline: var(--gutter); }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; }
.nav-contact { display: none; }

.hire-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: var(--gutter);
  padding: 7px 16px 7px 13px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(201, 242, 93, 0.18);
  transition: transform 0.15s, box-shadow 0.2s, background-color 0.2s;
}
.hire-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.hire-btn:hover { color: var(--accent-ink); background: #d8f884; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(201, 242, 93, 0.3); }

.menu-btn {
  display: none;
  margin-right: var(--gutter);
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------------ frames */

.frame {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--gutter);
  border-right: 1px solid var(--line);
}

.body { padding: clamp(24px, 4vw, 56px) var(--gutter); min-width: 0; }

.label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.label .idx { margin-right: 6px; }
.value { font-size: 0.875rem; }

.idx {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.rail-note { color: var(--muted); font-size: 0.875rem; line-height: 1.5; max-width: 32ch; }

.arrow-link {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
}
.arrow-link::after { content: " \2192"; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.8125rem;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(201, 242, 93, 0.14);
}

.display {
  font-size: clamp(2.4rem, 1rem + 5vw, 6.25rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  max-width: 17ch;
  text-indent: 1.4em;
}
.display-sm { font-size: clamp(2rem, 1rem + 3.4vw, 4.5rem); text-indent: 0; max-width: 18ch; }

.page-title {
  font-size: clamp(2.1rem, 1rem + 3.6vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 18ch;
}

.section-title {
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.75rem);
  margin-bottom: clamp(20px, 3vw, 36px);
}

.lede {
  margin-top: clamp(20px, 2.4vw, 32px);
  max-width: 58ch;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------ meta lists */

.meta { display: grid; gap: 14px; font-size: 0.8125rem; line-height: 1.35; }
.meta dt { color: var(--muted); }
.meta dd { color: var(--ink); font-weight: 500; }
.meta a { text-decoration: underline; }

.meta-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------ hero */

.hero { min-height: calc(100svh - var(--topbar)); }
.hero-body { display: flex; flex-direction: column; gap: 0; }
.hero-body .meta-row { margin-top: auto; }
.hero-body .actions { margin-bottom: 48px; }

.portrait { margin: 0; width: min(100%, 168px); aspect-ratio: 1; overflow: hidden; background: var(--bg-raise); }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.4s; }
.portrait:hover img { filter: none; }

.graph { width: 100%; max-width: 260px; margin-top: auto; }
.graph-edges path { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.graph-nodes circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1.4; }
.graph-hub { fill: var(--accent); }
.graph-labels text { fill: var(--muted); font-family: var(--mono); font-size: 9px; }

@media (prefers-reduced-motion: no-preference) {
  .graph-hub { animation: pulse 3.2s ease-in-out infinite; transform-origin: 130px 95px; transform-box: view-box; }
  @keyframes pulse { 50% { transform: scale(1.12); } }
}

/* ------------------------------------------------------------ cards */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card { background: var(--bg); }
.card > a, .card-static {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 22px 20px 24px;
  text-decoration: none;
  transition: background-color 0.2s;
}
.card-static { padding: 22px 20px 24px; }
.card > a:hover { background: var(--bg-raise); color: var(--ink); }
.card > a:hover h3 { color: var(--accent); }
.card h3 { font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.15; }
.card p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

/* ------------------------------------------------------------ approach steps */

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  list-style: none;
  counter-reset: step;
  background: var(--line);
  border: 1px solid var(--line);
}
.steps li { counter-increment: step; padding: 24px 22px 28px; background: var(--bg); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--accent);
}
.steps h3 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); margin-bottom: 10px; }
.steps p { color: var(--ink-2); max-width: 48ch; }

/* ------------------------------------------------------------ industries */

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.list-title { font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 14px; color: var(--muted); font-weight: 500; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.875rem;
}

.niche-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.niche-grid li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 18px 20px;
  background: var(--bg);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------ timeline */

.timeline-compact { list-style: none; border-top: 1px solid var(--line); }
.timeline-compact li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.tl-role { font-weight: 600; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); letter-spacing: -0.015em; }
.tl-date { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.timeline-compact li:first-child .tl-role::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.timeline { list-style: none; border-top: 1px solid var(--line); }
.role { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.role h2 { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.role-meta { margin-top: 10px; color: var(--muted); font-size: 0.875rem; }
.role-meta span { margin-inline: 4px; }
.role ul { display: grid; gap: 10px; padding-left: 1.1em; color: var(--ink-2); }
.role li::marker { color: var(--accent); }

/* ------------------------------------------------------------ prose & facts */

.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); margin-bottom: 20px; }
.prose p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.prose p + p { margin-top: 1em; }
.prose a:not(.arrow-link) { text-decoration: underline; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facts div { padding: 16px 18px; background: var(--bg); }
.facts dt { color: var(--muted); font-size: 0.75rem; margin-bottom: 4px; }
.facts dd { font-weight: 500; }
.facts a { text-decoration: underline; }

/* ------------------------------------------------------------ page head */

.page-head .rail { gap: 22px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 0.8125rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }

.toc { display: grid; gap: 6px; padding-left: 1.6em; font-size: 0.875rem; color: var(--muted); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; color: var(--ink); }

/* ------------------------------------------------------------ FAQ */

.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-weight: 400;
  color: var(--muted);
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq-item summary:hover { color: var(--accent); }
.faq-item p { padding: 0 0 22px; max-width: 68ch; color: var(--ink-2); }

/* ------------------------------------------------------------ contact & profiles */

.contact-list { border-top: 1px solid var(--line); margin-bottom: 24px; }
.contact-list li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.contact-value {
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-decoration: none;
}
a.contact-value:hover { text-decoration: underline; }

.profiles { border-top: 1px solid var(--line); }
.profile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.profile-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.profile-platform { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.profile-handle { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }
.profile-link:hover .profile-platform { text-decoration: underline; }
.profile-note { color: var(--ink-2); font-size: 0.9375rem; }

/* ------------------------------------------------------------ blog */

.empty { max-width: 60ch; padding: 28px; border: 1px dashed var(--line-strong); }
.empty-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.empty p + p { margin-top: 14px; color: var(--ink-2); }

.post-list { list-style: none; border-top: 1px solid var(--line); }
.post-row a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 20px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.post-row time { grid-row: span 2; color: var(--muted); font-family: var(--mono); font-size: 0.8125rem; }
.post-title { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.post-desc { color: var(--muted); }
.post-row a:hover .post-title { color: var(--accent); }
.post-source { margin-top: 2em; color: var(--muted); font-size: 0.9rem; }

/* ------------------------------------------------------------ footer
   Three columns: who (photo, role, bio, profile chips), site links, and contact rows. */

.footer { padding: clamp(40px, 5vw, 72px) var(--gutter) 24px; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.footer-id { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.footer-avatar { width: 56px; height: 56px; border: 1px solid var(--line-strong); border-radius: 50%; object-fit: cover; }
.footer-name { display: block; font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 1.375rem; font-weight: 800; line-height: 1.05; }
.footer-id:hover .footer-name { color: var(--accent); }
.footer-role, .footer-head, .footer-k { color: var(--muted); }
.footer-role { display: block; margin-top: 5px; }
.footer-bio { max-width: 40ch; margin-top: 20px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
.footer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; list-style: none; }
.footer-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); font-size: 0.8125rem; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.footer-chips a::after { content: "\2197"; color: var(--muted); }
.footer-chips a.footer-chip-all::after { content: "\2192"; }
.footer-chips a:hover { border-color: var(--accent); color: var(--accent); }
.footer-head::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 10px; background: var(--accent); }
.footer-links { display: grid; gap: 9px; margin-top: 20px; list-style: none; font-size: 0.9375rem; }
.footer-links a { color: var(--ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
.footer-contact { display: grid; gap: 16px; margin-top: 20px; list-style: none; }
.footer-contact li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; }
.footer-ico { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink-2); }
.footer-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer-k { display: block; margin-bottom: 3px; }
.footer-v { color: var(--ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; text-decoration: none; }
a.footer-v:hover { color: var(--accent); text-decoration: underline; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; color: var(--muted); font-size: 0.8125rem; }
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ reveal */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

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

@media (max-width: 1100px) {
  :root { --rail: 240px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav ul { gap: 16px; }
}

@media (max-width: 860px) {
  .topbar { grid-template-columns: 1fr auto auto; }
  .hire-btn { margin-right: 8px; padding: 6px 12px 6px 10px; font-size: 0.8125rem; }
  .menu-btn { display: inline-flex; }
  .nav { position: absolute; top: var(--topbar); left: 0; right: 0; display: none; }
  .nav.is-open { display: block; }
  .nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav li:last-child { border-bottom: 0; }
  .nav a { display: block; padding: 14px 0; font-size: 1.25rem; font-weight: 600; color: var(--ink); }
  .nav-contact { display: block; }

  .frame { grid-template-columns: minmax(0, 1fr); }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .hero { min-height: 0; }
  .hero .rail { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .hero .portrait { width: 112px; }
  .hero .rail .meta { flex: 1; min-width: 160px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graph { display: none; }
  .display { text-indent: 0; }
  .meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .split, .facts, .role { grid-template-columns: minmax(0, 1fr); }
  .role { gap: 14px; }
  .cards-3 { grid-template-columns: minmax(0, 1fr); }
  .page-head .portrait { width: 120px; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .footer-base { flex-direction: column; gap: 4px; }
  .contact-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .profile { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .profile .idx { display: none; }
  .post-row a { grid-template-columns: minmax(0, 1fr); }
  .post-row time { grid-row: auto; }
  .timeline-compact li { flex-direction: column; gap: 2px; }
  .tl-date { white-space: normal; }
}

.tl-org { margin-left: 8px; color: var(--muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; }

/* ------------------------------------------------------------ knowledge: shared */

.tags-sm li { padding: 4px 10px; font-size: 0.8125rem; color: var(--ink-2); }
.covers { margin-top: 22px; }

.takeaways { display: grid; gap: 12px; margin-top: 28px; max-width: 72ch; list-style: none; }
.takeaways li { padding-left: 18px; border-left: 2px solid var(--accent); color: var(--ink-2); }
.takeaways strong { color: var(--ink); }

/* Step flow: horizontal on wide screens, vertical below. */
.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}
.flow-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 18px 24px; background: var(--bg); }
.flow-step h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
.flow-step p { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.flow-step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  z-index: 1;
  top: 20px;
  right: -11px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  font-size: 0.75rem;
  line-height: 20px;
  text-align: center;
}
.flow-loop .flow-step:last-child::after {
  content: "\21BB";
  position: absolute;
  top: 20px;
  right: 14px;
  color: var(--accent);
}
.flow-loop + .list-title { margin-top: 28px; }

.where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; font-size: 0.875rem; }
.where dt { color: var(--muted); }
.where dd { font-weight: 600; }

/* AI answer: question, searches, sources, answer. */
.fanout { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fan-col { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 22px; background: var(--bg); }
.fan-label { color: var(--muted); font-size: 0.75rem; }
.fan-box { padding: 14px; border: 1px solid var(--line-strong); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.fan-answer { border-color: var(--accent); font-weight: 500; color: var(--ink-2); }
.cite {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
}
.fan-list { display: grid; gap: 6px; list-style: none; font-size: 0.8125rem; }
.fan-list li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; }
.fan-sources .is-kept { border-color: var(--line-strong); }
.fan-sources .is-kept::before { content: "\2713\00a0\00a0"; color: var(--accent); }
.fan-sources .is-dropped { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); }

/* Entity, attributes, then page or section. */
.tree { border: 1px solid var(--line); }
.tree-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.tree-node { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--bg); }
.tree-node p { font-weight: 600; letter-spacing: -0.01em; }
.tree-entity p { font-size: 1.375rem; letter-spacing: -0.025em; }
.tree-entity .label::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.tree-attrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; list-style: none; background: var(--line); }
.tree-attrs > li { padding: 16px 18px 20px; background: var(--bg); }
.tree-attr { margin-bottom: 10px; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.tree-attrs ul { display: grid; gap: 6px; list-style: none; }
.pg, .sec { font-size: 0.875rem; }
.pg::before, .sec::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; }
.pg::before { background: var(--accent); }
.sec { color: var(--muted); }
.sec::before { border: 1px solid var(--muted); }
.tree-key { display: flex; flex-wrap: wrap; gap: 20px; padding: 12px 18px; border-top: 1px solid var(--line); }

/* Page anatomy: wireframe with numbered pins next to the matching list. */
.anatomy { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.wire { position: sticky; top: calc(var(--topbar) + 20px); display: grid; gap: 12px; padding: 22px 22px 22px 40px; border: 1px solid var(--line-strong); background: var(--bg-raise); }
.w-row { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.w-pin, .anatomy-list li::before {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.w-pin { position: absolute; left: -28px; top: -2px; }
.w-row i { display: block; height: 7px; width: 100%; background: rgba(255, 255, 255, 0.14); border-radius: 2px; }
.w-lead i:last-child { width: 70%; }
.w-h1::after { content: ""; display: block; height: 16px; width: 80%; background: var(--ink); border-radius: 2px; }
.w-h2 i { height: 11px; width: 55%; background: rgba(255, 255, 255, 0.5); }
.w-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.w-table b { height: 14px; border: 1px solid var(--line-strong); }
.w-faq i { height: 10px; border: 1px solid var(--line-strong); background: transparent; }
.w-links u { display: block; height: 14px; width: 64px; border: 1px solid var(--accent); border-radius: 999px; }
.w-schema code { padding: 2px 8px; border: 1px dashed var(--muted); color: var(--muted); font-family: var(--mono); font-size: 0.75rem; }
.w-cta s { display: block; height: 22px; width: 120px; border-radius: 999px; background: var(--ink); }
.anatomy-list { list-style: none; counter-reset: part; border-top: 1px solid var(--line); }
.anatomy-list li { position: relative; counter-increment: part; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line); }
.anatomy-list li::before { content: counter(part); position: absolute; left: 0; top: 16px; }
.anatomy-list h3 { font-size: 1.0625rem; letter-spacing: -0.015em; margin-bottom: 4px; }
.anatomy-list p { color: var(--muted); font-size: 0.9rem; }

/* Home: compact pipeline and chapter rows. */
/* Home: interactive search pipeline. Without JS every stage shows, stacked. */
.pipeline-wrap { --progress: 0; margin-bottom: 40px; }
.pipeline { position: relative; margin: 4px 0 30px; }
.pipe-track { position: absolute; top: 21px; left: 10%; right: 10%; height: 2px; background: var(--line-strong); }
.pipe-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--progress) * 100%); background: var(--accent); transition: width 0.5s ease; }
.pipe-signal { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); opacity: 0; }
.pipe-stages { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pipe-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.pipe-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.pipe-name { font-size: 0.875rem; font-weight: 600; transition: color 0.25s; }
.pipe-stage:hover .pipe-dot { border-color: var(--ink); color: var(--ink); }
.pipe-stage.is-done .pipe-dot { border-color: var(--accent); color: var(--accent); }
.pipe-stage[aria-selected="true"] .pipe-dot { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 6px rgba(201, 242, 93, 0.12); }
.pipe-stage[aria-selected="true"] .pipe-name { color: var(--ink); }

.stage-view { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.js .stage-view:not(.is-active) { display: none; }
html:not(.js) .pipeline { display: none; }
html:not(.js) .stage-view + .stage-view { margin-top: 32px; }
.stage-step { color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.stage-copy h3 { margin: 8px 0 12px; font-size: clamp(2rem, 1rem + 2.2vw, 2.8rem); font-stretch: var(--display-stretch); font-weight: 800; line-height: 0.95; }
.stage-desc { max-width: 46ch; color: var(--ink-2); }
.stage-fix { margin-top: 16px; color: var(--muted); font-size: 0.875rem; }
.stage-fix strong { color: var(--accent); font-weight: 600; }
.stage-art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 240px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.015);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 16px 16px;
}
.art-label { margin: 18px 0 10px; color: var(--muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.art-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; color: var(--muted); font-size: 0.75rem; }
.chapters-title { margin: 8px 0 4px; }

/* Stage art: query typed, then parsed. */
.q-box { display: flex; align-items: center; gap: 10px; max-width: 340px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); }
.q-icon { position: relative; flex: none; width: 13px; height: 13px; border: 2px solid var(--muted); border-radius: 50%; }
.q-icon::after { content: ""; position: absolute; right: -6px; bottom: -4px; width: 6px; height: 2px; background: var(--muted); transform: rotate(45deg); }
.q-text { overflow: hidden; font-family: var(--font); font-size: 0.9rem; white-space: nowrap; }
.q-caret { width: 2px; height: 18px; background: var(--accent); }
.q-parse, .un-graph { display: flex; flex-wrap: wrap; gap: 8px; }
.q-chip, .un-attr, .un-entity { padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); font-size: 0.8125rem; }
.q-chip b, .un-attr b { display: block; margin-bottom: 2px; color: var(--accent); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.un-entity { align-self: center; border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* Stage art: crawl tree. */
.cr-level { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cr-level + .cr-level { position: relative; margin-top: 22px; }
.cr-level + .cr-level::before { content: ""; position: absolute; top: -18px; left: 50%; width: 1px; height: 14px; background: var(--line-strong); }
.cr-node { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 0.8125rem; }
.lg-ok::before, .lg-bad::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
.lg-ok::before { background: var(--accent); }
.lg-bad::before { border: 1px solid var(--muted); }
.art-crawl .art-legend { justify-content: center; }

/* Stage art: entity extraction. */
.un-text { font-size: 1.0625rem; line-height: 1.7; }
.un-text mark { padding: 1px 4px; border-radius: 4px; background: transparent; color: inherit; }

/* Stage art: ranking bars. */
.rk-list { display: grid; gap: 12px; list-style: none; }
.rk-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 26px; align-items: center; gap: 12px; font-size: 0.875rem; }
.rk-bar { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.rk-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--line-strong); }
.rk-list li:first-child .rk-bar i { background: var(--accent); }
.rk-list li:first-child .rk-name { color: var(--accent); font-weight: 700; }
.rk-score { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

/* Stage art: answer surfaces. */
.art-answer { gap: 10px; }
.an-block { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.an-ai { border-color: var(--accent); }
.an-label { width: 100%; color: var(--muted); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.an-line { flex: 1 1 60%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.an-short { flex-basis: 30%; }
.an-cite { padding: 3px 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 700; }
.an-pins { display: flex; gap: 14px; }
.an-pins i { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--line-strong); transform: rotate(-45deg); }
.an-pins i.you { background: var(--accent); }
.an-url { color: var(--accent); font-size: 0.8125rem; font-weight: 600; }

/* Animations replay each time a stage opens (hidden views restart them). */
@media (prefers-reduced-motion: no-preference) {
  .pipe-signal { opacity: 1; animation: pipe-travel 3.2s linear infinite; }
  @keyframes pipe-travel { from { left: 0; } to { left: calc(var(--progress) * 100%); } }
  .stage-view.is-active .q-text { animation: type 1.4s steps(17) both; }
  @keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .stage-view.is-active .q-caret { animation: blink 0.9s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .stage-view.is-active :is(.q-chip, .un-attr, .un-entity, .an-block) { animation: rise 0.45s ease both; animation-delay: var(--d, 0s); }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
  .stage-view.is-active .cr-ok { animation: fetched 0.4s ease both; animation-delay: var(--d, 0s); }
  @keyframes fetched { to { border-color: var(--accent); color: var(--ink); } }
  .stage-view.is-active .cr-bad { animation: missed 0.4s ease both; animation-delay: var(--d, 0s); }
  @keyframes missed { to { opacity: 0.55; text-decoration: line-through; } }
  .stage-view.is-active .un-text mark { animation: mark-on 0.4s ease both; animation-delay: var(--d, 0s); }
  @keyframes mark-on { to { background: rgba(201, 242, 93, 0.18); color: var(--accent); } }
  .stage-view.is-active .rk-bar i { animation: grow 0.8s ease both; animation-delay: var(--d, 0s); }
  @keyframes grow { from { width: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .cr-ok { border-color: var(--accent); color: var(--ink); }
  .cr-bad { opacity: 0.55; text-decoration: line-through; }
  .un-text mark { background: rgba(201, 242, 93, 0.18); color: var(--accent); }
}
html:not(.js) .cr-ok { border-color: var(--accent); color: var(--ink); }
html:not(.js) .cr-bad { opacity: 0.55; text-decoration: line-through; }
html:not(.js) .un-text mark { background: rgba(201, 242, 93, 0.18); color: var(--accent); }

@media (max-width: 860px) {
  .stage-view { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pipe-dot { width: 36px; height: 36px; font-size: 0.6875rem; }
  .pipe-track { top: 17px; }
  .pipe-name { font-size: 0.6875rem; }
  .stage-art { padding: 18px; }
  .rk-list li { grid-template-columns: 76px minmax(0, 1fr) 20px; gap: 8px; font-size: 0.8125rem; }
}
@media (max-width: 400px) { .pipe-name { font-size: 0.625rem; } }
.chapters { list-style: none; border-top: 1px solid var(--line); }
.chapters a { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.ch-title { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem); font-weight: 700; letter-spacing: -0.02em; }
.ch-note { color: var(--muted); font-size: 0.9rem; }
.chapters a:hover .ch-title { color: var(--accent); }

/* Expertise glossary and About skills. */
.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.glossary div { padding: 18px 20px 20px; background: var(--bg); scroll-margin-top: calc(var(--topbar) + 12px); }
.glossary dt { font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.glossary dd { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.glossary div:target { outline: 1px solid var(--accent); outline-offset: -1px; }

.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.skills .list-title { margin-bottom: 12px; }

@media (max-width: 1100px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-step:not(:last-child)::after { content: "\2193"; top: auto; bottom: -11px; right: auto; left: 18px; }
  .fanout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tree-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .anatomy { grid-template-columns: minmax(0, 1fr); }
  .wire { position: static; max-width: 360px; }
  .glossary { grid-template-columns: minmax(0, 1fr); }
  .chapters a { grid-template-columns: 32px minmax(0, 1fr); }
  .ch-note { grid-column: 2; }
}

@media (max-width: 560px) {
  .fanout, .tree-top, .tree-attrs, .skills, .where { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ layout without the side rail
   Sections are one column: the old rail becomes a small label row above the
   content. Page headers keep it as a details column on the right. */
.frame { grid-template-columns: minmax(0, 1fr); }
.rail {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  padding: clamp(28px, 3.5vw, 48px) var(--gutter) 0;
  border-right: 0;
  border-bottom: 0;
}
.rail .rail-note { max-width: 60ch; }
.frame > .body { padding-top: 14px; }
/* A section with no label row (the home page) opens straight on its H2, so its body
   carries the top spacing the label row used to give. */
.frame > .body:first-child:has(> h2:first-child) { padding-top: clamp(32px, 5vw, 56px); }
.page-head { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
.page-head > .body { order: 1; padding-top: clamp(28px, 3.5vw, 48px); }
.page-head > .rail { order: 2; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 18px; padding: clamp(28px, 3.5vw, 48px) var(--gutter); }
@media (max-width: 860px) {
  .page-head { grid-template-columns: minmax(0, 1fr); }
  .page-head > .rail { order: 0; padding-bottom: 0; }
  .page-head > .body { padding-top: 14px; }
}

/* ------------------------------------------------------------ type system, one set of rules sitewide
   Big headings: condensed Archivo 800, one tracking. Small headings: Archivo 82% 700.
   Small labels: one uppercase eyebrow style. Body text: Archivo at normal width. */
body :is(h1, h2, .display, .page-title, .section-title, .web-strip-title, .lead-title, .stage-copy h3,
.stats dd, .stat-row dd, .contact-value, .profile-platform, .post-title, .empty-title) {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  letter-spacing: -0.01em;
  word-spacing: 0.1em;
}
body :is(h3, .ch-title):not(.stage-copy h3) { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 700; letter-spacing: 0; }
.web-strip-title { font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem); }
.label, .kicker, .stage-step, .art-label, .tools-label, .stat-row dt, .stats dt, .hero-facts dt,
.lead-kicker, .an-label, .tree-attr, .fan-label, .markets-label, .footer-role, .footer-head, .footer-k,
.post-share-label, .post-takeaways-title, .post-side-title {
  font-family: var(--font);
  font-stretch: var(--text-stretch);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.list-title { font-family: var(--font); font-stretch: var(--text-stretch); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }

/* ------------------------------------------------------------ centered container
   Content sits in one centered column (max 1240px); section borders and
   backgrounds still run edge to edge. --edge is 0 on screens narrower than that. */
:root { --container: 1240px; }
.frame, .stat-row { padding-inline: max(0px, calc((100% - var(--container)) / 2)); }
.web-strip, .footer { padding-inline: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter)); }
.topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: max(0px, calc((100% - var(--container)) / 2)); }
.nav ul { justify-content: center; }
@media (max-width: 860px) { .topbar { grid-template-columns: minmax(0, 1fr) auto auto; } }

/* Cards: a lime line and an arrow show they are clickable. */
.card > a { position: relative; }
.card > a::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease; }
.card > a::after { content: "\2192"; position: absolute; right: 20px; bottom: 18px; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.25s; }
.card > a:hover::before, .card > a:focus-visible::before { width: 100%; }
.card > a:hover::after, .card > a:focus-visible::after { opacity: 1; transform: none; }

/* Hero: faint drifting dot field behind the content. */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(circle, rgba(201, 242, 93, 0.35) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1.4px);
  background-size: 220px 220px, 140px 140px;
  background-position: 30px 40px, 90px 10px;
}
.hero > .body { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: drift 60s linear infinite; }
  @keyframes drift { to { background-position: 250px 260px, -50px 150px; } }
}

/* ------------------------------------------------------------ centered layout (the hero keeps its split)
   Labels, headings and short intros are centered. Text blocks are centered on
   the page but read left-aligned. Grids keep the full content width. */
.frame:not(.hero) > .rail { justify-content: center; text-align: center; }
.frame:not(.hero) > .body > .section-title,
.frame:not(.hero) .prose > h2,
.cta .display,
.chapters-title { margin-inline: auto; text-align: center; }
.section-note { max-width: 60ch; margin: 0 auto 30px; color: var(--muted); font-size: 1rem; line-height: 1.55; text-align: center; }
.prose .section-note { color: var(--muted); font-size: 1rem; text-align: center; }
.section-note:has(+ .section-link) { margin-bottom: 10px; }
.section-title:has(+ .section-note), .prose h2:has(+ .section-note) { margin-bottom: 12px; }
.section-link { margin: 0 0 30px; text-align: center; }
.frame:not(.hero) > .body > :is(.prose, .faq, .takeaways, .lede, .empty, .rail-note) { margin-inline: auto; }
.frame:not(.hero) > .body > .rail-note { text-align: center; }
.frame:not(.hero) > .body > .actions, .cta .actions { justify-content: center; }
.cta .body { text-align: center; }
.empty { text-align: center; }
.split > div, .skills > div { text-align: center; }
.split .tags, .skills .tags { justify-content: center; }
.stats div { align-items: center; text-align: center; }

/* Page headers: one centered column; extras (facts, on-this-page links) sit under the intro. */
.page-head { grid-template-columns: minmax(0, 1fr); }
.page-head > .body { order: 1; padding-bottom: 14px; text-align: center; }
.page-head > .body:last-child { padding-bottom: clamp(28px, 3.5vw, 48px); }
.page-head > .rail { order: 2; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 0 var(--gutter) clamp(28px, 3.5vw, 48px); text-align: center; }
.page-head > .rail:has(> .label:only-child) { order: 0; padding: clamp(28px, 3.5vw, 48px) var(--gutter) 0; }
.page-head .crumbs { justify-content: center; margin-bottom: 18px; }
.page-head .portrait { width: 128px; margin: 0 auto 22px; border-radius: 50%; }
.page-head .kicker { justify-content: center; }
.page-head :is(.page-title, .lede) { margin-inline: auto; }
.page-head .meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }
.page-head .toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding-left: 0; list-style: none; }

/* Profiles strip and footer. */
.web-strip-title, .web-strip-note { text-align: center; }
.footer-base { justify-content: center; gap: 28px; }

/* About: mentor credit statement, centered and large, no box. */
.mentor-quote {
  max-width: 34ch;
  margin: 0 auto 30px;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
}
.mentor-quote::before { content: "\201C"; display: block; margin-bottom: 4px; color: var(--accent); font-size: 3.5rem; line-height: 0.7; }

/* About header: the entity orbit sits above the title. */
.page-head .orbit-wrap { width: min(100%, 420px); margin: 0 auto 26px; }

/* ------------------------------------------------------------ home hero: search results simulator
   A generic results page (no search-engine branding). Tabs switch the search
   type; the query types in and that type's result blocks appear. */
.serp { display: flex; flex-direction: column; gap: 14px; width: min(100%, 470px); margin-inline: auto; }
.serp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.serp-tab { padding: 6px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.serp-tab:hover { border-color: var(--ink); color: var(--ink); }
.serp-tab[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.serp-window { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--bg-raise); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); text-align: left; }
.serp-chrome { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.serp-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.serp-bar { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); font-size: 0.9rem; }
.serp-icon { position: relative; flex: none; width: 13px; height: 13px; border: 2px solid var(--muted); border-radius: 50%; }
.serp-icon::after { content: ""; position: absolute; right: -6px; bottom: -4px; width: 6px; height: 2px; background: var(--muted); transform: rotate(45deg); }
.serp-query { overflow: hidden; white-space: nowrap; }
.serp-caret { width: 2px; height: 17px; background: var(--accent); }
.serp-results { display: grid; align-content: start; gap: 10px; min-height: 318px; padding: 0 14px 16px; }
.sr { position: relative; display: block; margin: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); list-style: none; }
.sr[hidden] { display: none; }
.sr-tag { position: absolute; top: 9px; right: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(201, 242, 93, 0.12); color: var(--accent); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sr-label { margin-bottom: 8px; color: var(--muted); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.sr-line { display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.sr-short { width: 62%; }
.sr-ai { border-color: rgba(201, 242, 93, 0.5); }
.sr-cite { display: inline-block; margin-top: 9px; padding: 3px 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 700; }
.sr-places { display: grid; gap: 6px; list-style: none; font-size: 0.8125rem; }
.sr-places li { display: flex; align-items: center; gap: 9px; color: var(--ink-2); }
.sr-places li span { margin-left: auto; color: var(--muted); font-size: 0.75rem; }
.sr-places i { flex: none; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; background: var(--line-strong); transform: rotate(-45deg); }
.sr-places .is-you { color: var(--accent); font-weight: 700; }
.sr-places .is-you i { background: var(--accent); }
.sr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sr-tiles span { padding: 26px 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(rgba(255, 255, 255, 0.07) 0 22px, transparent 22px); color: var(--ink-2); font-size: 0.75rem; text-align: center; }
.sr-tiles .is-you { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.sr-url { color: var(--ink-2); font-size: 0.8125rem; }
.sr-snippet .sr-url { color: var(--accent); font-weight: 600; }
.sr-organic { display: grid; gap: 8px; padding-top: 30px; }
.sr-organic li { display: flex; align-items: center; gap: 10px; }
.sr-rank { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 0.6875rem; font-weight: 700; }
.sr-organic .is-you .sr-rank { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.sr-organic .is-you .sr-url { color: var(--accent); font-weight: 700; }
.sr-move { margin-left: auto; color: var(--accent); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.sr-move::before { content: "\25B2 "; }
@media (prefers-reduced-motion: no-preference) {
  .serp-caret { animation: blink 0.9s steps(1) infinite; }
  .serp.is-run .sr:not([hidden]) { animation: rise 0.45s ease both; animation-delay: var(--d, 0s); }
}
@media (max-width: 560px) {
  .serp-results { min-height: 0; }
  .sr-tag { position: static; display: inline-block; margin-bottom: 6px; }
  .sr-organic { padding-top: 11px; }
}

/* SERP simulator: drawn map pack, numbered places, location-page result.
   min-height fits the tallest tab, so switching tabs never shifts the page. */
.serp-results { min-height: 470px; }
.sr-mapview { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.map-ground { fill: rgba(255, 255, 255, 0.035); }
.map-park { fill: rgba(201, 242, 93, 0.08); }
.map-water { fill: none; stroke: rgba(120, 170, 255, 0.18); stroke-width: 6; stroke-linecap: round; }
.map-road { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 3; stroke-linecap: round; }
.map-main { stroke: rgba(255, 255, 255, 0.2); stroke-width: 6; }
.map-radius { fill: rgba(201, 242, 93, 0.06); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.map-pin path { fill: #6d6b6b; }
.map-pin text { fill: var(--bg); font-size: 9px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.pin-you path { fill: var(--accent); }
.pin-you text { fill: var(--accent-ink); }
.sr-places li b { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--line-strong); color: var(--bg); font-size: 0.625rem; }
.sr-places .is-you b { background: var(--accent); color: var(--accent-ink); }
.sr-loc-head { display: flex; align-items: center; gap: 10px; }
.sr-loc-head .sr-rank { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.sr-loc-head .sr-url { color: var(--accent); font-weight: 700; }
.sr-loc-title { margin: 6px 0 0 32px; font-size: 0.9375rem; font-weight: 700; }
.sr-areas-label { margin: 10px 0 6px 32px; color: var(--muted); font-size: 0.6875rem; }
.sr-areas { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 32px; }
.sr-areas span { padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); font-size: 0.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .map-pin, .map-radius { transform-box: fill-box; }
  .map-pin { transform-origin: 50% 100%; }
  .map-radius { transform-origin: center; }
  .serp.is-run .sr-map:not([hidden]) .map-pin { animation: pin-drop 0.5s cubic-bezier(0.3, 1.5, 0.6, 1) both; animation-delay: var(--d, 0s); }
  @keyframes pin-drop { from { opacity: 0; transform: translateY(-14px); } }
  .serp.is-run .sr-map:not([hidden]) .map-radius { animation: radius-in 0.6s ease both; animation-delay: 1.3s; }
  @keyframes radius-in { from { opacity: 0; transform: scale(0.4); } }
}
@media (max-width: 560px) {
  .serp-results { min-height: 0; }
  .sr-loc-title, .sr-areas-label, .sr-areas { margin-left: 0; }
}
@media (max-width: 400px) {
  .serp-tabs { gap: 4px; }
  .serp-tab { padding: 5px 9px; font-size: 0.75rem; }
}

/* ------------------------------------------------------------ blog post
   A centered header, a cover image, then one 760px reading column. Inside the
   column: short answer, contents (plain details, no JS), numbered chapters,
   tables, CSS charts, tools, calls to action. Author box and links follow. */
html:not(.js) .js-only { display: none !important; }
.post-head, .post-cover-frame { border-bottom: 0; }
.post-head .lede { max-width: 62ch; }
.byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 26px; font-size: 0.875rem; }
.byline-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.byline-who { display: grid; line-height: 1.3; text-align: left; }
.byline-who a { font-weight: 700; text-decoration: none; }
.byline-who a:hover { text-decoration: underline; }
.byline-who span { color: var(--muted); font-size: 0.8125rem; }
.byline-meta { display: flex; flex-wrap: wrap; justify-content: center; color: var(--muted); font-size: 0.8125rem; }
.byline-meta span + span::before { content: "\00B7"; margin: 0 9px; }
@media (min-width: 640px) { .byline-meta { padding-left: 14px; border-left: 1px solid var(--line); } }

.post-cover-frame > .body { padding-top: 0; padding-bottom: 0; }
.post-cover { width: min(100%, 1100px); margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; }
.post-cover img { width: 100%; }
.post-main > .body { padding-top: clamp(32px, 5vw, 56px); }

.post-body.prose { max-width: 760px; counter-reset: h2; }
.post-body > * + * { margin-top: 1.15em; }
.post-body > h2 { counter-increment: h2; margin-top: clamp(56px, 7vw, 88px); margin-bottom: 0; padding-top: clamp(36px, 5vw, 52px); border-top: 1px solid var(--line); }
.post-body > h2::before { content: counter(h2, decimal-leading-zero); display: block; margin-bottom: 14px; color: var(--accent); font-family: var(--font); font-stretch: var(--text-stretch); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; }
.post-body > h3 { margin-top: 2.1em; font-size: clamp(1.35rem, 1rem + 0.9vw, 1.75rem); line-height: 1.1; }
.post-body > :is(h2, h3) + * { margin-top: 0.85em; }
.post-body > h2 + * { margin-top: 1.2em; }
.post-body > :is(ul, ol) { display: grid; gap: 8px; padding-left: 1.3em; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }
.post-body > :is(ul, ol) li::marker { color: var(--accent); font-weight: 700; }
.post-body strong { color: var(--ink); }
.post-body a:not(.btn) { color: var(--ink); text-decoration-color: rgba(201, 242, 93, 0.55); }
.post-body a:not(.btn):hover { color: var(--accent); }
.post-body a.btn { text-decoration: none; }
.post-body code { padding: 1px 6px; border-radius: 6px; background: var(--bg-raise); font-size: 0.92em; }
.post-body figure { margin: 2em 0 0; }

/* Short answer under the title: the direct answer to the page question. */
.post-answer { padding: 22px 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--bg-raise); }
.post-body .post-answer p { color: var(--ink); font-size: 1.1875rem; line-height: 1.6; }
.post-body .post-answer .post-answer-label { margin-bottom: 8px; color: var(--accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; }

/* Contents: a details element, so it opens and closes without JavaScript. */
.post-toc { margin-top: 1.8em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-toc summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; list-style: none; }
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc summary::after { content: "+"; font-size: 1.1rem; letter-spacing: 0; transition: transform 0.2s; }
.post-toc[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.post-toc summary:hover { color: var(--ink); }
.post-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; padding: 0 0 18px; list-style: none; counter-reset: toc; }
.post-toc li { counter-increment: toc; }
.post-body .post-toc a { display: flex; gap: 10px; padding: 5px 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.35; text-decoration: none; }
.post-body .post-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; padding-top: 2px; color: var(--muted); font-size: 0.75rem; }
.post-body .post-toc a:hover { color: var(--accent); }
@media (max-width: 640px) { .post-toc ol { grid-template-columns: minmax(0, 1fr); } }

/* Tables scroll inside their frame on small screens instead of widening the page. */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
:is(.post-body, .price-table) table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
:is(.post-body, .price-table) :is(th, td) { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
:is(.post-body, .price-table) th { background: var(--bg-raise); color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
:is(.post-body, .price-table) td { color: var(--ink-2); }
:is(.post-body, .price-table) td:first-child { color: var(--ink); font-weight: 600; }
:is(.post-body, .price-table) tr:last-child td { border-bottom: 0; }

.post-figure img { width: 100%; border: 1px solid var(--line); border-radius: 14px; }
.post-body figcaption { margin-top: 12px; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; text-align: center; }

/* Charts drawn in CSS: a timeline, two donuts and a bar chart. */
.chart { padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 18px; background: var(--bg-raise); }
.post-body .chart-title { margin-bottom: 20px; color: var(--ink); font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 1.3rem; font-weight: 700; line-height: 1.15; text-align: center; }
.kg-timeline { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; }
.kg-timeline::before { content: ""; position: absolute; top: 6px; right: 0; left: 0; height: 1px; background: var(--line-strong); }
.kg-timeline li { position: relative; display: grid; align-content: start; gap: 5px; padding-top: 28px; }
.kg-timeline li::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg-raise); }
.kg-timeline li:last-child::before { background: var(--accent); }
.kg-timeline time { color: var(--accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.kg-timeline strong { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 1.125rem; line-height: 1.1; }
.kg-timeline span { color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
@media (max-width: 760px) {
  .kg-timeline { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-left: 28px; }
  .kg-timeline::before { top: 4px; bottom: 4px; right: auto; left: 6px; width: 1px; height: auto; }
  .kg-timeline li { padding-top: 0; }
  .kg-timeline li::before { top: 1px; left: -28px; }
}
.donuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.donut-card { display: grid; justify-items: center; gap: 12px; }
.donut { position: relative; width: min(100%, 190px); aspect-ratio: 1; border-radius: 50%; }
.donut-hole { position: absolute; inset: 21%; display: grid; place-content: center; gap: 3px; border-radius: 50%; background: var(--bg-raise); text-align: center; }
.donut-hole b { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 2rem; font-weight: 800; line-height: 1; }
.donut-hole small { color: var(--muted); font-size: 0.6875rem; line-height: 1.2; }
.post-body .donut-title { color: var(--ink); font-size: 0.875rem; font-weight: 600; text-align: center; }
.legend { display: grid; gap: 4px; width: 100%; max-width: 240px; color: var(--ink-2); font-size: 0.8125rem; list-style: none; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.legend b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .donuts { grid-template-columns: minmax(0, 1fr); } }
.bars { display: grid; gap: 10px; list-style: none; }
.bars li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 48px; align-items: center; gap: 12px; font-size: 0.875rem; }
.bar-label { color: var(--ink-2); }
.bars .is-entity .bar-label { color: var(--ink); font-weight: 600; }
.bar { height: 12px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.bar i { display: block; height: 100%; border-radius: 6px; background: #6d6b6b; }
.bars .is-entity .bar i { background: var(--accent); }
.bars b { text-align: right; font-variant-numeric: tabular-nums; }

/* Tools: a static example that works without JS; site.js makes it interactive. */
.post-tool { padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line-strong); border-radius: 20px; background: var(--bg-raise); }
.post-body > .post-tool, .post-body > .post-cta, .post-body > .chart { margin-top: 2em; }
.post-body .tool-kicker { color: var(--accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; }
.post-body .tool-title { margin-top: 6px; color: var(--ink); font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: clamp(1.4rem, 1rem + 1vw, 1.8rem); font-weight: 800; line-height: 1.05; }
.post-body .tool-note { margin-top: 8px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.tool-form { display: grid; gap: 12px; margin-top: 18px; }
.tool-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-form .span-2, .tool-actions { grid-column: 1 / -1; }
.tool-form label { display: grid; gap: 6px; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.tool-form [hidden] { display: none !important; }
.tool-form :is(input, select, textarea) { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 400; }
.tool-form textarea { resize: vertical; }
.tool-form :is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201, 242, 93, 0.15); }
.tool-form ::placeholder { color: #7a7878; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tool-actions .btn { min-height: 40px; padding: 8px 16px; font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
@media (max-width: 640px) { .tool-grid-2, .tool-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.triple-graph { display: block; width: 100%; height: auto; margin-top: 16px; overflow: visible; }
.tg-edge { stroke: var(--line-strong); stroke-width: 1.5; }
.tg-node rect { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.2; }
.tg-node text, .tg-center text, .tg-label { font-family: var(--font); font-stretch: var(--text-stretch); text-anchor: middle; dominant-baseline: central; }
.tg-node text { fill: var(--ink); font-size: 13px; font-weight: 600; }
.tg-label { fill: var(--muted); font-size: 11px; paint-order: stroke; stroke: var(--bg-raise); stroke-width: 5px; stroke-linejoin: round; }
.tg-center circle { fill: var(--accent); }
.tg-center text { fill: var(--accent-ink); font-size: 15px; font-weight: 800; }
.post-body .triple-sentence { margin-top: 6px; color: var(--ink); font-size: 1rem; text-align: center; }
.triple-list { display: grid; gap: 6px; margin-top: 14px; font-size: 0.875rem; list-style: none; }
.triple-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.triple-list :is(.t-e, .t-v) { padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; }
.triple-list .t-e { border-color: var(--accent); color: var(--accent); }
.triple-list .t-a { color: var(--muted); }
.triple-list .t-a::before, .triple-list .t-a::after { content: "\2192"; margin: 0 6px; color: #6d6b6b; }
.tool-output { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.tool-output-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.tool-copy { padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 0.75rem; letter-spacing: 0; text-transform: none; cursor: pointer; }
.tool-copy:hover { border-color: var(--accent); color: var(--accent); }
.tool-output pre { max-height: 380px; margin: 0; padding: 14px 16px; overflow: auto; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.55; }
.post-body .tool-output code { padding: 0; background: none; font-family: var(--font); font-stretch: 100%; font-size: inherit; }
.post-body .tool-hint { margin-top: 10px; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.check-list { margin-top: 16px; border-top: 1px solid var(--line); counter-reset: check; list-style: none; }
.check-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 8px; padding: 12px 0; border-bottom: 1px solid var(--line); counter-increment: check; }
.check-list li::before { content: counter(check, decimal-leading-zero); grid-row: span 2; padding-top: 3px; color: var(--accent); font-size: 0.75rem; font-weight: 600; }
.post-body .check-list a { color: var(--ink); font-weight: 700; text-decoration: none; }
.post-body .check-list a::after { content: " \2197"; color: var(--accent); }
.post-body .check-list a:hover { color: var(--accent); }
.check-list span { color: var(--muted); font-size: 0.875rem; line-height: 1.45; }
.qa-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.qa-pick { padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--ink-2); font: inherit; font-size: 0.875rem; cursor: pointer; }
.qa-pick:hover { border-color: var(--accent); color: var(--ink); }
.qa-pick[aria-pressed="true"] { border-color: var(--accent); background: rgba(201, 242, 93, 0.1); color: var(--accent); }
.qa-view { margin-top: 16px; }
.post-body .qa-search { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--ink); font-size: 1rem; }
.post-body .qa-search span { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.qa-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.qa-col { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.qa-col-entity { border-color: rgba(201, 242, 93, 0.45); }
.post-body .qa-col-title { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.post-body .qa-entity { margin-top: 8px; color: var(--accent); font-size: 0.9375rem; font-weight: 600; line-height: 1.45; }
.qa-list { display: grid; gap: 4px; margin-top: 8px; padding-left: 18px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; list-style: disc; }
.qa-list li::marker { color: var(--accent); }
.post-body .qa-note { margin-top: 12px; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
@media (max-width: 640px) { .qa-cols { grid-template-columns: minmax(0, 1fr); } }

/* Calls to action inside the post. */
.post-cta { padding: clamp(24px, 4vw, 36px); border: 1px solid var(--line-strong); border-radius: 20px; background: radial-gradient(120% 140% at 50% 0%, rgba(201, 242, 93, 0.09), transparent 62%), var(--bg-raise); text-align: center; }
.post-body .post-cta-kicker { color: var(--accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; }
.post-body .post-cta-title { margin-top: 8px; color: var(--ink); font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: clamp(1.6rem, 1rem + 1.6vw, 2.3rem); font-weight: 800; line-height: 1; }
.post-body .post-cta-text { max-width: 46ch; margin: 10px auto 0; color: var(--ink-2); font-size: 1rem; }
.post-cta .actions { justify-content: center; margin-top: 20px; }
.post-body > .post-actions { justify-content: center; margin-top: 1.6em; }


/* Written-by box and further reading under the post. */
.author-box { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 24px; max-width: 760px; margin: clamp(48px, 6vw, 72px) auto 0; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line-strong); border-radius: 20px; background: var(--bg-raise); }
.author-photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.author-kicker { color: var(--accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.author-name { margin-top: 4px; font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: clamp(1.5rem, 1rem + 1vw, 1.9rem); font-weight: 800; line-height: 1.05; }
.author-name a { text-decoration: none; }
.author-name a:hover { color: var(--accent); }
.author-role { margin-top: 4px; color: var(--muted); font-size: 0.875rem; }
.author-bio { margin-top: 12px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
.author-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 0.875rem; font-weight: 600; }
.author-links a { text-decoration: underline; }
@media (max-width: 560px) {
  .author-box { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .author-links { justify-content: center; }
}
.post-related { max-width: 760px; margin: 40px auto 0; text-align: center; }
.post-related ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); list-style: none; text-align: left; }
.post-related a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 18px; background: var(--bg); font-weight: 700; line-height: 1.25; text-decoration: none; }
.post-related a span { color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.post-related a:hover { color: var(--accent); }
@media (max-width: 640px) { .post-related ul { grid-template-columns: minmax(0, 1fr); } }

/* Blog list: cover thumbnail beside the title. */
.post-list { max-width: 940px; margin-inline: auto; }
.post-row a { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 24px; }
.post-thumb { width: 100%; border: 1px solid var(--line); border-radius: 12px; transition: border-color 0.2s; }
.post-row a:hover .post-thumb { border-color: var(--accent); }
.post-row-text { display: grid; gap: 8px; }
.post-row-meta { display: flex; flex-wrap: wrap; color: var(--muted); font-size: 0.8125rem; }
.post-row-meta span::before { content: "\00B7"; margin: 0 9px; }
@media (max-width: 760px) { .post-row a { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ home: resources
   Blog posts and the FAQ as two tabs. Without JavaScript the tab buttons stay
   hidden and both panels show, each under its own small label. */
.res-tabs { max-width: 940px; margin-inline: auto; }
.res-tablist { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; }
.res-tab { min-width: 96px; padding: 9px 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.res-tab:hover { border-color: var(--ink); color: var(--ink); }
.res-tab[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.res-panel[hidden] { display: none; }
.res-panel .faq { margin-inline: auto; }
.res-panel .section-link { margin: 26px 0 0; }
.res-nojs { margin: 34px 0 14px; text-align: center; }
.js .res-nojs { display: none; }

.feature-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; list-style: none; }
.feature-card:first-child { grid-column: 1 / -1; }
.feature-card a { display: grid; align-content: start; gap: 18px; height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-raise); text-decoration: none; transition: border-color 0.2s; }
.feature-card:first-child a { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 28px; }
.feature-card a:hover { border-color: var(--accent); color: inherit; }
.feature-card img { width: 100%; border: 1px solid var(--line); border-radius: 12px; }
.feature-text { display: grid; gap: 10px; padding: 4px 6px 4px 0; text-align: left; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.feature-tags span { padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); font-size: 0.75rem; }
.feature-tags span:first-child { border-color: var(--accent); color: var(--accent); }
.feature-meta { display: flex; flex-wrap: wrap; color: var(--muted); font-size: 0.8125rem; }
.feature-meta span::before { content: "\00B7"; margin: 0 9px; }
.feature-title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.01em; }
.feature-card:not(:first-child) .feature-title { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.6rem); }
.feature-desc { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.feature-more { color: var(--accent); font-size: 0.875rem; font-weight: 600; }
.feature-more::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform 0.2s; }
.feature-card a:hover .feature-more::after { transform: translateX(3px); }
@media (max-width: 760px) {
  .feature-posts { grid-template-columns: minmax(0, 1fr); }
  .feature-card:first-child a { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ------------------------------------------------------------ resume
   Centered header with photo, contact list and PDF download; a career path
   whose steps link to each role (no JavaScript needed); roles with durations.
   The print styles below turn the same page into an A4 resume, which
   _src/make_resume_pdf.py saves as the downloadable PDF. */
.resume-head .page-title { max-width: none; }
.resume-role { margin-top: 12px; color: var(--accent); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); font-weight: 600; }
.resume-role span { margin: 0 8px; color: var(--muted); }
.resume-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 22px; font-size: 0.9375rem; list-style: none; }
.resume-contact li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.resume-contact svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resume-contact a { text-decoration: none; }
.resume-contact a:hover { text-decoration: underline; }
.page-head .resume-actions { justify-content: center; }

.career-path { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 1000px; margin: 6px auto 0; list-style: none; }
.career-path::before { content: ""; position: absolute; top: 9px; right: 8%; left: 8%; height: 2px; background: linear-gradient(90deg, var(--line-strong), var(--accent)); }
.career-path a { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 4px 6px; text-align: center; text-decoration: none; }
.cp-dot { width: 20px; height: 20px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); transition: transform 0.2s, background-color 0.2s; }
.career-path .is-current .cp-dot { background: var(--accent); box-shadow: 0 0 0 5px rgba(201, 242, 93, 0.18); }
.cp-date { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.cp-role { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.career-path a:hover .cp-dot, .career-path a:focus-visible .cp-dot { background: var(--accent); transform: scale(1.15); }
.career-path a:hover .cp-role { color: var(--accent); }
@media (max-width: 760px) {
  .career-path { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 340px; }
  .career-path::before { top: 12px; bottom: 12px; right: auto; left: 9px; width: 2px; height: auto; background: linear-gradient(180deg, var(--line-strong), var(--accent)); }
  .career-path a { grid-template-columns: 20px 64px minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px; padding: 7px 0; text-align: left; }
}
.stats.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
@media (max-width: 1100px) { .stats.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.resume-roles .role { scroll-margin-top: calc(var(--topbar) + 16px); }
.resume-roles .role h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
.resume-roles .role:target h3 { color: var(--accent); }
.role-badge { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.resume-tags { justify-content: center; max-width: 900px; margin: 0 auto 30px; }
.skills.skills-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .skills.skills-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .skills.skills-4 { grid-template-columns: minmax(0, 1fr); } }

@media print {
  @page { size: A4; margin: 12mm 13mm; }
  :root { color-scheme: light; }
  html, body { background: #fff !important; }
  body::after, .topbar, .footer, .skip, dialog, .print-hide { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .resume {
    --ink: #161616; --ink-2: #333333; --muted: #5d5d5d; --accent: #4e7a00; --accent-ink: #ffffff;
    --line: #dcdcdc; --line-strong: #bcbcbc; --bg: #ffffff; --bg-raise: #f4f4f1;
    color: var(--ink); font-size: 9.5pt; line-height: 1.45;
  }
  .resume a { color: inherit; text-decoration: none; }
  .resume .frame { padding-inline: 0; border: 0; }
  .resume .frame:not(.hero) > .rail { display: none; }
  .resume .frame > .body { padding: 10px 0 2px; }
  .resume .frame:not(.hero) > .body > .section-title { margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1.5px solid var(--accent); font-size: 13pt; text-align: left; }
  .resume .resume-head > .body { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 16px; padding: 0 0 6px; text-align: left; }
  .resume .resume-head .portrait { grid-row: 1 / span 4; width: 78px; margin: 4px 0 0; }
  .resume .portrait img { filter: none; }
  .resume .resume-head .page-title { margin: 0; font-size: 24pt; line-height: 1; }
  .resume .resume-role { margin-top: 4px; font-size: 11pt; }
  .resume .resume-head .lede { max-width: none; margin: 6px 0 0; font-size: 9.5pt; }
  .resume .resume-contact { justify-content: flex-start; gap: 3px 14px; margin-top: 6px; font-size: 8.5pt; }
  .resume .resume-contact svg { width: 11px; height: 11px; }
  .resume .resume-roles .role { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px; padding: 7px 0; break-inside: avoid; }
  .resume .resume-roles .role h3 { font-size: 11pt; }
  .resume .role-badge { margin-bottom: 3px; padding: 1px 7px; font-size: 6.5pt; }
  .resume .role-meta { margin-top: 2px; font-size: 8pt; }
  .resume .role ul { gap: 2px; font-size: 8.8pt; }
  .resume .resume-tags { justify-content: flex-start; max-width: none; margin: 0 0 8px; }
  .resume .tags { gap: 4px; }
  .resume .tags li { padding: 2px 8px; font-size: 8pt; }
  .resume .cards { break-inside: avoid; }
  .resume .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resume .cards-3.resume-knowledge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resume .card-static { padding: 7px 10px 8px; }
  .resume .card h3 { font-size: 9.5pt; }
  .resume .card p { font-size: 8pt; line-height: 1.4; }
  .resume .card .idx { font-size: 7pt; }
  .resume .skills, .resume .split { gap: 8px 18px; break-inside: avoid; }
  .resume .split > div, .resume .skills > div { text-align: left; }
  .resume .split .tags, .resume .skills .tags { justify-content: flex-start; }
  .resume .list-title { margin-bottom: 4px; font-size: 8.5pt; }
  .resume section { break-inside: auto; }
  .resume h2, .resume h3 { break-after: avoid; }
}

/* ------------------------------------------------------------ home: cost table and closing CTA band */
.price-table { margin-top: 6px; border-radius: var(--radius); }
.table-note { margin: 12px auto 40px; color: var(--muted); font-size: 0.8125rem; text-align: center; }
.cost-close { margin-top: 30px; }
.cta-band > .body { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: clamp(36px, 5vw, 64px); text-align: left; }
.cta-band-title { max-width: 24ch; font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); line-height: 1; }
.cta-band-text { max-width: 60ch; margin-top: 12px; text-wrap: pretty; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.cta-band .btn { flex: none; }
@media (max-width: 760px) {
  .cta-band > .body { flex-direction: column; text-align: center; }
  .cta-band-title, .cta-band-text { margin-inline: auto; }
}

/* ------------------------------------------------------------ blog post: read time, share row, key takeaways, "On this page" sidebar */
.byline-read { display: inline-flex; align-items: center; gap: 6px; }
.byline-meta .byline-read::before { content: none; }
.byline-meta .byline-read { margin-left: 14px; }
:is(.byline-read, .post-share, .post-takeaways, .post-side-title) svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.byline-read svg { width: 14px; height: 14px; }

.post-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 22px; }
.post-share-label { color: var(--muted); }
.post-share ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; }
.post-share :is(a, button) { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.post-share :is(a, button):hover { border-color: var(--accent); color: var(--accent); }
.post-share svg { width: 16px; height: 16px; }
html:not(.js) .share-copy { display: none; }

.post-takeaways { margin-bottom: clamp(28px, 4vw, 40px); padding: 22px 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--bg-raise); }
.post-takeaways-title { margin-bottom: 14px; color: var(--accent); }
.post-takeaways ul { display: grid; gap: 12px; list-style: none; }
.post-takeaways li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.post-takeaways svg { width: 22px; height: 22px; color: var(--accent); }

.post-layout { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; }
.post-content { min-width: 0; }
.post-side { display: none; }
.post-side-inner { position: sticky; top: calc(var(--topbar) + 24px); display: flex; flex-direction: column; max-height: calc(100vh - var(--topbar) - 48px); border: 1px solid var(--line-strong); border-radius: 18px; background: var(--bg-raise); }
.post-side-title { display: flex; align-items: center; gap: 8px; padding: 16px 18px 10px; color: var(--muted); }
.post-side-title svg { width: 16px; height: 16px; }
.post-side-list { position: relative; overflow-y: auto; padding: 0 10px 14px; list-style: none; overscroll-behavior: contain; scrollbar-width: thin; }
.post-side-list ol { list-style: none; }
.post-side-list a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--muted); font-size: 0.875rem; line-height: 1.35; text-decoration: none; transition: color 0.2s, background-color 0.2s; }
.post-side-list ol a { padding-left: 24px; font-size: 0.8125rem; }
.post-side-list a:hover { color: var(--ink); }
.post-side-list a[aria-current] { background: rgba(201, 242, 93, 0.09); color: var(--accent); }
@media (min-width: 1120px) {
  .post-layout { grid-template-columns: minmax(0, 760px) 264px; column-gap: clamp(32px, 4vw, 56px); }
  .post-side { display: block; }
  .post-body .post-toc { display: none; }
}

/* ------------------------------------------------------------ home: industry notes, process, cost questions, profiles note */
.niche-note { max-width: 36ch; margin: -6px auto 14px; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.flow + .section-note { margin: 26px auto 0; }
.audit-cta { display: flex; justify-content: center; margin: 24px 0 0; }
.btn.btn-audit { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.btn.btn-audit:hover { border-color: #d8f884; background: #d8f884; color: var(--accent-ink); }
.cards + .section-note { margin-top: 30px; }
.web-strip-title + .web-strip-note { margin: -10px 0 24px; }