/* ==========================================================================
   Protool App — Blog (list + article)
   --------------------------------------------------------------------------
   Standalone stylesheet for the two blog pages. It mirrors the landing page's
   visual system (index.html's inlined Tailwind theme + assets/css/style.css)
   in plain CSS, so these pages need no Tailwind CDN and no build step:

     surfaces   #000107 page, #070b12 panel, #0c101a raised card
     border     rgba(255,255,255,.08) hairline, gradient ring on hover
     accent     lime #c3fb30 (primary), blue #31a2ff / purple #7c3aed (edges)
     type       Geist body, Archivo display headings, Geist Mono eyebrows
     radius     20px cards, 999px pills — same as .edge-card / CTA buttons
     container  1440px max, 1.5rem / 2.5rem (lg 70px on the header) gutters

   Sizes and structure follow the boutique reference these pages were adapted
   from; every colour, font and surface is Protool's.
   ========================================================================== */

:root {
  --bg: #000107;
  --deep: #000611;
  --panel: #070b12;
  --panel-2: #0c101a;

  --ink: #ffffff;
  --text: #c9ced8;
  --prose: #a8b0bd;
  --dim: #858da0;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);

  --lime: #c3fb30;
  --green: #00ba00;
  --blue: #31a2ff;
  --purple: #7c3aed;

  --radius: 20px;
  --radius-sm: 14px;

  --shadow-soft: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 30px 70px -30px rgba(0, 0, 0, 1);
  --shadow-lime: 0 18px 40px -18px rgba(195, 251, 48, 0.55);

  /* Header height. Sticky rails (topic bar, article rails) offset by this, so
     the two must agree. */
  --nav-h: 68px;

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

@media (min-width: 1024px) {
  :root {
    --nav-h: 84px;
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: rgba(195, 251, 48, 0.3);
  color: #fff;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Archivo", "Geist", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

p {
  margin: 0;
}

figure {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every icon on the page is a stroked outline at 1.6, matching the landing
   page's inline SVG set. */
svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.display {
  font-family: "Archivo", "Geist", sans-serif;
  letter-spacing: -0.03em;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--lime);
  color: #000;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus-visible {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (max-width: 380px) {
  .container {
    padding-inline: 1rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 2.5rem;
  }
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* ==========================================================================
   Header — ported from pro-tool-app's index.html header (nav-shell, mega
   menus, mobile drawer). Structure/values match the landing page 1:1; the
   .mobile-menu / .mobile-nav-link rules replace what Tailwind utility
   classes did inline on the source markup.
   ========================================================================== */

.site-header {
  /* Sticky, not fixed like the landing page's over-the-hero-video header:
     this site's pages (hero, sticky rails) are laid out to sit right below
     an in-flow nav (see --nav-h), so the header needs to reserve its own
     space rather than float over content. */
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 16px;
  background: transparent;
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 12px 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(6, 10, 18, 0.55);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header[data-scrolled="true"] {
  padding: 8px 16px;
}
.site-header[data-scrolled="true"] .nav-shell {
  background: rgba(4, 7, 14, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 44px -28px rgba(0, 0, 0, 0.95);
}

.nav-logo {
  flex-shrink: 0;
  display: inline-flex;
}
.nav-logo img {
  height: 32px;
  width: auto;
}
@media (min-width: 1024px) {
  .nav-logo img {
    height: 40px;
  }
}

.nav-links {
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
}

.nav-link,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 9px 15px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: Poppins, Geist, sans-serif;
  font-size: 14.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.22s ease, background-color 0.22s ease;
}
.nav-link:hover,
.nav-trigger:hover,
.nav-item[data-open="true"] .nav-trigger {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
.nav-link.is-current {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-login {
  display: none;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: Poppins, Geist, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}
.nav-login:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.26);
}
.nav-cta {
  display: none;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: Poppins, Geist, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #04140a;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  box-shadow: 0 14px 30px -16px rgba(195, 251, 48, 0.7);
  transition: filter 0.22s ease, transform 0.22s ease;
}
.nav-cta svg {
  width: 11px;
  height: 11px;
}
.nav-cta:hover {
  filter: brightness(1.06);
}
.nav-cta:active {
  transform: scale(0.97);
}
@media (min-width: 640px) {
  .nav-login,
  .nav-cta {
    display: inline-flex;
  }
}
.nav-burger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: none;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background-color 0.22s ease;
}
.nav-burger:hover {
  background: rgba(255, 255, 255, 0.08);
}
.nav-burger svg {
  width: 22px;
  height: 22px;
}
.nav-burger .icon-close {
  display: none;
}
.nav-burger[aria-expanded="true"] .icon-open {
  display: none;
}
.nav-burger[aria-expanded="true"] .icon-close {
  display: block;
}
@media (min-width: 1024px) {
  .nav-burger {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Nav dropdowns — closed is the default; JS flips [data-open] on .nav-item
   -------------------------------------------------------------------------- */
.nav-item {
  position: relative;
}

.nav-chevron {
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.22s ease;
}
.nav-chevron svg {
  width: 10px;
  height: 10px;
}
.nav-item[data-open="true"] .nav-chevron {
  transform: rotate(180deg);
}

/* Mega panel — centred under its trigger, so the x-translate has to live in
   the same transform the open/close animation uses. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s;
}
.nav-item[data-open="true"] .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-mega {
  width: min(680px, calc(100vw - 40px));
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: radial-gradient(80% 60% at 50% 0%, rgba(195, 251, 48, 0.07) 0%, transparent 60%), rgba(8, 12, 20, 0.92);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.95);
}
.nav-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.nav-mega-item {
  --nav-accent: #c3fb30;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 11px 12px;
  transition: background-color 0.22s ease;
}
.nav-mega-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.nav-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--nav-accent);
  background: color-mix(in srgb, var(--nav-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--nav-accent) 26%, transparent);
  transition: background-color 0.22s ease;
}
.nav-ico svg {
  width: 18px;
  height: 18px;
}
.nav-mega-item:hover .nav-ico {
  background: color-mix(in srgb, var(--nav-accent) 22%, transparent);
}
.nav-mega-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}
.nav-mega-desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #8b8d96;
}

.nav-mega-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(195, 251, 48, 0.85);
  background: rgba(195, 251, 48, 0.07);
  border: 1px solid rgba(195, 251, 48, 0.16);
  transition: background-color 0.22s ease, color 0.22s ease;
}
.nav-mega-foot svg {
  width: 11px;
  height: 11px;
}
.nav-mega-foot:hover {
  color: #c3fb30;
  background: rgba(195, 251, 48, 0.12);
}

/* --------------------------------------------------------------------------
   Mobile drawer — a full-screen overlay, toggled with .is-open by main.js
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: rgba(0, 1, 7, 0.97);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.mobile-menu.is-open {
  transform: translateX(0);
}
@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}
.mobile-nav-link {
  font-family: Poppins, Geist, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}
.mobile-nav-link:hover {
  color: #ffffff;
}
.mobile-nav-link.mobile-cta {
  margin-top: 8px;
  padding: 12px 32px;
  background: var(--lime);
  color: #000;
  border-radius: 999px;
  font-weight: 600;
}
/* ==========================================================================
   Buttons / links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s,
    box-shadow 0.35s var(--ease), transform 0.25s var(--ease);
}

.btn-sm {
  height: 2.6rem;
  padding: 0 1.1rem;
  font-size: 0.8125rem;
}

/* Primary CTA — the lime pill used everywhere on the landing page. */
.btn-lime {
  background: var(--lime);
  color: #000;
}
.btn-lime:hover {
  background: #d2ff5c;
  box-shadow: var(--shadow-lime);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border-color: var(--line-strong);
  color: #fff;
}
.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

.btn-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn-arrow {
  transform: translateX(3px);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lime);
  white-space: nowrap;
}
.link-more svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s var(--ease);
}
.link-more:hover svg {
  transform: translateX(4px);
}

/* ==========================================================================
   Shared type helpers
   ========================================================================== */

/* Geist Mono labels — the landing page's section eyebrows. */
.eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--lime);
}

.kicker {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--dim);
}

