/* ClosedLoop AI v3 "alive" LISTING/INDEX layer, scoped under .v3-lst.
   One shared layer for the scannable index surfaces: integrations catalog,
   blog listing, tag listing, customer stories, glossary, resources hub.
   Loaded LAST (after tokens.css, site.css, index-CFw-kQHv.css, v3.css) from each
   page's body, so it owns the ground/type ladder for the <main> body. The shared
   nav (header.php) + footer (footer.php) keep their own v3.css chrome.

   Register: LIGHT + CALM. Cool ladder only; NO dark bands mid-page (the shared
   footer carries the dark register), NO ambient loops, NO evidence marks (these
   pages measure nothing). Orange appears ONLY as the section-header underline
   sweep + hover heat on tiles/cards. The glossary is fully quiet: it uses none
   of the orange classes. Sharp 2px corners, no shadows, flush-left. */

.v3-lst{
  /* ---- light drafting grammar (cool ladder) ---- */
  --ink:#141519;        /* UI, buttons, headlines, body text on light */
  --graphite:#2A2D31;   /* strong meta, firm hairline */
  --lst-muted:#8A8D93;  /* mono labels, kickers, captions (cool) */
  --lst-frame:#868A90;  /* corner registration marks (cool graphite) */
  --paper:#FFFFFF;      /* clean white card / surface fill */
  --ground:#FCFDFD;     /* cool near-white page ground */
  --board:#F0F2F3;      /* light board behind surfaces */
  --board-2:#E9ECEE;    /* firmer board tone */
  --rule:#E6E9EB;       /* hairline on ground */
  --rule-2:#D7DBDE;     /* firmer hairline */
  --lst-sec:#565A60;    /* secondary body text (cool) */
  --orange:#FF4F00;     /* THE ENERGY: header sweeps + hover heat only */
  --brand:#5F67BB;      /* logo indigo, the one signature corner on light */
  --ok:#4A9B6E; --info:#3E6896;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  display:block; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.58;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
.v3-lst *,.v3-lst *::before,.v3-lst *::after{ box-sizing:border-box; }
.v3-lst b{ font-weight:600; }
.v3-lst h1,.v3-lst h2,.v3-lst h3,.v3-lst h4{ margin:0; letter-spacing:-0.03em; text-wrap:balance; font-weight:600; }
.v3-lst p{ margin:0; }
.v3-lst img{ max-width:100%; display:block; }

.v3-lst .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }
.v3-lst section{ padding:72px 0; position:relative; }
.v3-lst section + section{ border-top:1px solid var(--rule); }

/* ---------- shared section furniture (flush-left) ---------- */
.v3-lst .lst-crumbs{ display:flex; align-items:center; gap:9px; font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--lst-muted); margin-bottom:26px; flex-wrap:wrap; }
.v3-lst .lst-crumbs a{ color:var(--lst-sec); text-decoration:none; }
.v3-lst .lst-crumbs a:hover{ color:var(--ink); }
.v3-lst .lst-crumbs .sep{ color:var(--rule-2); }
.v3-lst .lst-crumbs .cur{ color:var(--ink); }

.v3-lst .lst-eyebrow{ display:flex; align-items:center; gap:10px; font:500 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--lst-muted); margin-bottom:16px; }
.v3-lst .lst-eyebrow .bar{ width:18px; height:1px; background:var(--graphite); flex:none; }

.v3-lst .lst-hero{ padding:34px 0 64px; }
.v3-lst .lst-hero h1{ font-size:clamp(34px,4.6vw,50px); line-height:1.05; letter-spacing:-0.035em; max-width:22ch; }
.v3-lst .lst-lede{ font-size:16px; color:var(--lst-sec); max-width:60ch; margin-top:16px; }
.v3-lst .lst-lede b{ color:var(--ink); font-weight:600; }
/* mono index line: honest counts, hairline-separated */
.v3-lst .lst-meta{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:22px; font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--lst-muted); }
.v3-lst .lst-meta .d{ color:var(--rule-2); }

