/* ================================================================
   AutomationByExperts - V3 design layer
   ================================================================
   Loaded LAST, after style.css and v2.css. It re-tunes the whole site
   from one place instead of editing hundreds of rules in the older
   layers:

   - Type: Geist for UI and body, Geist Mono for numbers and labels,
     Instrument Serif italic for the accent word in headings. That
     italic replaces the animated indigo/violet/cyan gradient text.
   - Colour: one tinted neutral family and ONE accent. --accent-2,
     --accent-3 and both gradients collapse onto it, so every
     `var(--gradient)` in the older layers goes flat untouched.
     The accent stays in the indigo family on purpose: the live blog
     posts carry inline #6366f1 CTA boxes (ai_utils._inject_cta) and
     every generated banner is dark indigo. A new hue would clash with
     content that lives in the database.
   - Surfaces: grain, tinted shadows, varied radii, pointer spotlight.
   - Layout: left-aligned editorial section headers and page heroes.
   - New components: the homepage hero console and /portfolio.
   ================================================================ */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --font-sans:  'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-body:  var(--font-sans);

  /* One neutral family, tinted toward the accent hue. */
  --bg-primary:    #F4F7FB;
  --bg-secondary:  #EAF0F8;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F8FAFD;
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --surface-3:     #EEF3FA;

  --line:          rgba(13, 27, 46, 0.12);
  --line-strong:   rgba(11, 95, 255, 0.45);
  --border:        var(--line);
  --border-hover:  var(--line-strong);

  --ink:           #0d1b2e;
  --ink-2:         #52627a;
  --ink-3:         #5f6f86;
  --text-primary:  var(--ink);
  --text-secondary:var(--ink-2);
  --text-muted:    var(--ink-3);
  --text-body:     #243247;

  /* The single accent. #5d61d6 carries white labels at 5:1; text on the
     dark ground uses --accent-text (7.9:1) instead. */
  --accent:        #0B5FFF;
  --accent-hover:  #0A4FD6;
  --accent-2:      var(--accent);
  --accent-3:      var(--accent);
  --accent-text:   #0A4FD6;
  --accent-light:  #0A4FD6;
  --accent-soft:   rgba(11, 95, 255, 0.09);

  --gradient:      linear-gradient(var(--accent), var(--accent));
  --gradient-text: linear-gradient(var(--accent-text), var(--accent-text));

  --green:         #0b8f5e;
  --ok:            #0b8f5e;
  --yellow:        #b26b00;

  --radius-xs:     6px;
  --radius-sm:     8px;
  --radius:        10px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     22px;

  /* Shadows carry the background hue instead of flat black. */
  --shadow-card:   0 1px 2px rgba(13, 27, 46, 0.05), 0 14px 34px -24px rgba(13, 27, 46, 0.25);
  --shadow-hover:  0 0 0 1px rgba(11, 95, 255, 0.25), 0 22px 44px -24px rgba(11, 95, 255, 0.35);
  --glow-accent:   var(--shadow-hover);
  --lift:          0 28px 60px -34px rgba(13, 27, 46, 0.35);

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);

  --z-nav:         1000;
  --z-overlay:     1100;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  letter-spacing: -0.006em;
  background-color: var(--bg-primary);
  background-image: radial-gradient(64rem 34rem at 88% -14rem, rgba(11, 95, 255, 0.11), transparent 62%);
  background-attachment: scroll;
}

/* Grain: breaks up the flat dark ground. Fixed and pointer-transparent. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0.04;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

input, select, textarea, button { font-family: inherit; }
::selection { background: rgba(11, 95, 255, 0.38); color: #fff; }

::-webkit-scrollbar-thumb { background: #b9c4d6; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Skip link: first focusable element on every page (partials/nav.html). */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: calc(var(--z-overlay) + 1);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateY(-180%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: none; }
#main:focus { outline: none; }

/* Numbers line up in every stat. */
.stat-pill, .stat-num, .psm strong, .pricing-num, .pricing-amount, .ths strong,
.blog-date, .actor-card-stats, .tool-cat-count { font-variant-numeric: tabular-nums; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { letter-spacing: -0.025em; }

.hero-title,
.page-title,
.section-title,
.post-title,
.tools-hero-title,
.tool-detail-title {
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
}
.section-title { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: 1rem; }
.page-title    { font-size: clamp(2.1rem, 5vw, 3.5rem); max-width: 24ch; }
.post-title    { line-height: 1.12; letter-spacing: -0.03em; }

/* The accent word in a heading: serif italic, not a shimmering gradient. */
.gradient-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -0.01em;
  line-height: 1;
  padding-right: 0.04em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--accent-text);
  animation: none;
}
.stat-num, .pricing-amount, .ths strong {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
  animation: none;
}