.lede {
  max-width: 48ch;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--prose);
}

/* Longer copy than the other .lede spots, so it gets its own measure instead
   of loosening the shared 48ch default (which .contact-copy .lede also
   depends on staying put). */
.hero-copy .lede {
  max-width: 64ch;
}

.section {
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .section {
    padding-block: 6rem;
  }
}

/* The alternate band — a hair lighter than the page, like the landing page's
   #000611 sections. */
.section-panel {
  background: var(--deep);
  border-block: 1px solid var(--line);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 640px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }
}

.section-title {
  margin-top: 0.75rem;
  font-size: clamp(1.75rem, 3.4vw, 2.35rem);
  font-weight: 800;
  line-height: 1.1;
}

.section-desc {
  margin-top: 0.75rem;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--dim);
}

/* ==========================================================================
   Media tiles
   --------------------------------------------------------------------------
   Cards use real photography from assets/img/showcase. `.thumb` is the dark
   fallback wash for any tile without one — a two-stop gradient plus a fine
   diagonal weave and a monogram, so an empty slot still reads as a surface.
   ========================================================================== */

.thumb {
  position: absolute;
  inset: 0;
  display: block;
  background-color: var(--panel-2);
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 7px
    ),
    linear-gradient(150deg, #10182a 0%, #070b12 55%, #0d1424 100%);
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb::after {
  content: attr(data-monogram);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Archivo", sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.06);
}

/* An image fills the tile — the monogram is only for empty ones. */
.thumb:has(img)::after {
  content: none;
}

.thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 1;
}

/* Accent washes, one per card slot, so a grid of six never repeats. */
.thumb-1 {
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      transparent 1px 8px
    ),
    radial-gradient(120% 90% at 20% 10%, rgba(195, 251, 48, 0.16) 0%, transparent 60%),
    linear-gradient(160deg, #0e1626 0%, #05080f 100%);
}
.thumb-2 {
  background-image: repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      transparent 1px 6px
    ),
    radial-gradient(110% 80% at 80% 15%, rgba(49, 162, 255, 0.18) 0%, transparent 60%),
    linear-gradient(200deg, #0d1526 0%, #06090f 100%);
}
.thumb-3 {
  background-image: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0 1px,
      transparent 1px 9px
    ),
    radial-gradient(120% 90% at 15% 85%, rgba(124, 58, 237, 0.2) 0%, transparent 60%),
    linear-gradient(20deg, #0b1120 0%, #0a0f1c 100%);
}
.thumb-4 {
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 5px
    ),
    radial-gradient(120% 90% at 70% 80%, rgba(0, 186, 0, 0.16) 0%, transparent 60%),
    linear-gradient(140deg, #0a1018 0%, #0d1524 100%);
}
.thumb-5 {
  background-image: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      transparent 1px 8px
    ),
    radial-gradient(120% 90% at 40% 10%, rgba(49, 162, 255, 0.14) 0%, transparent 55%),
    linear-gradient(220deg, #0e1524 0%, #070b12 100%);
}
.thumb-6 {
  background-image: repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.045) 0 1px,
      transparent 1px 7px
    ),
    radial-gradient(110% 80% at 85% 60%, rgba(195, 251, 48, 0.12) 0%, transparent 60%),
    linear-gradient(30deg, #0a0f1a 0%, #101827 100%);
}
.thumb-7 {
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 10px
    ),
    radial-gradient(120% 90% at 25% 35%, rgba(124, 58, 237, 0.16) 0%, transparent 60%),
    linear-gradient(190deg, #0c1220 0%, #05080e 100%);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 768px) {
  .hero {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
  }
}