.v3-lst .lst-h2{ font-size:clamp(24px,3vw,32px); letter-spacing:-0.03em; line-height:1.1; max-width:28ch; color:var(--ink); }
.v3-lst .lst-h2 a{ color:inherit; text-decoration:none; }
.v3-lst .lst-h2 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.v3-lst .lst-sub{ font-size:15px; color:var(--lst-sec); max-width:62ch; margin-top:12px; }

/* header underline: sweeps in on scroll (orange), static under reduced-motion.
   NOT used on the glossary (that page stays fully quiet). */
.v3-lst .lst-uline{ display:block; height:3px; width:56px; margin-top:16px; background:var(--orange); transform-origin:left center; border-radius:1px; }
html.motion .v3-lst .lst-uline{ transform:scaleX(0); transition:transform .55s cubic-bezier(.2,.75,.2,1); }
html.motion .v3-lst .lst-uline.in{ transform:scaleX(1); }

/* constructive reveal (fade-up), gated so reduced-motion shows everything settled */
html.motion .v3-lst .v3-reveal{ opacity:0; transform:translateY(15px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.75,.2,1); }
html.motion .v3-lst .v3-reveal.in{ opacity:1; transform:none; }

/* ---------- buttons: ink fill / graphite outline on light (R13) ---------- */
.v3-lst .lst-btn{ display:inline-block; padding:12px 26px; border-radius:2px; font:600 15px var(--sans); text-decoration:none; border:1px solid var(--graphite); color:var(--ink); background:transparent; letter-spacing:-0.01em; transition:background .16s ease, color .16s ease, border-color .16s ease; cursor:pointer; }
.v3-lst .lst-btn:hover{ background:rgba(20,21,25,.05); border-color:var(--ink); }
.v3-lst .lst-btn.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.v3-lst .lst-btn.primary:hover{ background:#000; border-color:#000; }
.v3-lst .lst-btn.sm{ padding:9px 18px; font-size:13px; }

/* ---------- the entity corner frame (drafting grammar, full 4-corner) ----------
   Reserved for the ONE hero entity per page (featured essay, story cards). */
.v3-lst .fr{
  position:relative;
  --fc:var(--lst-frame);
  --sig:var(--brand);
  --fl:16px; --ft:0.75px; --fts:calc(var(--ft) * 3);
  background-image:
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--sig),var(--sig)), linear-gradient(var(--sig),var(--sig));
  background-repeat:no-repeat;
  background-position:top left,top left, top right,top right, bottom left,bottom left, bottom right,bottom right;
  background-size:
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--fts), var(--fts) var(--fl);
  transition:background-size .18s ease;
}
.v3-lst .fr:hover{ --fl:22px; }

/* the restrained signature corner for dense grids (docs idiom): one indigo mark */
.v3-lst .sig{ position:relative; }
.v3-lst .sig::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:14px; height:14px; border-right:2px solid var(--brand); border-bottom:2px solid var(--brand); pointer-events:none; }

/* ---------- jump chips (mono, hairline, counts) ---------- */
.v3-lst .lst-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.v3-lst .lst-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--rule-2); border-radius:2px; background:var(--paper); color:var(--ink); font:500 12.5px var(--sans); letter-spacing:-0.005em; text-decoration:none; cursor:pointer; transition:background .16s ease, color .16s ease, border-color .16s ease; }
.v3-lst .lst-chip .n{ font:500 10.5px var(--mono); color:var(--lst-muted); }
.v3-lst .lst-chip:hover{ border-color:var(--ink); }
.v3-lst .lst-chip.is-active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.v3-lst .lst-chip.is-active .n{ color:rgba(255,255,255,.6); }