.section-desc, .page-sub, .hero-desc, .post-excerpt { max-width: 60ch; text-wrap: pretty; }
.section-desc { color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; }

/* Labels: mono, sentence case, a short rule instead of a pill. */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--accent-text);
}
.section-tag::before {
  width: 1.25rem;
  height: 1px;
  margin: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
}
.answer-label, .ref-band-tag, .solve-q, .ad-label {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ---------- Sections ---------- */
.section { padding: 6.5rem 0 7rem; }
.section-alt { background: var(--bg-secondary); }

.section-header { text-align: left; margin-bottom: 3rem; }
.section-header .section-desc { margin: 0; }

/* Wide screens: title on the left, the explanation beside it. */
@media (min-width: 900px) {
  .container:not(.container-narrow) > .section-header {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: 4rem;
    align-items: end;
  }
  .container:not(.container-narrow) > .section-header > * { grid-column: 1; }
  .container:not(.container-narrow) > .section-header > .section-title { margin-bottom: 0; }
  .container:not(.container-narrow) > .section-header > .section-desc {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    padding-bottom: 0.35rem;
  }
}

.section > .container > .center { text-align: left; }
.mt-4 { margin-top: 3rem; }

/* ---------- Page heroes: left-aligned, on the same edge as the nav logo ---------- */
.page-hero {
  text-align: left;
  padding: calc(var(--nav-height) + 4.5rem) 0 4rem;
  background:
    radial-gradient(56rem 26rem at 78% -10rem, rgba(11, 95, 255, 0.16), transparent 64%),
    var(--bg-primary);
}
.page-hero .container { max-width: 1200px; }
.page-hero .page-sub { margin: 0; }
.page-hero .hero-cta,
.hero-stat-row,
.crumbs { justify-content: flex-start; }
.answer-block {
  margin: 2rem 0 0;
  border-color: var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: linear-gradient(180deg, rgba(11, 95, 255, 0.07), rgba(11, 95, 255, 0.015));
}

.blog-hero, .tools-hero { text-align: left; }
.tools-hero-title, .tools-hero-desc { margin-left: 0; }
.tools-hero .tools-jump-nav { justify-content: flex-start; }

.crumbs { font-family: var(--font-mono); font-size: 0.74rem; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--radius);
  padding: 0.78rem 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.18s var(--ease-out), background-color 0.18s ease,
              border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px -10px rgba(11, 95, 255, 0.8);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 26px -12px rgba(11, 95, 255, 0.9);
}
.btn-primary::after { display: none; }
.btn-secondary {
  background: rgba(13, 27, 46, 0.03);
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-secondary:hover {
  background: rgba(13, 27, 46, 0.06);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn-sm { padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); }
.btn-nav {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
}
.btn-nav:hover { background: var(--accent-hover); box-shadow: 0 8px 20px -10px rgba(11, 95, 255, 0.9); }

/* Tertiary action: a text link with a sliding arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-text);
  transition: color 0.18s ease;
}
.link-arrow .arr { display: inline-block; transition: transform 0.2s var(--ease-out); }
.link-arrow:hover { color: var(--accent-light); }
.link-arrow:hover .arr { transform: translateX(3px); }

/* ---------- Nav ---------- */
.navbar { z-index: var(--z-nav); }
.navbar.scrolled {
  background: rgba(244, 247, 251, 0.85);
  box-shadow: 0 1px 0 var(--line);
}
.nav-logo { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.035em; }
.logo-text .accent { color: var(--accent-text); }
.nav-links a { font-size: 0.875rem; color: var(--ink-2); }
.nav-links a:hover { background: rgba(13, 27, 46, 0.04); color: var(--ink); }
.nav-links a.active:not(.btn-nav) { background: transparent; color: var(--ink); }
.nav-links a::after { height: 1px; bottom: 0.32rem; background: var(--accent-text); }
/* Seven items since "Managed Scraping": keep each label on one line and
   tighten the padding just above the hamburger breakpoint so they still fit. */
.nav-links a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1120px) {
  .nav-links { gap: 0; }
  .nav-links a { padding: 0.5rem 0.5rem; font-size: 0.82rem; }
}
.nav-drop-menu { border-color: var(--line); border-radius: var(--radius-lg); box-shadow: var(--lift); }
.nav-drop-menu a:hover { background: rgba(13, 27, 46, 0.04); }
/* `.nav-links a` is nowrap, which made the category descriptions run out of
   the menu and over the page behind it. Let them wrap inside the panel. */