/* One soft lime bloom behind the masthead, echoing the landing hero's glow. */
.hero::before {
  content: "";
  position: absolute;
  top: -12rem;
  left: 50%;
  /* 100%, not a vw figure: a viewport-width bloom centred with translateX
     hangs past the gutter and adds ~39px of horizontal page scroll on a
     390px screen. */
  width: min(1100px, 100%);
  height: 32rem;
  transform: translateX(-50%);
  background: radial-gradient(
      50% 50% at 30% 40%,
      rgba(195, 251, 48, 0.1) 0%,
      transparent 70%
    ),
    radial-gradient(45% 55% at 75% 30%, rgba(124, 58, 237, 0.16) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--dim);
}
.crumbs a:hover {
  color: var(--lime);
}
.crumbs > span:last-child {
  color: var(--text);
  font-weight: 500;
}

.hero-head {
  display: grid;
  overflow-x: clip;
  gap: 2.5rem;
  margin-top: 2.25rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .hero-head {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: end;
    gap: 4rem;
  }
}

.hero-title {
  position: relative;
  margin-top: 1rem;
  font-size: clamp(2.75rem, 9vw, 5.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hero-title em {
  font-style: normal;
  color: var(--lime);
}

/* The rule runs off the right edge of the wordmark — a grid-breaking detail
   that keeps the masthead from reading as a plain centred title. */
.hero-title .rule {
  display: none;
  position: absolute;
  bottom: 0.9rem;
  left: calc(100% + 1.5rem);
  width: 42vw;
  height: 1px;
  background: linear-gradient(90deg, var(--lime), transparent);
}

@media (min-width: 1024px) {
  .hero-title .rule {
    display: block;
  }
}

.hero-social {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s,
    transform 0.2s var(--ease);
}
.social-row a:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: #000;
  transform: translateY(-2px);
}

/* --- Featured split ------------------------------------------------------- */

.feature {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

/* Two columns only from 1200: narrower than that the text column drops to
   ~390px and the split stops earning its keep. `center` rather than `stretch`
   so the tile keeps its own ratio instead of being pulled to the copy height —
   stretching it re-introduces the crop the fixed ratio below exists to avoid. */
@media (min-width: 1200px) {
  .feature {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
  }
}

/* Same 1200x628 ratio as .card-media and .article-cover — featured images are
   uploaded at that size, so `cover` fits them exactly at every width. A 16/10
   box here cropped ~16% off each side, slicing the text out of title cards. */
.feature-media {
  position: relative;
  display: block;
  aspect-ratio: 1200 / 628;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}

/* Gradient ring on hover — the .edge-card treatment from the landing page. */
.feature-media::after,
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.02)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  transition: background 0.5s ease;
}

.feature-media:hover::after,
.card:hover .card-media::after {
  background: linear-gradient(135deg, var(--lime), var(--blue), var(--purple));
}

.feature-media:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}
.feature-media:hover .thumb {
  transform: scale(1.06);
}


.pill {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.pill-float {
  top: 1rem;
  left: 1rem;
  background: var(--lime);
  color: #000;
  box-shadow: 0 8px 24px -8px rgba(195, 251, 48, 0.6);
}

.pill-star {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.05rem;
  fill: #000;
  stroke: none;
}

.pill-corner {
  top: 0.85rem;
  left: 0.85rem;
  background: rgba(0, 1, 7, 0.72);
  border: 1px solid var(--line);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.feature-title {
  margin-top: 0.85rem;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
}

.feature-title a:hover {
  color: var(--lime);
  transition: color 0.25s;
}

.feature-body .excerpt {
  margin-top: 1.1rem;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--prose);
}

/* Story meta row. Date + read time only — these pages carry no author identity,
   so there is no avatar or name block to style. */
.feature-meta {
  margin: 1.75rem 0;
  padding-block: 1.25rem;
  border-block: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--dim);
}

/* ==========================================================================
   Topic rail
   ========================================================================== */

.topics {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(0, 1, 7, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
}

.topics-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4rem;
}

.chips {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  flex: 1;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 2.25rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--prose);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover {
  border-color: rgba(195, 251, 48, 0.5);
  color: #fff;
}
.chip.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: #000;
  font-weight: 600;
}

.sort {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--dim);
}

@media (min-width: 768px) {
  .sort {
    display: flex;
  }
}

.sort select {
  height: 2.25rem;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

/* ==========================================================================
   Post grid
   ========================================================================== */

.grid {
  display: grid;
  gap: 2rem 1.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Featured images are uploaded at the standard 1200x628 social-banner ratio
   (same as .article-cover) — matching it here lets `cover` fit them exactly
   instead of cropping the sides off a 4:3 box. */
.card-media {
  position: relative;
  display: block;
  aspect-ratio: 1200 / 628;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}

.card:hover .card-media {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}
.card:hover .thumb {
  transform: scale(1.07);
}

.card-body {
  padding-top: 1.1rem;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.card-title a {
  background-image: linear-gradient(var(--lime), var(--lime));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s, color 0.3s;
}
.card:hover .card-title a {
  background-size: 100% 1px;
  color: var(--lime);
}

/* Cards carry title + meta only — a teaser cut mid-sentence reads as sliced
   text, and nothing here is clamped, so no title is truncated either. */
.card-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--dim);
}

.grid-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 3.5rem;
}

.grid-count {
  font-size: 0.8125rem;
  color: var(--dim);
}