/* ---------- closing CTA: LIGHT chorus block (no dark band; footer carries dark) ---------- */
.v3-lst .lst-cta{ text-align:center; padding:84px 0 92px; }
.v3-lst .lst-cta h2{ font-size:clamp(26px,3.2vw,36px); letter-spacing:-0.03em; margin:0 auto 12px; max-width:24ch; }
.v3-lst .lst-cta .lst-sub{ margin:0 auto; }
.v3-lst .lst-cta .lst-uline{ margin:20px auto 26px; }
.v3-lst .lst-cta .lst-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.v3-lst .lst-cta .lst-micro{ margin-top:16px; font:500 12px var(--mono); letter-spacing:.02em; color:var(--lst-muted); }

/* ============================================================
   INTEGRATIONS CATALOG
   ============================================================ */
.v3-lst .cat-group{ padding:56px 0; border-top:1px solid var(--rule); scroll-margin-top:84px; }
.v3-lst .cat-head{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.v3-lst .cat-head .cat-n{ font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--lst-muted); white-space:nowrap; }

.v3-lst .int-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:28px; }
.v3-lst .int-tile{ background:var(--paper); border:1px solid var(--rule); border-radius:2px; padding:20px 20px 18px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; transition:background .16s ease, border-color .16s ease; }
.v3-lst .int-tile:hover{ background:rgba(255,79,0,.03); border-color:var(--rule-2); }
.v3-lst .int-tile-head{ display:flex; align-items:center; gap:12px; min-width:0; }
.v3-lst .int-tile-logo{ width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--rule); border-radius:2px; }
.v3-lst .int-tile-logo img{ width:22px; height:22px; object-fit:contain; }
.v3-lst .int-tile-nm{ display:block; font-size:16px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v3-lst .int-tile-head > span:last-child{ min-width:0; }
.v3-lst .int-status{ display:inline-flex; align-items:center; font:500 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--lst-muted); margin-top:3px; }
/* status carries color in the LABEL, no dot (founder call, 2026-07-17):
   Active = green, Beta = firm graphite, Coming soon = muted grey. */
.v3-lst .int-status .dot{ display:none; }
.v3-lst .int-status.int-pill--available{ color:#1F7A43; }
.v3-lst .int-status.int-pill--beta{ color:var(--graphite); }
.v3-lst .int-tile-desc{ font-size:13px; line-height:1.5; color:var(--lst-sec); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.v3-lst .int-tile-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--rule); }
.v3-lst .int-tile-foot .go{ font:500 12px var(--sans); color:var(--ink); }
.v3-lst .int-tile-foot .arr{ font:500 12px var(--mono); color:var(--lst-muted); transition:color .16s ease, transform .16s ease; }
.v3-lst .int-tile:hover .arr{ color:var(--orange); transform:translateX(2px); }

/* ============================================================
   BLOG LISTING (ourblog + tag)
   ============================================================ */
.v3-lst .bl-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; }
.v3-lst .bl-search{ display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 13px; background:var(--paper); border:1px solid var(--rule-2); border-radius:2px; color:var(--lst-muted); min-width:230px; transition:border-color .16s ease; }
.v3-lst .bl-search:focus-within{ border-color:var(--ink); color:var(--ink); }
.v3-lst .bl-search input{ border:0; outline:0; background:transparent; font:400 13.5px var(--sans); color:var(--ink); width:100%; }
.v3-lst .bl-search input::placeholder{ color:var(--lst-muted); }

/* category kicker: mono uppercase + a small solid square in the category hue.
   site.css paints .badge-* as tinted pills (incl. a warm strategy tint); this file
   loads later, so the transparent reset below wins and the kicker stays flat. */
.v3-lst .bl-kick{ display:inline-flex; align-items:center; gap:8px; padding:0; background:transparent; border:0; border-radius:0; font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--lst-muted); }
.v3-lst .bl-kick::before{ content:""; width:7px; height:7px; flex:none; background:currentColor; }
.v3-lst .bl-kick.badge-case{ color:var(--ok); }
.v3-lst .bl-kick.badge-integration{ color:var(--brand); }
.v3-lst .bl-kick.badge-eng{ color:var(--info); }
.v3-lst .bl-kick.badge-strategy{ color:var(--lst-muted); }