.nav-drop-menu {
  background-color: var(--surface-2);
  max-height: calc(100vh - var(--nav-height) - 1.5rem);
  overflow-y: auto;
}
.nav-drop-menu a { white-space: normal; }
.nav-drop-menu a > span:last-child { min-width: 0; }

.hamburger span { transition: transform 0.25s var(--ease-out), opacity 0.2s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Six nav items no longer fit between 769px and 900px, so the menu
   collapses at the same width the Actors dropdown already flattens. */
@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
    background: rgba(244, 247, 251, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .hamburger { display: flex; }
  .nav-links a::after { display: none; }
  .nav-links .btn-nav { justify-content: center; margin-top: 0.6rem; }
}

/* ---------- Cards ---------- */
.cat-card, .actor-card, .solve-card, .related-card, .blog-card,
.testimonial-card, .steps-grid li, .mini-item, .contact-link {
  background-color: var(--surface-2);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
.cat-card:hover, .actor-card:hover, .solve-card:hover, .related-card:hover,
.blog-card:hover, .contact-link:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.testimonial-card:hover { transform: none; }

/* The old gradient top-edge reveal: gone with the gradient. */
.project-card::after, .why-card::after, .testimonial-card::after,
.tool-card::after, .tools-index-card::after { display: none; }

.cat-card h3, .actor-card-name, .solve-card h3, .blog-card-title, .related-card strong {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Pointer spotlight - main.js adds .spotlight and feeds --mx/--my. */
@media (hover: hover) and (pointer: fine) {
  .spotlight {
    background-image: radial-gradient(480px circle at var(--mx, -100%) var(--my, -100%),
                      rgba(11, 95, 255, 0.09), transparent 42%);
  }
}

/* Problems read as quotes, in two wide columns instead of three narrow ones. */
.solve-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 1rem; }
.solve-card { padding: 1.9rem 1.9rem 1.6rem; }
.solve-card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.stat-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0;
  border-radius: var(--radius-xs);
  background: rgba(13, 27, 46, 0.03);
}
.stat-pill:hover { transform: none; background: rgba(13, 27, 46, 0.03); border-color: var(--line); }

.chip { border-radius: var(--radius-sm); }
.chip.active { background: var(--accent); border-color: var(--accent); }

.testimonial-card { gap: 0.9rem; padding: 1.6rem; }
.t-text { font-style: normal; color: var(--text-body); font-size: 0.95rem; }
.t-stars { color: var(--yellow); letter-spacing: 0.08em; font-size: 0.8rem; }
.t-avatar, .author-avatar, .verdict-avatar, .about-avatar {
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(11, 95, 255, 0.25);
  color: var(--accent-text);
}

.steps-num { border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-mono); }
.blog-cat-tag, .tag, .tool-badge { border-radius: var(--radius-xs); }
.blog-cat-tag { font-family: var(--font-mono); font-weight: 500; }
.partner-badge { background: var(--accent); border-radius: var(--radius-xs); }
.actor-hero-badge.tip { background: var(--accent); }
.tcard-ribbon { box-shadow: none; }
.article-cta-box .btn-primary {
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px -10px rgba(11, 95, 255, 0.8);
}

/* ---------- Forms ---------- */
.form-input,
.form-group input,
.form-group select,
.form-group textarea,
.search-input,
.email-capture-form input {
  font-family: inherit;
  background: #EEF3FA;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.form-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.22);
}
/* Only after the visitor has interacted, so an untouched form is not red. */
.form-group input:user-invalid,
.form-group textarea:user-invalid,
.form-input:user-invalid {
  border-color: rgba(239, 106, 106, 0.65);
  box-shadow: 0 0 0 3px rgba(239, 106, 106, 0.14);
}
.contact-form-wrap, .card-panel { border-color: var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }

/* ---------- Article body ---------- */
.post-content code { font-family: var(--font-mono); color: var(--accent-light); }
.post-content p code, .post-content li code { background: var(--accent-soft); border-color: rgba(11, 95, 255, 0.22); }
.income-value { font-family: var(--font-mono); }