/* --- Pagination ----------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--prose);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s,
    transform 0.2s var(--ease);
}

.page-btn:hover {
  border-color: rgba(195, 251, 48, 0.5);
  color: #fff;
  transform: translateY(-1px);
}

.page-btn.is-current {
  background: var(--lime);
  border-color: var(--lime);
  color: #000;
  transform: none;
}

/* Disabled step keeps its slot so the row does not shift between pages. */
.page-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.page-btn svg {
  width: 1rem;
  height: 1rem;
}

.page-gap {
  min-width: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--dim);
  user-select: none;
}

/* The word drops on phones and the arrows carry the step on their own — at the
   desktop size the seven items overflow a 288px content box. */
@media (max-width: 560px) {
  .pagination {
    gap: 0.25rem;
  }
  .page-step-label {
    display: none;
  }
  .page-btn {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.4rem;
  }
  .page-gap {
    min-width: 1.25rem;
  }
}

/* ==========================================================================
   Listing layout + promo rail
   --------------------------------------------------------------------------
   A sticky in-context CTA beside the post grid — the same mechanism as the
   reference theme's .tw-promo-rail, rebuilt on Protool's own dark-panel /
   lime-accent tokens instead of copying its light navy/blue palette.
   ========================================================================== */

.listing-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
}

.listing-main {
  width: 100%;
  min-width: 0;
  flex: 1;
}

@media (min-width: 1024px) {
  .listing-layout {
    flex-direction: row;
  }

  .promo-rail {
    position: sticky;
    /* Clears the sticky header (--nav-h) and the sticky topic bar (4rem)
       beneath it, plus a little breathing room. */
    top: calc(var(--nav-h) + 5.5rem);
    width: 21rem;
    flex: none;
    align-self: flex-start;
  }
}

.promo-card {
  position: relative;
  overflow: hidden;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.promo-card::before {
  content: "";
  position: absolute;
  bottom: -60px;
  right: -60px;
  height: 200px;
  width: 200px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(195, 251, 48, 0.28) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.promo-card__title {
  position: relative;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
}

.promo-card__title em {
  font-style: normal;
  color: var(--lime);
}

.promo-card__text {
  position: relative;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--prose);
}

.promo-card .btn-block {
  position: relative;
  width: 100%;
  margin-top: 1.25rem;
}

.promo-card__list {
  position: relative;
  margin-top: 1.25rem;
  display: grid;
  gap: 0.65rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.promo-card__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--text);
}

.promo-card__item svg {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--lime);
}

/* ==========================================================================
   Newsletter / CTA panel
   --------------------------------------------------------------------------
   The lime slab from the landing page, reused as the blog's subscribe block.
   ========================================================================== */

.cta-panel {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1.75rem;
  border-radius: 28px;
  background: linear-gradient(135deg, #d9f99d 0%, #c3fb30 60%, #aee81f 100%);
  color: #06100b;
}

@media (min-width: 768px) {
  .cta-panel {
    padding: 3.5rem 3rem;
  }
}

.cta-panel .eyebrow {
  color: rgba(6, 16, 11, 0.65);
}

.cta-title {
  margin-top: 0.75rem;
  max-width: 22ch;
  color: #06100b;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.08;
}

.cta-sub {
  margin-top: 0.9rem;
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(6, 16, 11, 0.75);
}

.cta-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.cta-form input {
  flex: 1 1 16rem;
  min-width: 0;
  height: 3rem;
  padding: 0 1.15rem;
  border: 1px solid rgba(6, 16, 11, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  color: #06100b;
  font-size: 0.9375rem;
}
.cta-form input::placeholder {
  color: rgba(6, 16, 11, 0.5);
}
.cta-form input:focus-visible {
  outline: none;
  border-color: #06100b;
  background: #fff;
}

.btn-ink {
  background: #06100b;
  color: #fff;
}
.btn-ink:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.8);
}

.cta-note {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  color: rgba(6, 16, 11, 0.6);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-wrap {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .contact-wrap {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4.5rem;
    align-items: start;
  }
}

.contact-copy .lede {
  /* Explicit <br> breaks split this into one sentence per line, so it needs
     the column's natural width rather than the 40ch clamp cutting a sentence
     onto a second line of its own. */
  max-width: none;
}

.contact-details {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
}

.contact-row {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.contact-row svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  color: var(--lime);
}

.contact-row dt {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--dim);
}

.contact-row dd {
  margin: 0.3rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
}

.contact-row dd a:hover {
  color: var(--lime);
}

/* Form card sits on a raised panel so it reads as a surface on the band. */
.contact-form {
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 640px) {
  .contact-form {
    padding: 2.25rem;
  }
}

.field-grid {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 640px) {
  .field-grid.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.field label {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--dim);
}

.field .req {
  color: var(--lime);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-size: 0.9375rem;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(133, 141, 160, 0.75);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: rgba(195, 251, 48, 0.55);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(195, 251, 48, 0.1);
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.form-note {
  flex: 1;
  min-width: 12rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--dim);
}

/* Submit feedback, written by the page script after contact.php answers. */
.form-status {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--dim);
}
.form-status[data-state="ok"] {
  color: var(--lime);
}
.form-status[data-state="error"] {
  color: #f44336;
}

@media (max-width: 480px) {
  .form-foot .btn {
    width: 100%;
  }
}

/* Compact variant for the article rail — same tokens, no card chrome. */
.rail-contact .field-grid {
  gap: 0.75rem;
  margin-top: 1rem;
}

.rail-contact .field input,
.rail-contact .field textarea {
  padding: 0.65rem 0.85rem;
  font-size: 0.875rem;
}

.rail-contact .field textarea {
  min-height: 5.5rem;
}

.rail-contact .btn {
  width: 100%;
  margin-top: 0.85rem;
}

/* ==========================================================================
   Article page
   ========================================================================== */

.article-hero {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .article-hero {
    padding-top: 2rem;
  }
}