/* the ONE framed editorial entity: featured essay card */
.v3-lst .bl-featured{ display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr); gap:44px; background:var(--paper); padding:34px 38px 32px; text-decoration:none; color:inherit; margin-top:28px; }
.v3-lst .bl-featured .bl-f-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.v3-lst .bl-featured .bl-f-date{ font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--lst-muted); }
.v3-lst .bl-featured h3{ font-size:clamp(24px,2.9vw,32px); line-height:1.12; letter-spacing:-0.028em; max-width:24ch; }
.v3-lst .bl-featured p{ font-size:15px; line-height:1.6; color:var(--lst-sec); max-width:56ch; margin-top:14px; }
.v3-lst .bl-featured .bl-f-read{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font:600 14px var(--sans); color:var(--ink); }
.v3-lst .bl-featured .bl-f-read .arr{ font-family:var(--mono); font-size:12px; color:var(--lst-muted); transition:color .16s ease, transform .16s ease; }
.v3-lst .bl-featured:hover .bl-f-read .arr{ color:var(--orange); transform:translateX(2px); }
/* right column: the mono datasheet for the essay */
.v3-lst .bl-f-spec{ align-self:center; border-top:1px solid var(--graphite); }
.v3-lst .bl-f-spec .row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--rule); }
.v3-lst .bl-f-spec .k{ font:500 10px var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--lst-muted); white-space:nowrap; }
.v3-lst .bl-f-spec .v{ font:500 12.5px var(--mono); letter-spacing:.01em; color:var(--ink); text-align:right; }

/* post grid: hairline cards, signature corner, hover heat */
.v3-lst .bl-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:28px; }
.v3-lst .bl-card{ background:var(--paper); border:1px solid var(--rule); border-radius:2px; padding:20px 22px 18px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; transition:background .16s ease, border-color .16s ease; }
.v3-lst .bl-card:hover{ background:rgba(255,79,0,.03); border-color:var(--rule-2); }
.v3-lst .bl-card .bl-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.v3-lst .bl-card .bl-date{ font:500 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--lst-muted); }
.v3-lst .bl-card h3{ font-size:17px; line-height:1.28; letter-spacing:-0.015em; color:var(--ink); }
.v3-lst .bl-card p{ font-size:13.5px; line-height:1.52; color:var(--lst-sec); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.v3-lst .bl-card .bl-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--rule); }
.v3-lst .bl-card .bl-min{ font:500 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--lst-muted); }
.v3-lst .bl-card .arr{ font:500 12px var(--mono); color:var(--lst-muted); transition:color .16s ease, transform .16s ease; }
.v3-lst .bl-card:hover .arr{ color:var(--orange); transform:translateX(2px); }

/* inline newsletter aside (board panel, graphite left rule; spans full row) */
.v3-lst .bl-news{ grid-column:1 / -1; background:var(--board); border-left:2px solid var(--graphite); padding:26px 28px; }
.v3-lst .bl-news h3{ font-size:19px; letter-spacing:-0.02em; }
.v3-lst .bl-news p{ font-size:14px; color:var(--lst-sec); margin-top:6px; max-width:52ch; }
.v3-lst .bl-news form{ display:flex; gap:10px; max-width:440px; margin-top:16px; }
.v3-lst .bl-news input{ flex:1; height:42px; padding:0 14px; background:var(--paper); border:1px solid var(--rule-2); border-radius:2px; font:400 14px var(--sans); color:var(--ink); outline:none; transition:border-color .16s ease; }
.v3-lst .bl-news input:focus{ border-color:var(--ink); }
.v3-lst .bl-news input::placeholder{ color:var(--lst-muted); }
.v3-lst .bl-news .fine{ margin-top:10px; font:500 11px var(--mono); letter-spacing:.04em; color:var(--lst-muted); }