/* ---------- Footer ---------- */
.footer { border-top-color: var(--line); padding: 4.5rem 0 2rem; }
.footer-top { border-bottom-color: var(--line); }
.footer-links h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-3);
}
.footer-links a { color: var(--ink-2); }
.footer-links a:hover { color: var(--ink); }
.footer-preferred { border-radius: var(--radius-sm); }

/* ================================================================
   Homepage hero
   ================================================================ */
.hero-v3 {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: auto;
  overflow: hidden;
  padding: calc(var(--nav-height) + 4.5rem) 0 5.5rem;
}
/* Dot grid, faded out toward the edges. Shared with the portfolio hero. */
.hero-v3::before,
.pf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(13, 27, 46, 0.14) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 72% 28%, #000 15%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 72% 28%, #000 15%, transparent 75%);
}
.hero-v3::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -18rem;
  right: -12rem;
  width: 46rem;
  height: 46rem;
  max-width: 100%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(11, 95, 255, 0.2), transparent);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-copy { min-width: 0; }

.hero-v3 .hero-badge {
  margin-bottom: 1.6rem;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: #0b8f5e;
  background: rgba(11, 143, 94, 0.07);
  border-color: rgba(11, 143, 94, 0.22);
}
.hero-v3 .hero-title {
  font-size: clamp(2.7rem, 6.2vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  margin-bottom: 1.4rem;
}
.hero-v3 .hero-typing-wrapper {
  min-height: 1.9rem;
  margin-bottom: 1.3rem;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 500;
}
.hero-v3 .typing-prefix { color: var(--ink-3); }
.hero-v3 .typing-text, .hero-v3 .typing-cursor { color: var(--accent-text); }
.hero-v3 .hero-desc { margin: 0 0 2rem; max-width: 50ch; font-size: 1.08rem; color: var(--ink-2); }
.hero-v3 .hero-cta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem 1.5rem;
  margin-bottom: 1.25rem;
}
.hero-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); margin: 0; }

/* The console: live Store numbers where the pill row used to be. */
.hero-console {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(13, 27, 46, 0.035), rgba(13, 27, 46, 0.01)), var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--lift);
}
.console-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.2rem 0.35rem 1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-2);
}
.console-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(11, 143, 94, 0.15);
}
.console-sync { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.console-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 1rem 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--line);
}
.console-stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.4rem;
  padding: 1rem 1.1rem;
  background: var(--surface-2);
}
.console-stats dt { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }
.console-stats dd {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.console-list { list-style: none; margin: 0; padding: 0; }
.console-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.68rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.18s ease;
}
.console-list a:hover { background: rgba(13, 27, 46, 0.04); }
.hc-rank { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }
.hc-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
}
.hc-users {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent-text);
}
.console-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding: 0.9rem 0.5rem 0.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent-text);
}
.console-foot .arr { transition: transform 0.2s var(--ease-out); }
.console-foot:hover .arr { transform: translateX(3px); }

.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-v3 { padding: calc(var(--nav-height) + 3rem) 0 4rem; }
}
@media (max-width: 480px) {
  .hero-v3 .hero-title { font-size: clamp(2.3rem, 11vw, 2.9rem); }
  .hero-v3 .hero-cta .btn { width: 100%; justify-content: center; }
  .console-stats dd { font-size: 1.4rem; }
  .console-sync { display: none; }
}

/* ================================================================
   /portfolio
   ================================================================ */