/* Featured images are uploaded at the standard 1200x628 social-banner ratio,
   so matching that ratio here means `cover` fits them exactly at any
   viewport width — full-bleed with no crop and no letterboxing. */
.article-cover {
  position: relative;
  aspect-ratio: 1200 / 628;
  margin-top: 2rem;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* Bottom fade into the page, same trick the landing hero uses. */
.article-cover::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 1, 7, 0.85), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Title block at the head of the body column: h1, then the meta line over a
   hairline. `.blog-article > :first-child` zeroes its top margin, so the stack
   starts flush with the rails beside it. */
.blog-article .article-title {
  margin-bottom: 0.9rem;
}

.blog-article .article-meta {
  margin-bottom: 1.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.article-title {
  margin-top: 1rem;
  font-size: clamp(2rem, 5.2vw, 3.35rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

/* Date + read time. No author, so this is a plain inline run of text. */
.article-meta {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--dim);
}

/* --- Body + rails --------------------------------------------------------- */

/*
 * Three tracks on a wide screen: contents left, article centre, categories /
 * read-next / contact right. Named areas rather than source order because the
 * single-column stack wants a different sequence (contents, article, side
 * matter) and areas let one markup order serve both.
 */
.article-layout {
  display: grid;
  grid-template-areas: "toc" "body" "rail";
  gap: 2.5rem;
  padding-bottom: 4rem;
}

.article-toc {
  grid-area: toc;
}
.article-body {
  grid-area: body;
  max-width: 44rem;
  /* Grid items default to min-width:auto, so the table's min-content width
     would push the column — and the page — wider than the viewport on phones.
     The table scrolls inside .table-wrap instead. */
  min-width: 0;
}
.article-rail {
  grid-area: rail;
}

/* Below 1280 there is not enough width for two rails plus a readable measure,
   so the whole thing stacks and both rails become ordinary blocks. */
@media (min-width: 1280px) {
  .article-layout {
    grid-template-areas: "toc body rail";
    grid-template-columns: 11rem minmax(0, 1fr) 14.5rem;
    gap: 2.5rem;
    padding-bottom: 6rem;
    align-items: start;
  }
}

@media (min-width: 1440px) {
  .article-layout {
    grid-template-columns: 12.5rem minmax(0, 1fr) 16rem;
    gap: 3.5rem;
  }
}

/* Prose scale — 23/19/17px headings, 16px body at 1.8. */
.blog-article h2 {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.35;
  margin: 30px 0 12px;
}
.blog-article h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  margin: 24px 0 10px;
}
.blog-article h4 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin: 20px 0 8px;
}
.blog-article p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--prose);
  margin: 0 0 18px;
}
.blog-article ul,
.blog-article ol {
  margin: 0 0 18px;
  padding-left: 24px;
  line-height: 1.8;
  color: var(--prose);
}
.blog-article ul {
  list-style: disc;
}
.blog-article ol {
  list-style: decimal;
}
.blog-article li {
  font-size: 16px;
  margin-bottom: 6px;
}
.blog-article li::marker {
  color: var(--lime);
}
.blog-article strong {
  color: var(--ink);
  font-weight: 600;
}

/*
 * Prose links carry a standing lime underline drawn as a background gradient.
 * `.tag`, `.btn` and `.link-more` are anchors that live inside the article too
 * and would otherwise inherit it, so every pill- or button-shaped anchor is
 * excluded here.
 */
.blog-article a:not(.btn):not(.tag):not(.link-more) {
  color: var(--lime);
  font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.blog-article a:not(.btn):not(.tag):not(.link-more):hover {
  background-size: 0% 1px;
  transition: background-size 0.3s;
}

.blog-article blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  border-left: 3px solid var(--lime);
  background: var(--panel);
  color: var(--text);
  border-radius: 0 12px 12px 0;
  font-style: italic;
}
.blog-article blockquote p {
  margin: 0;
  color: inherit;
}
.blog-article hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* [cta_banner] shortcode output — dropped into post content by editors.
   The button just opens #cta-modal (see footer.php + main.js); it never
   links anywhere itself. */
.cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 32px 0;
  padding: 22px 28px;
  border-radius: 16px;
  border: 1px solid rgba(49, 162, 255, 0.25);
  background: linear-gradient(120deg, rgba(49, 162, 255, 0.16), rgba(124, 58, 237, 0.14));
}
.cta-banner-text {
  margin: 0;
  font-family: Poppins, Geist, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.cta-banner-btn {
  flex-shrink: 0;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #04140a;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  cursor: pointer;
  transition: filter 0.25s ease;
}
.cta-banner-btn:hover {
  filter: brightness(1.06);
}

.blog-article > :first-child {
  margin-top: 0;
}
.blog-article > :last-child {
  margin-bottom: 0;
}

/* Lead paragraph gets one step up in size — the only deviation from the prose
   scale, and it stops the body from starting flat after a 3.35rem title. */
.blog-article .drop-lead {
  font-size: 18px;
  line-height: 1.75;
  color: #dfe3ea;
}

/* Inline figure, breaking a little past the text column on wide screens. */
.article-figure {
  margin: 32px 0;
}

/* Breaks out to the RIGHT only: the slack all lives on the rail side, and
   keeping the left edge flush with the body text is the editorial convention. */
@media (min-width: 1280px) {
  .article-figure {
    margin-right: -6rem;
  }
}

/* block, not the span's default inline: an inline box ignores aspect-ratio, so
   the frame would collapse and the absolute .thumb inside would spill over the
   paragraphs around it. */
.article-figure .frame {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.article-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--dim);
}

/* Pull-quote — full-width statement between sections. */
.pullquote {
  margin: 36px 0;
  padding: 2rem 0;
  border-block: 1px solid var(--line);
}

.pullquote p {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Table — hairline grid on the panel surface. */
.table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.table-wrap table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--prose);
}