/* empty state + pagination */
.v3-lst .bl-empty{ margin-top:28px; padding:34px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.v3-lst .bl-empty p{ font-size:15px; color:var(--lst-sec); margin-bottom:16px; }
.v3-lst .bl-pager{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:40px; flex-wrap:wrap; }
.v3-lst .bl-pager a,.v3-lst .bl-pager span{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 12px; border:1px solid var(--rule-2); border-radius:2px; font:500 12.5px var(--mono); color:var(--ink); text-decoration:none; transition:border-color .16s ease, background .16s ease; }
.v3-lst .bl-pager a:hover{ border-color:var(--ink); }
.v3-lst .bl-pager span[aria-current]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* ============================================================
   GLOSSARY (fully quiet: hairlines + mono only, zero orange)
   ============================================================ */
.v3-lst .gl-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; }
.v3-lst .gl-search{ display:flex; gap:10px; flex:1 1 320px; max-width:460px; }
.v3-lst .gl-search input[type="search"]{ flex:1; height:42px; padding:0 14px; background:var(--paper); border:1px solid var(--rule-2); border-radius:2px; font:400 14px var(--sans); color:var(--ink); outline:none; transition:border-color .16s ease; }
.v3-lst .gl-search input[type="search"]:focus{ border-color:var(--ink); }
.v3-lst .gl-search input::placeholder{ color:var(--lst-muted); }
.v3-lst .gl-count{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:40px; padding-bottom:14px; border-bottom:1px solid var(--graphite); }
.v3-lst .gl-count h2{ font-size:20px; letter-spacing:-0.02em; }
.v3-lst .gl-count .q{ font:500 12px var(--mono); color:var(--lst-muted); }
.v3-lst .gl-letters{ display:flex; gap:6px; flex-wrap:wrap; }
.v3-lst .gl-letters a{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 6px; border:1px solid var(--rule-2); border-radius:2px; font:500 11px var(--mono); color:var(--lst-sec); text-decoration:none; transition:border-color .14s ease, color .14s ease; }
.v3-lst .gl-letters a:hover{ border-color:var(--ink); color:var(--ink); }
.v3-lst .gl-letter{ scroll-margin-top:84px; display:block; font:600 12px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--lst-muted); margin:44px 0 0; padding-bottom:10px; border-bottom:1px solid var(--rule-2); }
.v3-lst .gl-row{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:28px; padding:24px 0; border-bottom:1px solid var(--rule); }
.v3-lst .gl-term{ font-size:17px; font-weight:600; letter-spacing:-0.015em; color:var(--ink); }
.v3-lst .gl-cat{ display:inline-block; margin-top:7px; font:500 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--lst-muted); }
.v3-lst .gl-def{ font-size:15px; line-height:1.62; color:var(--ink); max-width:66ch; font-weight:500; }
.v3-lst .gl-desc{ font-size:14px; line-height:1.66; color:var(--lst-sec); max-width:66ch; margin-top:10px; }
.v3-lst .gl-empty{ margin-top:40px; padding:30px 0; border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule); }
.v3-lst .gl-empty b{ display:block; font-size:16px; color:var(--ink); margin-bottom:6px; }
.v3-lst .gl-empty p{ font-size:14px; color:var(--lst-sec); }

/* ============================================================
   CUSTOMER STORIES
   ============================================================ */
.v3-lst .cs-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px; }
.v3-lst .cs-card{ background:var(--paper); padding:26px 26px 22px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; transition:background .16s ease; }
.v3-lst .cs-card:hover{ background-color:rgba(255,79,0,.03); } /* background-color (not shorthand) so the .fr corner frame survives hover */
.v3-lst .cs-name{ font:600 10.5px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--brand); }
.v3-lst .cs-quote{ font-size:18px; line-height:1.36; font-weight:500; letter-spacing:-0.015em; color:var(--ink); margin:2px 0 4px; }
.v3-lst .cs-meta{ font:500 11px var(--mono); letter-spacing:.05em; color:var(--lst-muted); margin-top:auto; }
.v3-lst .cs-read{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--rule); font:500 13px var(--sans); color:var(--ink); }
.v3-lst .cs-read .arr{ font:500 12px var(--mono); color:var(--lst-muted); transition:color .16s ease, transform .16s ease; }
.v3-lst .cs-card:hover .cs-read .arr{ color:var(--orange); transform:translateX(2px); }