.pf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--nav-height) + 3.5rem) 0 5rem;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(56rem 30rem at 85% -8rem, rgba(11, 95, 255, 0.16), transparent 64%);
}
.pf-hero .crumbs { margin-bottom: 2.5rem; }
.pf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: end;
}
.pf-hero-copy { min-width: 0; }
.pf-title {
  margin: 0 0 1.4rem;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.pf-lede {
  max-width: 56ch;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; }

/* Track-record card */
.pf-card {
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(13, 27, 46, 0.035), rgba(13, 27, 46, 0.01)), var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--lift);
}
.pf-card-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.pf-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.pf-card-name { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.pf-card-role { margin: 0.15rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-2); }
.pf-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; }
.pf-badge {
  padding: 0.22rem 0.5rem;
  border: 1px solid rgba(11, 143, 94, 0.25);
  border-radius: var(--radius-xs);
  background: rgba(11, 143, 94, 0.06);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #0b8f5e;
}
.pf-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--line);
}
.pf-metrics > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.35rem;
  padding: 0.9rem 0.85rem;
  background: var(--surface-2);
}
.pf-metrics dt { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); }
.pf-metrics dd {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pf-facts { list-style: none; display: grid; gap: 0.5rem; margin: 1.2rem 0 0; padding: 0; font-size: 0.83rem; color: var(--ink-2); }
.pf-facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--line);
}
.pf-facts li:last-child { padding-bottom: 0; border-bottom: 0; }
.pf-facts span:last-child { color: var(--ink); font-weight: 500; text-align: right; }
.pf-card-source { margin: 1rem 0 0; font-size: 0.74rem; color: var(--ink-3); }
.pf-card-source a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* Case studies: an uneven bento, not three equal columns. 4+2 / 3+3 / 2+2+2 */
.pf-work { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.pf-case {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  min-width: 0;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--surface-2);
  box-shadow: var(--shadow-card);
  transition: transform 0.22s var(--ease-out), border-color 0.22s ease, box-shadow 0.22s ease;
}
.pf-case:nth-child(1) { grid-column: span 4; }
.pf-case:nth-child(2) { grid-column: span 2; }
.pf-case:nth-child(3), .pf-case:nth-child(4) { grid-column: span 3; }
.pf-case:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.pf-case:focus-within { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.pf-case-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.pf-case-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(13, 27, 46, 0.04);
  font-size: 1.35rem;
}
.pf-case-num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }
.pf-case h3 { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.pf-case:nth-child(1) h3 { max-width: 22ch; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.12; }
/* Stretched link: the whole card is the click target, the title is the name. */
.pf-case h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pf-case h3 a:focus-visible { outline: none; }
.pf-case p { flex: 1; max-width: 60ch; margin: 0 0 1.25rem; font-size: 0.9rem; line-height: 1.65; color: var(--ink-2); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.2rem; }
.pf-tag {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: rgba(13, 27, 46, 0.035);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-2);
}
.pf-case-more { margin-top: auto; font-size: 0.85rem; font-weight: 600; color: var(--accent-text); }
.pf-case-more .arr { display: inline-block; transition: transform 0.2s var(--ease-out); }
.pf-case:hover .pf-case-more .arr { transform: translateX(3px); }

@media (max-width: 960px) {
  .pf-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-case, .pf-case:nth-child(n) { grid-column: span 1; }
  .pf-case:nth-child(1) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pf-work { grid-template-columns: 1fr; }
  .pf-case:nth-child(n) { grid-column: auto; }
}

/* Freelancer portfolio items: zig-zag rows with a run-summary block. */
.pf-show { display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 5.5rem); }
.pf-show-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.pf-show-row:nth-child(even) .pf-show-copy { order: 2; }
.pf-show-num {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--accent-text);
}
.pf-show-copy h3 { margin-bottom: 0.9rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.pf-show-copy p { max-width: 52ch; margin-bottom: 1.25rem; line-height: 1.75; color: var(--ink-2); }
.pf-points { list-style: none; display: grid; gap: 0.55rem; margin: 0; padding: 0; }
.pf-points li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.55; color: var(--text-body); }
.pf-points li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 1px; background: var(--accent-text); }
.pf-show-link { margin-top: 1.4rem; }

.pf-spec {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #EEF3FA;
  box-shadow: var(--lift);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.pf-spec-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--ink-3);
}
.pf-spec-status { color: #0b8f5e; }
.pf-spec-status::before { content: '\25CF'; margin-right: 0.4rem; font-size: 0.6rem; vertical-align: 0.1em; }
.pf-spec dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem 1.5rem;
  margin: 0;
  padding: 1.1rem 1.1rem 1.25rem;
}
.pf-spec dt { color: var(--ink-3); }
.pf-spec dd { margin: 0; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .pf-show-row { grid-template-columns: 1fr; }
  .pf-show-row:nth-child(even) .pf-show-copy { order: 0; }
}

/* Products I maintain */
.pf-products {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.pf-products > * { min-width: 0; }
.pf-products-text { max-width: 50ch; line-height: 1.75; color: var(--ink-2); }
.pf-bignums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; margin: 2.25rem 0; }
.pf-bignum { display: flex; flex-direction: column-reverse; gap: 0.5rem; }
.pf-bignum dt { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-3); }
.pf-bignum dd {
  margin: 0;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.pf-list-label { margin-bottom: 0.9rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-3); }