.table-wrap th,
.table-wrap td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.table-wrap thead th {
  background: rgba(255, 255, 255, 0.03);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--dim);
}

.table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.table-wrap td:first-child {
  font-weight: 600;
  color: var(--ink);
}

/* Callout — the in-article nudge to start a free trial. */
.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin: 32px 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(
      120% 140% at 0% 0%,
      rgba(195, 251, 48, 0.1) 0%,
      transparent 60%
    ),
    var(--panel);
}

.callout-text {
  flex: 1;
  min-width: 14rem;
}

.callout-text h4 {
  font-size: 1.0625rem;
}

.callout-text p {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  color: var(--prose);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.tag {
  /* 0.55rem block padding puts the pill at ~36px — a usable touch target on a
     phone, where these sit in a wrapped multi-row cluster. */
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--dim);
  transition: border-color 0.2s, color 0.2s;
}
.tag:hover {
  border-color: rgba(195, 251, 48, 0.5);
  color: var(--lime);
}

/* --- Rails ---------------------------------------------------------------- */

/* Both rails only become sticky columns at the 3-track breakpoint. Stacked,
   they are plain blocks — sticky would pin them mid-scroll for no benefit. */
@media (min-width: 1280px) {
  .article-toc,
  .article-rail {
    position: sticky;
    align-self: start;
    top: calc(var(--nav-h) + 2rem);
  }
}

/* Stacked, the contents box reads as a card so it does not look like a stray
   list sitting above the article. */
@media (max-width: 1279px) {
  .article-toc {
    padding: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
  }
}

.rail-card + .rail-card {
  margin-top: 2rem;
}

/* Stacked, the right-hand rail's three cards sit side by side rather than in
   one long column under the article. */
@media (min-width: 640px) and (max-width: 1279px) {
  .article-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
  }
  .rail-card + .rail-card {
    margin-top: 0;
  }
  /* The form spans the row — squeezed into one column its inputs were half the
     width of every other field on the page. */
  .rail-contact {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) and (max-width: 1279px) {
  .article-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rail-title {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--dim);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.cat-list {
  margin-top: 0.5rem;
}

.cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--prose);
  transition: color 0.2s, padding-left 0.25s var(--ease);
}
.cat-list a:last-child {
  border-bottom: 0;
}
.cat-list a:hover {
  color: var(--lime);
  padding-left: 0.35rem;
}

.cat-count {
  flex: none;
  min-width: 1.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
  color: var(--dim);
}
.cat-list a:hover .cat-count {
  background: var(--lime);
  color: #000;
}

.toc {
  margin-top: 0.85rem;
}

.toc a {
  display: block;
  padding: 0.45rem 0 0.45rem 0.85rem;
  border-left: 2px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dim);
  transition: color 0.2s, border-color 0.2s;
}
.toc a:hover,
.toc a.is-active {
  color: var(--lime);
  border-left-color: var(--lime);
}

.rail-list {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}

.rail-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.rail-thumb {
  position: relative;
  flex: none;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
}

.rail-item h4 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.rail-item p {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--dim);
}

.rail-item:hover h4 {
  color: var(--lime);
}

/* --- Read progress -------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--lime), var(--blue));
  z-index: 70;
}

/* --- Prev / next ---------------------------------------------------------- */

.pager {
  display: grid;
  gap: 1rem;
  padding-block: 2.5rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .pager {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.pager-link {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.3s, box-shadow 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.pager-link:hover {
  border-color: rgba(195, 251, 48, 0.4);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.pager-link .kicker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pager-link h4 {
  margin-top: 0.6rem;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.pager-next {
  text-align: right;
}
.pager-next .kicker {
  justify-content: flex-end;
}

.pager-link svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* ==========================================================================
   Footer — ported from pro-tool-app's index.html footer (ticker, closing
   CTA, link grid, newsletter, socials, legal bar). Values match the landing
   page 1:1, scoped under its own --ft-* custom properties.
   ========================================================================== */
.site-footer {
  --ft-accent: #c3fb30;
  --ft-grad: linear-gradient(90deg, #acdc6a, #42e99c);
  --ft-line: rgba(255, 255, 255, 0.08);
  --ft-ink: #ffffff;
  --ft-muted: #8b8d96;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000611;
  color: var(--ft-muted);
  font-size: 14px;
  text-align: center;
  border-top: 1px solid var(--ft-line);
}
.ft-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.ft-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* soft tint behind the closing CTA */
.ft-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 42% at 50% 6%, rgba(195, 251, 48, 0.07) 0%, transparent 72%),
    radial-gradient(80% 46% at 50% 98%, rgba(0, 104, 52, 0.18) 0%, transparent 74%);
}

/* ===== tool ticker ===== */
.ft-ticker {
  position: relative;
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid var(--ft-line);
  background: rgba(255, 255, 255, 0.02);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ft-ticker-track {
  display: flex;
  flex: none;
  animation: ft-marquee 38s linear infinite;
}
.ft-ticker:hover .ft-ticker-track {
  animation-play-state: paused;
}
.ft-ticker-run {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-ticker-run li {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-inline: 17px;
  padding-block: 13px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ft-muted);
  white-space: nowrap;
}
/* diamond separator between items */
.ft-ticker-run li::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  transform: rotate(45deg);
  background: var(--ft-accent);
}

@keyframes ft-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ===== centred CTA ===== */
.ft-hero {
  position: relative;
  padding-block: clamp(52px, 6vw, 96px);
  border-bottom: 1px solid var(--ft-line);
}
/* oversized wordmark sitting behind the CTA as a watermark */
.ft-wordmark {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  z-index: -1;
  margin: 0;
  transform: translateY(-50%);
  font-family: Archivo, Geist, sans-serif;
  font-size: clamp(140px, 30vw, 460px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  user-select: none;
  pointer-events: none;
}
.ft-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ft-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ft-accent);
}
.ft-eyebrow::before,
.ft-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.ft-cta-title {
  max-width: 22ch;
  margin: 0 0 18px;
  font-family: Poppins, Geist, sans-serif;
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ft-ink);
}
.ft-cta-title em {
  font-style: italic;
  background: var(--ft-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ft-cta-sub {
  max-width: 54ch;
  margin: 0 auto 30px;
  font-size: 15.5px;
  line-height: 1.65;
}
.ft-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  background: var(--ft-grad);
  color: #04140a;
  font-family: Poppins, Geist, sans-serif;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ft-btn-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #04140a;
  color: #ffffff;
}
.ft-btn-icon svg {
  width: 13px;
  height: 13px;
}
.ft-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(66, 233, 156, 0.65);
}

/* ===== link grid ===== */
.ft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1.2fr);
  gap: clamp(28px, 3vw, 52px);
  padding-block: clamp(40px, 4.5vw, 68px);
  text-align: left;
}
.ft-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ft-ink);
}
/* short accent rule standing in for the dash in the reference layout */
.ft-col h3::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--ft-grad);
}
.ft-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-col li {
  margin-bottom: 13px;
  font-size: 14px;
}
.ft-col a {
  position: relative;
  display: inline-block;
  color: var(--ft-muted);
  transition: color 0.28s ease, transform 0.28s ease;
}
.ft-col a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--ft-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.ft-col a:hover,
.ft-col a:focus-visible {
  color: var(--ft-accent);
  transform: translateX(6px);
}
.ft-col a:hover::before,
.ft-col a:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