/* ============================================================
   RESOURCES HUB
   ============================================================ */
/* featured essay: the one framed editorial entity (shares .bl-featured shape) */
.v3-lst .rs-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:28px; }
.v3-lst .rs-tile{ background:var(--paper); border:1px solid var(--rule); border-radius:2px; padding:20px 20px 18px; display:flex; flex-direction:column; gap:9px; text-decoration:none; color:inherit; transition:background .16s ease, border-color .16s ease; }
.v3-lst .rs-tile:hover{ background:rgba(255,79,0,.03); border-color:var(--rule-2); }
.v3-lst .rs-tile .kick{ font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--lst-muted); }
.v3-lst .rs-tile h3{ font-size:16px; letter-spacing:-0.015em; line-height:1.25; }
.v3-lst .rs-tile p{ font-size:13px; line-height:1.5; color:var(--lst-sec); flex:1; }
.v3-lst .rs-tile .arr{ font:500 12px var(--mono); color:var(--lst-muted); margin-top:6px; transition:color .16s ease, transform .16s ease; }
.v3-lst .rs-tile:hover .arr{ color:var(--orange); transform:translateX(2px); }
/* builders: hairline link rows */
.v3-lst .rs-rows{ display:flex; flex-direction:column; margin-top:28px; border-top:1px solid var(--graphite); }
.v3-lst .rs-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 2px; border-bottom:1px solid var(--rule); text-decoration:none; transition:background .16s ease, padding-left .16s ease; }
.v3-lst .rs-row:hover{ background:rgba(255,79,0,.04); padding-left:10px; }
.v3-lst .rs-row .k{ flex:none; width:110px; font:500 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--lst-muted); }
.v3-lst .rs-row .t{ font-size:16px; font-weight:500; letter-spacing:-0.01em; color:var(--ink); flex:1; min-width:0; }
.v3-lst .rs-row .d{ font-size:13px; color:var(--lst-sec); flex:1.4; min-width:0; }
.v3-lst .rs-row .arr{ flex:none; font:500 12px var(--mono); color:var(--lst-muted); white-space:nowrap; }
.v3-lst .rs-row:hover .arr{ color:var(--orange); }