.pf-actor-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pf-actor-list a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0.35rem;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease;
}
.pf-actor-list a:hover { background: rgba(13, 27, 46, 0.025); }
.pal-icon { font-size: 1.3rem; text-align: center; }
.pal-body { min-width: 0; }
.pal-name { display: block; font-size: 0.95rem; font-weight: 500; transition: transform 0.2s var(--ease-out); }
.pf-actor-list a:hover .pal-name { transform: translateX(4px); }
.pal-sub { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8rem; color: var(--ink-3); }
.pal-stat { font-family: var(--font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }

@media (max-width: 860px) { .pf-products { grid-template-columns: 1fr; } }

/* Specialisations + stack */
.pf-skills { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
.pf-skills > * { min-width: 0; }
.pf-focus { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: focus; }
.pf-focus li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.3rem 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  counter-increment: focus;
}
.pf-focus li::before {
  content: counter(focus, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
}
.pf-focus strong { font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; }
.pf-focus span { font-size: 0.88rem; line-height: 1.6; color: var(--ink-2); }
.pf-stack h3 { margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-3); }
.pf-stack-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pf-stack-tags span {
  padding: 0.38rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(13, 27, 46, 0.025);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}

@media (max-width: 860px) { .pf-skills { grid-template-columns: 1fr; } }

/* Reviews: a masonry wall, lead review in the serif. */
.pf-reviews { columns: 3 300px; column-gap: 1rem; }
.pf-review {
  break-inside: avoid;
  margin: 0 0 1rem;
  padding: 1.4rem 1.4rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
}
.pf-review:first-child { border-color: rgba(11, 95, 255, 0.28); background: linear-gradient(180deg, rgba(11, 95, 255, 0.10), rgba(11, 95, 255, 0.02)), var(--surface-2); }
.pf-review-stars { margin-bottom: 0.75rem; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--yellow); }
.pf-review blockquote { margin: 0; }
.pf-review blockquote p { margin: 0; font-size: 0.94rem; line-height: 1.7; color: var(--text-body); }
.pf-review:first-child blockquote p { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.32; color: var(--ink); }
.pf-review-project { display: block; margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-text); }
.pf-review figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.pf-review-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(13, 27, 46, 0.05);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
}
.pf-review figcaption strong { display: block; font-size: 0.86rem; font-weight: 600; }
.pf-review figcaption small { display: block; font-size: 0.76rem; color: var(--ink-3); }
.pf-reviews-foot { margin-top: 1.5rem; }

/* How a project runs */
.pf-process {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.pf-process li { position: relative; min-width: 0; padding-top: 1.6rem; }
.pf-process li::before { content: ''; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 1px; background: var(--accent-text); }
.pf-process-step { display: block; margin-bottom: 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }
.pf-process strong { display: block; margin-bottom: 0.5rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.pf-process p { margin: 0; font-size: 0.88rem; line-height: 1.65; color: var(--ink-2); }

@media (max-width: 860px) { .pf-process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.25rem; } }
@media (max-width: 520px) { .pf-process { grid-template-columns: 1fr; } }

/* Closing CTA */
.pf-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 2rem 3rem;
  align-items: end;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  background: radial-gradient(40rem 22rem at 100% 0%, rgba(11, 95, 255, 0.22), transparent 70%), var(--surface-2);
  box-shadow: var(--lift);
}
.pf-cta h2 { max-width: 18ch; margin-bottom: 0.9rem; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.04em; }
.pf-cta p { max-width: 52ch; margin: 0; line-height: 1.7; color: var(--ink-2); }
.pf-cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.65rem; min-width: 15rem; }
.pf-cta-actions .btn { justify-content: center; }
.pf-cta-actions .link-arrow { justify-content: center; margin-top: 0.35rem; font-size: 0.85rem; }

@media (max-width: 960px) { .pf-hero-grid { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 760px) {
  .pf-cta { grid-template-columns: 1fr; align-items: start; }
  .pf-cta-actions { min-width: 0; }
}
@media (max-width: 420px) { .pf-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .section { padding: 4.25rem 0 4.75rem; }
  .page-hero { padding: calc(var(--nav-height) + 2.75rem) 0 3rem; }
}

/* ---------- Example tasks (actor pages + /apify/examples) ---------- */
/* Cards are fixed height by design: nothing inside them expands any more (the
   task input moved to the task page), the title is clamped to 2 lines and the
   summary to 5, so every card in a row lines up. */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.8rem; }