/* ===== newsletter ===== */
.ft-news {
  padding-left: clamp(22px, 2.6vw, 44px);
  border-left: 1px solid var(--ft-line);
}
.ft-news h3::before {
  display: none;
}
.ft-news-lede {
  margin: 0 0 18px;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
}
.ft-subscribe {
  position: relative;
  max-width: 340px;
}
.ft-subscribe input {
  width: 100%;
  font-family: Geist, system-ui, sans-serif;
  font-size: 14px;
  color: var(--ft-ink);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ft-line);
  border-radius: 12px;
  padding: 15px 124px 15px 16px;
  transition: border-color 0.28s ease, background-color 0.28s ease;
}
.ft-subscribe input::placeholder {
  color: #63656e;
}
.ft-subscribe input:hover {
  border-color: rgba(255, 255, 255, 0.16);
}
.ft-subscribe input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(195, 251, 48, 0.55);
}
.ft-subscribe input[aria-invalid="true"] {
  border-color: #f87171;
}
.ft-subscribe button {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  padding: 0 22px;
  border: 0;
  border-radius: 9px;
  background: var(--ft-grad);
  color: #04140a;
  font-family: Poppins, Geist, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.28s ease, transform 0.28s ease;
}
.ft-subscribe button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.ft-subscribe button:disabled {
  opacity: 0.6;
  cursor: default;
}
.ft-news-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ft-accent);
}
.ft-news-note[data-state="error"] {
  color: #f87171;
}

/* ===== social ===== */
.ft-follow {
  margin: 28px 0 14px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ft-ink);
}
.ft-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ft-line);
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  transition: border-color 0.28s ease, background-color 0.28s ease, transform 0.28s ease;
}
.ft-social a svg {
  width: 17px;
  height: 17px;
}
/* brand colours, lifted enough to read on the dark panel */
.ft-social .s-fb a {
  color: #4a94ff;
}
.ft-social .s-x a {
  color: #e7e7ea;
}
.ft-social .s-li a {
  color: #3a9bef;
}
.ft-social .s-ig a {
  color: #f2657f;
}
.ft-social .s-yt a {
  color: #ff4a4a;
}
.ft-social a:hover {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-3px);
}

/* ===== legal bar ===== */
.ft-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 22px;
  border-top: 1px solid var(--ft-line);
  font-size: 12.5px;
  text-align: left;
}
.ft-logo {
  display: inline-flex;
  flex: none;
}
.ft-logo img {
  width: auto;
  height: 34px;
}
.ft-legal p {
  margin: 0;
  flex: 1;
  min-width: 220px;
}
.ft-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-legal a {
  transition: color 0.24s ease;
}
.ft-legal a:hover {
  color: var(--ft-accent);
}

/* ===== responsive ===== */
@media (max-width: 992px) {
  .ft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }
  .ft-news {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--ft-line);
    padding-top: 32px;
  }
}

@media (max-width: 560px) {
  .ft-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ft-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ft-wordmark {
    -webkit-text-stroke-width: 0.75px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ft-ticker-track {
    animation: none;
  }
}
/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */

/* Gated on `.js`, set by an inline script in <head>. Without it the start state
   would be the final state for anyone whose script never runs, leaving the
   whole grid invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
}

.js .reveal.is-in {
  animation: fade-up 0.6s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   WordPress additions
   --------------------------------------------------------------------------
   Everything below is new for the WP port: core block/editor alignment
   classes so post content authored in the block editor lays out inside
   .blog-article, and states for the WP comment form (the static design
   carried no comments UI).
   ========================================================================== */

/* Core image alignment classes, used by content authored in the block editor. */
.blog-article .alignleft {
  float: left;
  margin: 0.35rem 1.5rem 1rem 0;
}
.blog-article .alignright {
  float: right;
  margin: 0.35rem 0 1rem 1.5rem;
}
.blog-article .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.blog-article img {
  border-radius: var(--radius-sm);
}
.blog-article .wp-caption {
  max-width: 100%;
}
.blog-article .wp-caption-text {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--dim);
}
.blog-article .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