/* ============================================================
   motion housekeeping + responsive
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .v3-lst *,.v3-lst *::before,.v3-lst *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
html.reduce .v3-lst *,html.reduce .v3-lst *::before,html.reduce .v3-lst *::after{ animation:none !important; transition:none !important; }

@media (max-width:980px){
  .v3-lst section{ padding:56px 0; }
  .v3-lst .lst-hero{ padding:26px 0 52px; }
  .v3-lst .cat-group{ padding:46px 0; }
  .v3-lst .int-grid{ grid-template-columns:1fr 1fr; }
  .v3-lst .bl-grid{ grid-template-columns:1fr 1fr; }
  .v3-lst .bl-featured{ grid-template-columns:1fr; gap:26px; padding:26px 26px 24px; }
  .v3-lst .bl-f-spec{ align-self:stretch; }
  .v3-lst .cs-grid{ grid-template-columns:1fr; }
  .v3-lst .rs-grid{ grid-template-columns:1fr 1fr; }
  .v3-lst .gl-row{ grid-template-columns:1fr; gap:10px; padding:20px 0; }
}
@media (max-width:600px){
  .v3-lst .wrap{ padding:0 20px; }
  .v3-lst .lst-hero h1{ font-size:clamp(30px,8.5vw,40px); }
  .v3-lst .int-grid{ grid-template-columns:1fr; }
  .v3-lst .bl-grid{ grid-template-columns:1fr; }
  .v3-lst .rs-grid{ grid-template-columns:1fr; }
  .v3-lst .bl-toolbar{ align-items:stretch; flex-direction:column; }
  .v3-lst .bl-search{ min-width:0; }
  .v3-lst .bl-news form{ flex-direction:column; max-width:none; }
  .v3-lst .lst-cta .lst-actions .lst-btn{ flex:1 1 100%; text-align:center; }
  .v3-lst .rs-row{ flex-wrap:wrap; gap:8px 14px; }
  .v3-lst .rs-row .d{ flex-basis:100%; }
}

/* ============================================================
   BLOG INDEX: compact header + filter band (2026-07-08).
   Blog-scoped selectors only (.bl-band / .bl-sec live solely on
   ourblog.php) so tag.php + resources.php keep the shared
   .lst-hero / .bl-featured grammar untouched. One band: the H1,
   then chips + search on the row below; the following section's
   `section + section` border-top seats the band on a single
   hairline in every filter state. Sections below run a tight
   rhythm so the featured article and the first grid row clear
   a 900px fold. Replaces the earlier .bl-hero-compact masthead.
   ============================================================ */
.v3-lst .bl-band{ padding:20px 0 16px; }
.v3-lst .bl-band h1{ font-size:clamp(28px,2.4vw,32px); line-height:1.1; letter-spacing:-0.032em; }
.v3-lst .bl-band .bl-toolbar{ margin-top:12px; }
/* tight vertical rhythm for the blog's stacked sections
   (featured, editor picks, all-articles grid) */
.v3-lst .bl-sec{ padding:22px 0 34px; }
.v3-lst .bl-sec .bl-featured{ margin-top:0; }

/* ============================================================
   LISTING BANDS (2026-07-10): glossary / customers / resources
   compressed to the blog's one-band rhythm (founder-approved).
   Additive, page-scoped classes only (.ix-band / .ix-sec plus
   band-scoped seatings of existing furniture), so the shared
   .lst-* grammar above stays untouched for integrations.php and
   tag.php. Same numbers as .bl-band/.bl-sec: one compact header
   band (single H1; meta / chips / search on the row below), then
   a 22/34 section rhythm so the first content row clears a 900px
   fold. The next section's `section + section` border-top seats
   each band on a single hairline.
   ============================================================ */
.v3-lst .ix-band{ padding:20px 0 16px; }
.v3-lst .ix-band h1{ font-size:clamp(28px,2.4vw,32px); line-height:1.1; letter-spacing:-0.032em; }
.v3-lst .ix-band .lst-crumbs{ margin-bottom:10px; }
.v3-lst .ix-band .lst-lede{ margin-top:10px; }
.v3-lst .ix-band .lst-meta{ margin-top:12px; }
.v3-lst .ix-band .gl-bar{ margin-top:14px; }
/* tight vertical rhythm for the stacked content sections */
.v3-lst .ix-sec{ padding:22px 0 34px; }
.v3-lst .ix-sec .gl-count,
.v3-lst .ix-sec .gl-empty{ margin-top:0; }
.v3-lst .ix-sec .bl-featured{ margin-top:0; }

/* ---------- frame re-assert (2026-07-10 consistency pass) ----------
   The `background:` SHORTHANDS on .bl-featured/.cs-card above reset background-image
   and erased the corner registration marks. Re-asserted LAST so source order inside
   this file can never kill the frame again (sister backstop lives in v3.css). */
.v3-lst .fr{
  background-image:
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--sig),var(--sig)), linear-gradient(var(--sig),var(--sig));
  background-repeat:no-repeat;
  background-position:top left,top left, top right,top right, bottom left,bottom left, bottom right,bottom right;
  background-size:
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--fts), var(--fts) var(--fl);
}