.ex-card {
  min-width: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1rem 1.1rem;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scroll-margin-top: calc(var(--nav-height, 64px) + 1rem);
}
.ex-card:target { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.post-content .ex-card .ex-title,
.ex-card .ex-title {
  margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  /* Reserved, not just capped: a one-line title would otherwise make that card
     shorter than the rest of its row. */
  min-height: calc(2 * 1.35em);
}
.ex-card .ex-desc {
  margin: 0; font-size: 0.84rem; line-height: 1.6; color: var(--ink-2);
  /* Clamped so every closed card in a row is the same height: the cards do not
     stretch to each other (that made one open input look like all of them), so
     even summaries are what keeps the row tidy. Full text is on the task page. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
  min-height: calc(5 * 1.6em);   /* same reason, and covers a task with no summary */
}
.ex-card .ex-actor { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); text-decoration: none; }
.ex-card .ex-actor:hover { color: var(--accent-light); }
.ex-input summary { cursor: pointer; font-size: 0.8rem; color: var(--accent-text); }
.ex-input pre,
.post-content .ex-input pre {
  margin: 0.5rem 0 0; padding: 0.7rem 0.8rem; max-height: 16rem; overflow: auto;
  background: var(--bg-primary); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5; color: var(--text-body);
}
.ex-input code { background: none; padding: 0; font-size: inherit; color: inherit; }
.post-content .ex-card .ex-title a,
.ex-card .ex-title a { color: inherit; text-decoration: none; }
.post-content .ex-card .ex-title a:hover,
.ex-card .ex-title a:hover { color: var(--accent-light); text-decoration: underline; }
.ex-card .ex-run { margin-top: auto; align-self: flex-start; }
.ex-actions {
  /* Two equal columns, not a wrapping flex row: with the longer labels the pair
     wrapped onto two lines in a narrow card, which left every card in the row
     ending at a different height. */
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: auto;
}
.ex-actions .btn {
  min-width: 0; justify-content: center; text-align: center;
  padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.78rem; white-space: nowrap;
}
@media (max-width: 380px) { .ex-actions { grid-template-columns: 1fr; } }
.post-content pre.ex-input-block,
pre.ex-input-block {
  margin: 0; padding: 0.9rem 1rem; max-height: 28rem; overflow: auto;
  background: var(--bg-primary); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; color: var(--text-body);
}
pre.ex-input-block code { background: none; padding: 0; font-size: inherit; color: inherit; }
.ex-more { margin: 1rem 0 0; font-size: 0.85rem; }
.post-content .ex-body-p,
.ex-body-p { margin: 0 0 0.9rem; color: var(--text-body); line-height: 1.75; }
.ex-body-p:last-child { margin-bottom: 0; }

.ex-group { margin: 0 0 2.5rem; }
.ex-group-h { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1rem; font-size: 1.25rem; }
.ex-group-h a { color: inherit; text-decoration: none; }
.ex-group-h small { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; color: var(--ink-3); }
.ex-actor-h { margin: 1.4rem 0 0.7rem; font-size: 0.98rem; font-weight: 700; }
.ex-actor-h a { color: var(--ink); text-decoration: none; }
.ex-actor-h a:hover { color: var(--accent-light); }
.ex-search { width: 100%; max-width: 32rem; margin: 0 0 2rem; }
.ex-hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Sample output (actor pages) ---------- */
.post-content .sample-intro,
.sample-intro { font-size: 0.88rem; color: var(--ink-2); margin: -0.5rem 0 1rem; line-height: 1.65; }
.post-content .sample-table { margin: 0 0 0.9rem; }
.post-content .sample-table table { font-size: 0.84rem; }
.post-content .sample-table td {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-body);
  white-space: nowrap;
}
.post-content .sample-table td.long { white-space: normal; min-width: 14rem; max-width: 22rem; }
/* The article-table rule keeps the first column on one line; a listing title
   there would make the table enormously wide. */