/* Comment form + list — plain cards on the article's prose surface. */
.blog-comments {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.blog-comments .comment-reply-title,
.blog-comments .comments-title {
  font-family: "Archivo", sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--ink);
}
.blog-comments .comment-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.blog-comments .comment-list .children {
  margin: 0;
  padding-left: 1.75rem;
  list-style: none;
}
.blog-comments .comment-body {
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}
.blog-comments .comment-author .fn {
  font-weight: 600;
  color: var(--ink);
  font-style: normal;
}
.blog-comments .comment-metadata {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--dim);
}
.blog-comments .comment-content p {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--prose);
}
.blog-comments .comment-reply-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--lime);
}
.blog-comments .comment-form {
  margin-top: 2rem;
}
.blog-comments .comment-form p {
  margin: 0 0 1.1rem;
}
.blog-comments .comment-form label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--dim);
}
.blog-comments .comment-form input[type="text"],
.blog-comments .comment-form input[type="email"],
.blog-comments .comment-form input[type="url"],
.blog-comments .comment-form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-size: 0.9375rem;
}
.blog-comments .comment-form textarea {
  min-height: 8rem;
  resize: vertical;
}
.blog-comments .form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--lime);
  color: #000;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   Auth modal — ported from pro-tool-app's index.html (#auth-modal). One
   column, screens swapped by [hidden]. Fields reuse the shared .lead-*
   primitives (backdrop, close button, label, input, submit, note, done mark)
   the same way the source markup does.
   ========================================================================== */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.auth-modal[data-open="false"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lead-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 8, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lead-close {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: color 0.25s ease, background-color 0.25s ease;
}
.lead-close svg {
  width: 17px;
  height: 17px;
}
.lead-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.auth-panel {
  position: relative;
  width: min(440px, 100%);
  max-height: min(92vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 4vw, 38px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(92% 72% at 88% 4%, rgba(195, 251, 48, 0.1) 0%, transparent 60%),
    radial-gradient(74% 62% at 4% 98%, rgba(49, 162, 255, 0.1) 0%, transparent 58%), #070b12;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}
.auth-modal[data-open="true"] .auth-panel {
  transform: none;
}
.auth-panel:focus {
  outline: none;
}

.auth-title {
  margin: 0 0 8px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 23px;
  font-weight: 600;
  color: #ffffff;
}
.auth-sub {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.55;
  color: #9b9ba4;
}

.auth-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.auth-provider svg {
  width: 18px;
  height: 18px;
  stroke: none;
}
.auth-provider:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #63656e;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.auth-outline {
  width: 100%;
  border-radius: 14px;
  padding: 14px 18px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: #04140a;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  cursor: pointer;
  transition: filter 0.25s ease;
}
.auth-outline:hover {
  filter: brightness(1.06);
}

.auth-form {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.auth-form .lead-label {
  margin-top: 4px;
}
.auth-form .lead-input + .lead-label {
  margin-top: 16px;
}

.auth-field {
  position: relative;
}
.auth-field .lead-input {
  padding-right: 48px;
}
.auth-eye {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 9px;
  background: none;
  border: none;
  color: #7c7e88;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.auth-eye svg {
  width: 17px;
  height: 17px;
}
.auth-eye:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.auth-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #c3fb30;
  font-size: 13.5px;
  cursor: pointer;
  transition: color 0.25s ease;
}
.auth-link:hover {
  color: #d9ff6b;
}
.auth-forgot {
  align-self: flex-end;
  margin-top: 12px;
}

.auth-foot {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: #8b8d96;
}
.auth-screen > .lead-submit {
  width: 100%;
}
.auth-screen .lead-done-mark {
  margin: 0 auto 16px;
}

/* ---- shared .lead-* field primitives (label, input, submit, note, done mark) ---- */
.lead-form {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lead-label {
  display: block;
  margin-bottom: 9px;
  padding: 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8b93;
}
.lead-label + .lead-input {
  margin-bottom: 18px;
}

.lead-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.lead-chips .lead-label {
  flex: 0 0 100%;
  margin-bottom: 11px;
}
.lead-chip {
  border-radius: 999px;
  padding: 9px 17px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 13.5px;
  color: #b9bac1;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.lead-chip:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}
.lead-chip[data-active="true"] {
  color: #04140a;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  border-color: transparent;
  font-weight: 500;
}

.lead-input {
  width: 100%;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.lead-input::placeholder {
  color: #63656e;
}
.lead-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(195, 251, 48, 0.5);
}
.lead-input[aria-invalid="true"] {
  border-color: #f87171;
}
.lead-textarea {
  min-height: 108px;
  resize: vertical;
  line-height: 1.55;
}

.lead-submit {
  margin-top: 24px;
  border: 0;
  border-radius: 14px;
  padding: 15px 20px;
  font-family: Poppins, Geist, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #04140a;
  background: linear-gradient(90deg, #acdc6a, #42e99c);
  box-shadow: 0 18px 40px -18px rgba(195, 251, 48, 0.55);
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.lead-submit:hover {
  filter: brightness(1.08);
}
.lead-submit[data-busy="true"] {
  opacity: 0.75;
  pointer-events: none;
}

.lead-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: #fcd34d;
}
.lead-note[data-state="error"] {
  color: #f87171;
}

.lead-done-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: #c3fb30;
  background: rgba(195, 251, 48, 0.12);
  border: 1px solid rgba(195, 251, 48, 0.3);
}
.lead-done-mark svg {
  width: 26px;
  height: 26px;
}

/* CTA modal — reuses .auth-panel/.auth-title, but its heading ("Let's Build
   Something Better with AI") is longer than the short auth-flow titles those
   were sized for, so it wraps to two lines and runs under the close button
   at the default 440px width. Widen the panel and keep the title clear of
   the button's top-right corner. */
.cta-modal .auth-panel {
  width: min(500px, 100%);
}
.cta-modal .auth-title {
  padding: 0 20px;
}