.post-content .sample-table td:first-child { white-space: normal; min-width: 12rem; font-family: var(--font-sans); font-size: 0.84rem; }
.post-content .sample-table td a { color: var(--accent-light); }
.sample-record { margin: 0 0 0.9rem; }
.sample-record summary { cursor: pointer; font-size: 0.84rem; color: var(--accent-text); }
.post-content .sample-record pre {
  margin: 0.6rem 0 0; padding: 0.9rem 1rem; max-height: 24rem; overflow: auto;
  background: var(--bg-primary); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.55; color: var(--text-body);
}
.post-content .sample-record code { background: none; padding: 0; font-size: inherit; color: inherit; }
.post-content .sample-foot,
.sample-foot { font-size: 0.8rem; color: var(--ink-3); margin: 0; line-height: 1.6; }
.sample-foot span { margin: 0 0.35rem; }
.post-content .sample-foot a { color: var(--accent-light); }
/* Sample CSV lead magnet: email + download, with the free-credit note under it */
.sample-csv-form {
  margin: 1.1rem 0 0; padding: 1rem 1.1rem; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
}
.sample-csv-form label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--ink-1, var(--text-primary)); margin-bottom: 0.6rem; }
.sample-csv-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sample-csv-row input[type="email"] { flex: 1 1 14rem; min-width: 0; }
.sample-csv-msg { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--accent-text); min-height: 0; }
.sample-csv-msg:empty { display: none; }
.sample-csv-free { margin: 0.7rem 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--ink-2); }
.sample-csv-free a { color: var(--accent-text); }
.sample-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; margin: 0 0 1rem; }
.sample-shot {
  min-width: 0; margin: 0; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
}
.post-content .sample-shot img,
.sample-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; border-radius: 0; }
.sample-shot figcaption {
  padding: 0.7rem 0.85rem; font-size: 0.78rem; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.sample-shot figcaption span {
  display: block; margin-bottom: 0.2rem; font-family: var(--font-mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3);
}

/* ---------- "Need different data?" request form (actor pages) ---------- */
.actor-request {
  padding: 1.4rem 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--accent-soft); scroll-margin-top: calc(var(--nav-height, 64px) + 1rem);
}
.ar-types { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ar-types legend { width: 100%; margin-bottom: 0.5rem; }
.ar-types label {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  padding: 0.45rem 0.8rem; font-size: 0.84rem; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-primary);
}
.ar-types label:has(input:checked) { border-color: var(--line-strong); color: var(--ink); background: var(--bg-card); }
.ar-types input { accent-color: var(--accent); margin: 0; }
.ar-opt { font-weight: 400; color: var(--ink-3); }
.actor-request .form-msg:empty { display: none; }
@media (max-width: 640px) { .actor-request { padding: 1.1rem; } }

/* ---------- n8n workflow templates (/n8n, /n8n/<slug>) ---------- */
.wf-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-content .wf-sub,
.wf-sub { margin: 1.4rem 0 0.7rem; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
/* The node chain. A numbered list, because the order is the explanation. */
.post-content ol.wf-flow,
ol.wf-flow { list-style: none; counter-reset: wf; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.post-content ol.wf-flow li,
ol.wf-flow li {
  counter-increment: wf; min-width: 0; margin: 0;
  display: grid; grid-template-columns: 1.6rem 8.5rem 1fr; gap: 0.6rem; align-items: baseline;
  padding: 0.5rem 0.7rem;
  background: var(--bg-primary); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.86rem; color: var(--text-body);
}
ol.wf-flow li::before { content: counter(wf); font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }
.wf-kind { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-text); }
.wf-name { min-width: 0; color: var(--ink); }
@media (max-width: 480px) {
  .post-content ol.wf-flow li, ol.wf-flow li { grid-template-columns: 1.6rem 1fr; }
  .wf-kind { grid-column: 2; }
  .wf-name { grid-column: 2; }
}
.wf-get { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wf-copy-status { min-height: 1.3em; margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--ink-2); }
.post-content ul.wf-ways,
ul.wf-ways { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.86rem; color: var(--ink-2); }
.post-content ul.wf-ways li { margin-bottom: 0.35rem; }

/* ---------- Blueprint light theme: leftovers from the dark build ---------- */
/* Code blocks stay dark navy (readable, and the blog's inline CTA boxes are dark too). */
.post-content pre:not(.ex-input-block):not(.ex-input) { background: #0d1b2e; border-color: rgba(13, 27, 46, 0.2); }
.post-content pre:not(.ex-input-block):not(.ex-input) code,
pre > code:not(.ex-input) { color: #d6e4fa; background: none; }
.tag { color: var(--accent-text); background: var(--accent-soft); border-color: rgba(11, 95, 255, 0.22); }
.post-content .btn-secondary, .post-content .btn-secondary:hover { color: var(--ink); }
.field-chk, .pricing-num { color: var(--green); }
/* blueprint theme build 2 */