/* ============================================================================
   Thruline marketing site — layout + components (Thruline Website v1.5).
   Consumes tokens/base/buttons from thruline.css. Light is the default look
   (parchment/cream); dark is driven entirely by the tokens.
   ========================================================================== */


/* ===== Utilities ===== */
.visually-hidden, .form-error[hidden], [hidden] { }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.is-hidden { display: none !important; }
/* Honeypot wrapper (issue #638). Positioned off-screen rather than
   display:none, which is the pattern scrapers check for first. Invisible and
   unfocusable for humans, still present in the DOM for a filler to take. */
.lead-hp {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
main { display: block; }

/* ===== Body ===== */
.mkt {
  margin: 0px auto;
  border-left: solid 1px #eee9dfff;
  border-right: solid 1px #eee9dfff;
  max-width: 1200px;
}

/* ===== Top nav ===== */
/* Sticky + condensing. marketing.js drives --nav-shift 1:1 with scroll, capped at
   the distance that puts the wordmark level with .nav-links; the brand's travel
   reads from it, so the brand rides up while .nav-links — which lives in the top
   row — never moves. At the cap the header gets .condensed and the wordmark swaps
   to the emblem.

   The header's own height is CONSTANT (120px) so the page never reflows while
   scrolling — animating the header's height instead shifted every following
   section, which fought scroll-anchoring and made the brand shake whenever you
   stopped mid-transition.

   The opaque box the page scrolls behind is the ::before backdrop, absolutely
   positioned so its height animates without touching layout. Its height (--nav-h)
   is MEASURED: the condensed target is the bottom of the real nav content plus
   1rem of clearance, so content never cuts through the logo or the links.
   (Deriving it arithmetically collapsed it to ~36px — mid-logo.) The 3px rule
   rides the backdrop's bottom edge. No JS = the original solid 120px bar. */
.mkt-nav {
  position: sticky;
  top: 0;
  z-index: 400;
  background: transparent;
  height: 120px;
}
.mkt-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h, 120px);
  background: var(--color-bg);
  border-bottom: 3px solid var(--nav-rule);
  z-index: -1;   /* behind the nav's own content, still above the page */
}
.mkt-nav-top {
  display: flex; 
  align-items: center; 
  padding: 1rem .8rem;
}
.mkt-nav-utility { display: flex; align-items: center; margin-left: .8rem; }
/* The in-dropdown theme toggle is desktop-hidden (the .mkt-nav-utility one shows
   there); the mobile @media block swaps them at the hamburger breakpoint. The
   .nav-cta-row wrapper is transparent on desktop (display:contents) so Sign Up
   sits inline in the nav row exactly as before. */
.nav-links-theme-toggle { display: none; }
.nav-cta-row { display: contents; }
.mkt-nav .nav-links {
  display: flex; align-items: center; gap: 1.75rem; margin-left: auto;
}
/* Reset applies to plain nav links only — NOT the Sign Up CTA, which keeps its
   .btn/.btn-cta (and .nav-signup) styling. Without the :not() the higher
   specificity here (0,2,1) would strip the button look. */
.mkt-nav .nav-links > a:not(.nav-signup),
.nav-dropdown-trigger {
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  color: var(--color-text); background: none; border: none; cursor: pointer;
  padding: 0; letter-spacing: 0.01em;
}
.nav-dropdown { position: relative; }
.nav-dropdown-trigger::after { content: " ▾"; color: var(--color-text-muted); font-size: 1.25rem; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 0.6rem); left: 0; min-width: 220px;
  list-style: none; margin: 0; padding: 0.4rem; z-index: 200;
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.nav-dropdown-menu[hidden] { display: none; }
.nav-dropdown-menu a {
  display: block; padding: 0.5rem 0.75rem;
  color: var(--color-text); font-size: 0.9rem; font-weight: 500;
}
.nav-dropdown-menu a:hover { background: var(--color-bg-soft); color: var(--color-cta); }
.nav-signup { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-transform: uppercase;
  padding: 0.2rem .6rem;
  /* border: 1p x solid transparent; */
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
 }

.mkt-nav-brand { padding-top: 0.25rem; padding-left: .8rem; }
.mkt-brand { display: inline-flex; position: relative; top: 26px; }
/* Size only — do NOT set `display` here, or this (0,2,0) rule would override the
   theme toggles below (0,1,0) and force BOTH wordmarks visible. Display is owned
   by the .wordmark-light / .wordmark-dark classes so light/dark can swap them. */
.mkt-nav-brand-tagline { font-size: .69rem; text-transform: uppercase; font-weight: 600; color: var(--grey-olive); margin-top: 1rem; font-family: var(--font-display); padding-left: 3px; }
.mkt-brand .wordmark { height: 34px; width: auto; }
.wordmark-light { display: block; }
.wordmark-dark  { display: none; }
:root[data-theme="dark"] .wordmark-light { display: none; }
:root[data-theme="dark"] .wordmark-dark  { display: block; }
.mkt-nav .rule-nav { margin-top: -24px; }

/* --- Brand lockup (emblem + "Thruline") ---------------------------------- */
/* The docs-topbar treatment, shared by the inner-page nav (.mkt-brand-compact)
   and the home nav's condensed state (.mkt-brand-mark) so the homepage scroll
   RESOLVES into exactly what every other page shows. Sizing mirrors .docs-brand:
   45px emblem, 8px gap, 1rem text. */
.mkt-brand-compact,
.mkt-brand-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--color-text);
  text-decoration: none;
}
.mkt-brand-compact strong,
.mkt-brand-mark strong { font-weight: 700; line-height: 25.6px; letter-spacing: -0.32px; }
.mkt-brand-compact .emblem,
.mkt-brand-mark .emblem { width: 45px; height: auto; }
.mkt-brand-compact:hover, .mkt-brand:hover { color: var(--color-text); }

/* Emblem follows the theme, same pattern as the wordmark pair above. */
.emblem-dark { display: none; }
:root[data-theme="dark"] .emblem-light { display: none; }
:root[data-theme="dark"] .emblem-dark { display: block; }

/* --- Home only: condensing brand ----------------------------------------- */
/* The brand rides up with the scroll; capped by JS so it lands level with the
   nav links. Selectors are deliberately (0,3,0)+ so they outrank the
   .wordmark-light/-dark theme rules above rather than tying with them. */
.mkt-nav-brand { transform: translateY(calc(-1 * var(--nav-shift, 0px))); will-change: transform; }
/* The brand block is a full-width box that rides up OVER the links row (and
   overhangs the hero at rest). Transformed, it paints above its earlier siblings,
   so as a transparent overlay it swallowed every click in the nav. Let clicks
   fall through the container and re-enable them on the logo link itself. */
.mkt-nav-brand { pointer-events: none; }
.mkt-nav-brand .mkt-brand { pointer-events: auto; }
.mkt-brand-mark { display: none; }

/* At the cap: wordmark out, emblem lockup in, tagline gone. */
.mkt-nav.condensed .mkt-brand .wordmark { display: none; }
.mkt-nav.condensed .mkt-brand .mkt-brand-mark { display: flex; }
.mkt-nav-brand-tagline { transition: opacity 0.15s ease; }
.mkt-nav.condensed .mkt-nav-brand-tagline { opacity: 0; visibility: hidden; }

/* --- Inner pages: single-row nav ----------------------------------------- */
/* No wordmark row, so the bar is just the links row and the backdrop tracks it.
   marketing.js no-ops here (it bails when .mkt-nav-brand is absent). */
.mkt-nav--compact { height: auto; }
.mkt-nav--compact::before { height: 100%; }
.mkt-nav--compact .mkt-nav-top { padding-left: .8rem; }

/* Hamburger (mobile only) */
.mkt-nav .hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; padding: 5px; background: none; border: none;
  cursor: pointer; margin-left: auto;
}
.mkt-nav .hamburger span { display: block; height: 2px; background: var(--color-text); border-radius: 1px; transition: transform .15s, opacity .15s; }
.mkt-nav .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mkt-nav .hamburger.open span:nth-child(2) { opacity: 0; }
.mkt-nav .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero { 
  display: flex; 
  flex-direction: column; 
  padding-top: 2rem;
  padding-right: 2rem;
}
.hero-title { margin-left: auto; text-align: right; border-bottom: solid 8px #dacd65; max-width: 50%; text-wrap: balance; }
.hero-sub {
  font-size: 1.25rem; font-weight: 600; color: var(--color-text);
  max-width: 46ch; margin: 1.25rem 0 0 auto;
  line-height: 1.5;
}
.hero-sub em { color: var(--color-cta); font-style: italic; }
.hero-cta { display: flex; align-items: center; gap: 1.5rem; margin-top: 1rem; padding-right: 2rem;}
/* 2px grey-olive line with an arrowhead on the button end (brand divider-arrow
   motif). The arrowhead is a CSS triangle centered on the 2px line. */
.hero-cta-line { position: relative; flex: 1; height: 2px; background: var(--line-arrow); }
.hero-cta-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-right: -2px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 11px solid var(--line-arrow);
}
/* Left-pointing variant for block contexts (e.g. under a .section-head title).
   Renders as a full-width block line (no flex row needed) with the arrowhead on
   the LEFT end, pointing left — a mirror of the hero arrow. */
.hero-cta-line--left { display: block; }
.hero-cta-line--left::after {
  right: auto;
  left: 0;
  margin-right: 0;
  margin-left: -2px;
  border-left: none;
  border-right: 11px solid var(--line-arrow);
}
.btn-lg { padding: 0.25rem .8rem; font-size: 1.15rem; text-transform: uppercase; margin-right: 1rem; }

/* ===== Intro row ===== */
.intro {
  display: flex;
  justify-content: flex-start; 
  gap: 2.5rem;
  align-items: start; 
  padding: 2rem 0px .25rem 1.5rem;
}
.intro-aside { min-width: 20%; }
.site-search {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full); color: var(--color-text-muted); margin-bottom: 1.75rem;
}
.site-search input { border: none; background: none; outline: none; font: inherit; color: var(--color-text); width: 100%; }
.latest-news {
  max-width: 80%;
}
.latest-news h4 {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted);
  margin-bottom: 0.9rem;
}
.latest-news .latest-news-list {
  margin-left: 1.25rem;
  border-bottom: 1px solid var(--golden-sand);
  padding-bottom: 1rem;
}

.news-item { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.9rem; color: var(--color-text); }
.news-thumb { flex: 0 0 65px; height: 65px; }
.news-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.news-item:hover .news-title { color: var(--color-cta); text-decoration: underline; }
.intro-copy {max-width: 33%; }
.intro-copy p { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 1rem; color: var(--color-text); }
.intro-shot img { width: 100%; }

/* ===== Section scaffolding ===== */
/* .band-section { padding: 3rem 0; border-top: 1px solid var(--color-border); } */
.section-head { margin: 2rem 0 1.5rem; display: flex; align-items: center; }
/* Centered pill flanked by two arrow lines, both pointing inward at the pill.
   The two .hero-cta-line spans (flex:1) fill the space on each side; the pill
   stays its natural size in the middle. */
.section-head--center { justify-content: center; gap: 1rem; margin-top: -2.8rem; }
.section-head--center .pill-section-header {
  display: flex;
  justify-content: center;
}
.section-head--center .pill-label { margin: 0; flex-shrink: 0; }
.section-kicker {
  display: inline-block; 
  background: var(--color-band); color: var(--color-text);
  font-weight: 700; 
  font-size: 1.75rem; 
  padding: 0.2rem 0.6rem; 
  margin-right: .25rem;
}
.two-col { display: grid; grid-template-columns: 0.7fr 1.1fr; gap: 5rem; padding: 0px 2rem; margin-bottom: 3rem; }
.col-lead p { font-size: 1.0625rem; line-height: 1.7; padding-left: 3rem; margin-bottom: 1rem; color: var(--color-text); }
.col-points { display: flex; flex-direction: column; gap: 1.5rem; max-width: 95%; }
/* Mirrors the .step layout: a terracotta icon on the left, content on the right. */
.point { display: flex; gap: 1rem; align-items: flex-start; }
.point-icon { flex-shrink: 0; color: var(--color-cta); line-height: 0; }
.point-icon svg { display: block; }
.point-title { margin-bottom: 0.35rem; font-weight: 700; color: var(--color-text); }
.point p { line-height: 1.6; }

.step { display: flex; gap: 1rem; }
.step-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--color-cta); line-height: 1; }
.step-title { margin-bottom: 0.35rem; font-weight: 700; margin-top: -.3rem; max-width: 200px; }
.step p { line-height: 1.6; }

/* ===== Integrations band ===== */
.integrations-band { position: relative; background: var(--color-band); padding: 3rem 0; margin: 6rem 0 1rem; }
/* The head straddles the band's TOP EDGE: the arrow line becomes the top border
   line and the Integrations pill sits half-above / half-below it. Absolutely
   positioned on the top edge and pulled up by half its own height. The band's
   top padding/margin leave room for the pill's lower/upper halves. */
.integrations-head {
  position: absolute; top: 0; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 1rem;
  padding-right: 1.75rem;
}
.integrations-head .pill-label { margin: 0; flex-shrink: 0; }
.integrations-inner { display: grid; grid-template-columns: 1fr 0.6fr; gap: 3rem; margin-bottom: 1.85rem; padding: 2rem 8rem; }
.pill-label {
  background: var(--golden-sand); 
  color: var(--ink-black);
  font-weight: 700; 
  font-size: 1.75rem; 
  padding: 0.3rem 0.9rem; 
  margin-bottom: 1rem;
}
.pill-label--cta { background: var(--color-cta); z-index: 1; margin: -2.75rem auto 0; color: var(--color-on-accent); }
.integrations-copy h2 { margin-bottom: 0.9rem; }
.integrations-copy p { line-height: 1.7; margin-bottom: 0.75rem; color: var(--color-text); }
.integrations-tag strong { color: var(--color-text); }
.integrations-logos { display: flex; flex-direction: column; gap: 1.75rem; align-items: center; }
.integrations-logos img { width: auto; max-width: 180px; max-height: 60px; object-fit: contain; }
:root[data-theme="dark"] .integrations-logos img { filter: invert(1) brightness(1.6) grayscale(1); }

/* ===== Why grid ===== */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; padding: 1rem 2rem; text-align: center; column-rule: 4px solid var(--soft-linen); }
.why-col h3 { margin-bottom: 1rem; font-weight: 700; max-width: 10rem; }
.why-line--taupe { border-bottom: solid 8px var(--rosy-taupe); }
.why-col p { line-height: 1.7; text-align: left; padding: 1rem; }

/* ===== Pills ===== */
.pills-section { padding: 3rem 1.5rem; text-align: center; margin-top: 2rem; }
/* .pills-heading { margin-bottom: 1.75rem; } */
.pill-row { display: flex; flex-wrap: wrap; justify-content: center; max-width: 760px; margin: 0 auto; }
.pill { font-weight: 700; font-size: 1rem; padding: 0.55rem 1.1rem; color: var(--ink-black); }
.pill--gold  { background: var(--golden-sand); }
.pill--rosy  { background: var(--rosy-taupe); }
.pill--band  { background: var(--vanilla-custard); }
.pill--blue  { background: var(--blue-grey); color: var(--color-on-accent); }
.pill--brown { background: var(--reddish-brown); color: var(--parchment); }

/* ===== FAQ ===== */
.faq-section { margin-top: 1rem; }
/* Theme-aware bands: --color-footer-bg flips golden-sand (light) → near-black (dark)
   and --color-surface-soft flips soft-linen (light) → #1b3036 (dark). The raw
   --golden-sand/--soft-linen stayed light in dark mode, leaving parchment text
   (inherited --color-text) at ~1.1–1.5:1. Text keeps inheriting --color-text,
   which is ink in light / parchment in dark — correct on both band values. */
.faq-title { background-color: var(--color-footer-bg); padding: 1rem 1.5rem; border-bottom: solid 4px var(--grey-olive); }
.faq-list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--grey-olive); padding: 0 1.5rem; background-color: var(--color-surface-soft); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 1.1rem 0.25rem;
  font-weight: 600; font-size: 1.0625rem; color: var(--color-text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron { width: 10px; height: 10px; border-right: 2px solid var(--color-cta); border-bottom: 2px solid var(--color-cta); transform: rotate(45deg); transition: transform 0.2s ease; flex: 0 0 auto; }
.faq-item[open] .faq-chevron { transform: rotate(-135deg); }
.faq-answer { padding: 0 0.25rem 1.2rem;   }
.faq-answer p { line-height: 1.7; max-width: 70ch; }

/* ===== Newsletter ===== */
.newsletter-section { padding: 4.5rem 3rem 3rem 3rem; }
.newsletter-inner { display: flex; align-items: flex-start; justify-content: space-around; gap: 2rem; margin: 0 auto; }
.newsletter-copy { max-width: 400px; }
.newsletter-copy p { margin-top: 0.6rem; line-height: 1.6; }
.newsletter-form-wrap form { display: flex; flex-direction: column; gap: 0.9rem; min-width: 460px; max-width: 480px; }
.newsletter-form-wrap input[type="email"] {
  padding: 0.85rem 1rem; font: inherit; color: var(--color-text);
  background: var(--color-band); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); outline: none;
}
.newsletter-form-wrap input[type="email"]:focus { border-color: var(--color-cta); }
.newsletter-form-wrap button { align-self: flex-start; }
.form-error {
  background: rgba(214, 90, 59, 0.12); color: var(--color-cta-hover);
  border: 1px solid var(--color-cta); border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem; margin-bottom: 0.75rem; font-size: 0.9rem; font-weight: 500;
}

/* ===== Status pages (form success / 404) ===== */
.status-page { text-align: center; padding: 5rem 1.5rem; max-width: 640px; }
.status-page p { margin: 1rem 0 1.75rem; font-size: 1.0625rem; }

/* ===== Footer ===== */
.mkt-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: 3rem 1.5rem; margin-top: 2rem; text-align: center; }
.mkt-footer-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; }
.mkt-footer-col h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; margin-bottom: 0.9rem; color: var(--color-footer-text); }
.mkt-footer-col a { display: block; color: var(--color-footer-text); opacity: 0.85; font-size: 0.9rem; margin-bottom: 0.5rem; }
.mkt-footer-col a:hover { opacity: 1; text-decoration: underline; }
.mkt-footer-bottom { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(13, 27, 30, 0.15); font-size: 0.85rem; }
.mkt-status { display: inline-flex; align-items: center; gap: 0.4rem; }
.mkt-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9e44; }
.mkt-copy { margin-left: auto; }
.mkt-footer .theme-toggle { border-color: rgba(13, 27, 30, 0.3); color: var(--color-footer-text); }

/* ===== Blog index ===== */
.blog-section { max-width: 960px; margin: 0 auto; padding: 3.5rem 1.5rem 4rem; }
.blog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1rem; }
.blog-head .brow { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-cta); margin-bottom: 0.5rem; }
.blog-head h1 { display: inline-block; }
.blog-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); color: var(--color-text-muted); }
.blog-search input { border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 0.9rem; outline: none; min-width: 200px; }
.blog-head-rule { margin: 1.25rem 0 2.5rem; }
.blog-result-count { color: var(--color-text-secondary); font-size: 0.95rem; margin: 0 0 1.75rem; }
.blog-clear { margin-left: 0.4rem; color: var(--color-cta); text-decoration: underline; text-underline-offset: 2px; }

/* Featured hero card — thumbnail left, content right; gold accent + terracotta tag.
   BlogPost has no thumbnail column yet, so .blog-*-thumb shows placeholder brand
   art (news_thumbnail_tag). Restyle these thumb blocks / swap in real images here. */
.blog-featured { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 2rem; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); padding: 2rem; margin-bottom: 2.5rem; color: var(--color-text); overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.blog-featured:hover { box-shadow: var(--shadow-md); color: var(--color-text); }
.blog-featured-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--color-bg-soft); border-radius: var(--radius-md); }
.blog-featured-thumb img { width: 84px; height: 84px; }
.blog-featured-tag { display: inline-block; background: var(--color-cta); color: var(--color-on-accent); font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2rem 0.6rem; margin-bottom: 0.75rem; }
.blog-featured h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 0.5rem; }
.blog-featured-sub { color: var(--color-text-secondary); font-size: 1.05rem; margin-bottom: 0.9rem; }
.blog-featured-meta { display: flex; align-items: center; gap: 0.5rem; }

/* Card grid — thumbnail on top, body below */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blog-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border);  overflow: hidden; color: var(--color-text); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.blog-card:hover { box-shadow: var(--shadow-md); color: var(--color-text); }
.blog-card-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--color-bg-soft); border-bottom: 4px solid var(--line-emphasis-rosy); }
.blog-card-thumb img { width: 60px; height: 60px; }
.blog-card:hover .blog-card-thumb { border-bottom-color: var(--color-cta); }
.blog-card-body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.4rem 1.5rem 1.6rem; flex: 1; }
.blog-card time, .blog-featured-meta, .post-date { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.blog-card h2 { font-size: 1.2rem; border-top: 1px solid var(--rosy-taupe); padding-top: 1rem; margin-right: .5rem; }
.blog-card-sub { color: var(--color-text-secondary); font-size: 0.95rem; }
.blog-card-more { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; padding-top: 0.75rem; color: var(--color-accent); font-size: 0.875rem; font-weight: 600; }
.blog-card:hover .blog-card-more { color: var(--color-cta); }
.blog-empty { color: var(--color-text-secondary); padding: 2rem 0; }

/* ===== Blog post ===== (body typography inherited from the shared .prose rules) */
.post-meta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.post-date { display: inline-flex; align-items: center; gap: 0.4rem; }
.post-author { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-secondary); }
.post-author-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.blog-post .lede { border-top: 1px solid var(--color-border); padding-top: 1.5rem; }

.post-annotations { margin-top: 3rem; border-top: 1px solid var(--color-border); padding-top: 1.75rem; }
.post-annotations-heading { font-size: 1.15rem; margin-bottom: 1rem; }
.post-annotations-list { padding-left: 1.2rem; }
.post-annotation + .post-annotation { margin-top: 1.25rem; }
.post-annotation-text { color: var(--color-text-secondary); }
.post-annotation-meta { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.3rem; }

.post-related { max-width: var(--container); margin: 3.5rem auto 0; }
.post-related .section-head { margin-bottom: 1.5rem; }

/* ===== Responsive ===== */
/* Responsive rules live at the END of this file — see the Responsive section.
   They were here originally, which silently broke any rule whose base
   declaration appears later in the file (e.g. .pricing-grid, defined below,
   overrode its own mobile collapse at every width). */

/* ========================================================================
   Interior pages — prose article + pricing tiers + lead forms.
   Ported from the Astro global.css .prose/.callout/.cta-block/.tier rules and
   the per-page inline <style> blocks (pricing, contact), re-themed to Thruline
   tokens. Used by benefits/system/integrations/compare/pricing/contact pages.
   ==================================================================== */
.prose { max-width: 960px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.prose .brow {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-cta);
  margin-bottom: 0.75rem;
}
.prose h1 { font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: 1.25rem; }
.prose h2 { margin: 2.5rem 0 1rem; }
.prose h3 { margin: 1.75rem 0 0.75rem; }
.prose h4 { font-family: var(--font-body); font-size: 1.05rem; margin-bottom: 0.35rem; color: var(--color-text); }
.prose p { margin-bottom: 1.15rem; line-height: 1.75; color: var(--color-text-secondary); }
.prose .lede { font-size: 1.2rem; line-height: 1.6; color: var(--color-text); margin-bottom: 2rem; }
.prose a { color: var(--color-cta); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--color-cta-hover); }
.prose ul, .prose ol { margin: 0 0 1.25rem 1.25rem; }
.prose li { margin-bottom: 0.5rem; line-height: 1.65; color: var(--color-text-secondary); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-bg-soft); padding: 0.1em 0.4em; border-radius: var(--radius-sm); color: var(--color-text); }
.prose pre { background: var(--ink-black); color: var(--parchment); padding: 1rem 1.25rem; border-radius: var(--radius-md); overflow-x: auto; margin-bottom: 1.5rem; }
.prose pre code { background: none; padding: 0; color: inherit; }
/* Comparison/integration pages and rendered post bodies both emit tables.
   `display: block` + overflow makes a wide table scroll INSIDE the article
   instead of widening the page on a phone. */
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.95rem; }
.prose th, .prose td { border: 1px solid var(--color-border-strong); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.prose th { background: var(--color-bg-soft); color: var(--color-text); font-weight: 700; }
.prose td { color: var(--color-text-secondary); }
.prose blockquote {
  margin: 1.75rem 0; padding: 1rem 1.5rem; font-style: italic;
  border-left: 4px solid var(--line-emphasis-rosy); background: var(--color-bg-soft);
}

.callout {
  margin: 1.25rem 0; padding: 1.1rem 1.3rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-cta); border-radius: var(--radius-sm);
}
.callout h4 { margin-bottom: 0.3rem; }
.callout p { margin-bottom: 0; }

.cta-block { 
  margin: 4.5rem 5rem 1rem; 
  padding: 4rem 2.75rem; 
  text-align: center; 
  border: 3px solid var(--color-bg-soft);
}
.cta-block p { 
  color: var(--color-text); 
  margin-bottom: 1rem;
  font-size: 1.25rem;  
 }
.cta-block a {
  display: inline-block; margin: 0 0.4rem; padding: 0.55rem 1.3rem;
  background: var(--color-cta); color: var(--color-on-accent);
  font-weight: 600; text-decoration: none; text-transform: uppercase;
}
.cta-block a:hover { background: var(--color-cta-hover); color: var(--color-on-accent); }
.cta-block a + a { background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text); }
/* Ghost button: keep the background transparent on hover. Without this, the
   primary's `.cta-block a:hover` (0,2,1) outranks the base `+ a` (0,1,2) and
   paints the ghost with the CTA hover fill (pale #F3EFCE in dark) under its light
   text — illegible. Re-asserting transparent here (0,2,2) wins. */
.cta-block a + a:hover { background: transparent; border-color: var(--color-text); color: var(--color-text); }

/* Pricing */
.prose.pricing > h1, .prose.pricing > .lede { text-align: center; }
/* Row 1: three tiers (Pro / featured Team / Business); the featured (2nd) track is
   1.15fr so it renders ~15% wider than the two plain 1fr tiers. Row 2: the .tier-full
   Enterprise card spans all three columns. Collapses to 2-up / 1-up below. */
.pricing-grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 1rem; margin: 2rem 0 2.5rem; }
.tier { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem 1.25rem 1.5rem; background: var(--color-surface); }
.tier-full { grid-column: 1 / -1; padding: 1.25rem 3rem; }
.tier-featured { border: 2px solid var(--color-cta); box-shadow: var(--shadow-md); }
.tier h3 { margin: 0 0 0.25rem; font-size: 1.15rem; }
.tier-price { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--color-text); line-height: 1.1; margin-bottom: 0.5rem; }
.tier-price span { font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }
.tier-price span::before { content: "· "; }
.tier-summary { font-size: 0.85rem; color: var(--color-text-secondary); margin: 0 0 0.75rem; line-height: 1.4; }
.tier ul { list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.9rem; font-weight: 600; flex: 1; }
.tier li { padding: 6px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
.tier li:last-child { border-bottom: none; }
.prose .tier-cta { display: block; text-align: center; margin-top: auto; padding: 0.55rem 1rem; background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; font-size: 0.9rem; text-decoration: none; max-width: fit-content; }
.prose .tier-cta:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.tier-featured .tier-cta { background: var(--color-cta); }
.soon-badge { display: inline-block; vertical-align: middle; margin-left: 0.5rem; padding: 0.25rem 0.55rem; background: var(--color-band); color: var(--color-text); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border-radius: var(--radius-sm); }

/* Lead forms (contact-sales, OSS signup) */
.mkt-form { display: flex; flex-direction: column; gap: 0.35rem; max-width: 520px; margin-top: 1.5rem; }
.mkt-form label { font-weight: 600; font-size: 0.9rem; margin-top: 0.75rem; color: var(--color-text); }
.mkt-form input[type="text"], .mkt-form input[type="email"], .mkt-form textarea {
  padding: 0.65rem 0.75rem; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); outline: none;
}
.mkt-form input:focus, .mkt-form textarea:focus { border-color: var(--color-cta); }
.mkt-form button[type="submit"] { align-self: flex-start; margin-top: 1.25rem; }
.radio-group { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
.radio-label { position: relative; }
.radio-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-label span { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.radio-label input:checked + span { background: var(--color-cta); color: var(--color-on-accent); border-color: var(--color-cta); }
.radio-label input:focus-visible + span { outline: 2px solid var(--color-cta); outline-offset: 2px; }

/* ============================================================================
   Responsive
   ----------------------------------------------------------------------------
   MUST stay last in the file: these override base rules of equal specificity,
   so anything declared after them would win back at every width.

   Breakpoints: 1024 (tablet) → 900 (stacking) → 700 (mobile nav) → 560 (phone).
   The desktop design is untouched above 1024px.
   ========================================================================== */

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { gap: 3rem; padding: 0 1rem; }
  .integrations-inner { padding: 2rem 3rem; }
  .newsletter-section { padding: 3.5rem 1.5rem 2.5rem; }
}

/* ----- Stack the multi-column sections ----- */
@media (max-width: 900px) {
  /* .intro and .newsletter-inner are FLEX containers — the old rules here set
     grid-template-columns on them, which silently did nothing. */
  .hero-title { max-width: 75%; }
  .intro { flex-direction: column; padding: 2rem 0 0.25rem; }
  .intro-aside { min-width: 0; width: 100%; order: 1; }
  .intro-copy { max-width: 100%; }
  .intro-shot { display: none; }

  .newsletter-inner { flex-direction: column; align-items: stretch; }
  .newsletter-copy { max-width: 100%; }
  /* min-width: 460px overflowed any phone viewport. */
  .newsletter-form-wrap form { min-width: 0; width: 100%; max-width: 100%; }

  .two-col, .integrations-inner, .why-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .integrations-inner { padding: 2rem 1.5rem; }
  .why-grid { gap: 2rem; padding: 1rem; text-align: left; }
  .why-col h3, .step-title { max-width: none; }
  .col-lead p { padding-left: 0; }

  .blog-featured { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .tier-full { grid-column: auto; padding: 1.25rem; }
  .mkt-footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Mobile nav + single column ----- */
@media (max-width: 700px) {
  .mkt-nav .hamburger { display: flex; }
  .mkt-nav .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
    flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0;
    padding: 1rem 1.5rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  }
  .mkt-nav .nav-links.open { display: flex; }
  .nav-dropdown, .nav-dropdown-menu { position: static; width: 100%; box-shadow: none; border: none; }

  /* Bottom row of the open dropdown: Sign Up (left) and the theme toggle (right)
     on one line, opposite ends, vertically centered. The top-row utility toggle
     is hidden so there's exactly one. The toggle is a <button> (not an <a>), so
     tapping it flips the theme without closing the menu, and nothing overlaps the
     links/dropdown triggers above. */
  .mkt-nav-utility { display: none; }
  .nav-cta-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 0.75rem; }
  .nav-signup { margin-top: 0; }
  .nav-links-theme-toggle { display: inline-flex; }

  /* Hero is right-aligned on desktop; left-align and let it use the full width. */
  .hero { padding-right: 0; margin-top: 2rem; }
  .hero-title { margin-top: 2rem; }
  .hero-title, .hero-sub { margin-left: auto; max-width: 80%; padding-bottom: .5rem; }
  .hero-cta { padding-right: 0; gap: 1rem; }

  .intro-aside { display: none; }

  .blog-grid { grid-template-columns: 1fr; }
  .blog-head { flex-wrap: wrap; }
  .blog-search { width: 100%; }
  .blog-search input { min-width: 0; width: 100%; }

  .section-kicker, .pill-label { font-size: 1.25rem; }
  .two-col { padding: 0 0.5rem; }
  .integrations-band { margin: 4rem 0 1rem; }
  .pills-section { padding: 2.5rem 0.5rem; }
  .faq-title { padding: 1rem; }
  .faq-item { padding: 0 1rem; }
  .newsletter-section { padding: 3rem 1rem 2rem; }

  .prose { padding: 2rem 0 1rem; }
  .cta-block { padding: 1.5rem .5rem; margin: 4.5rem 2rem 2rem; }
  .blog-section { padding: 2.5rem 0 .5rem; }
  .blog-featured { padding: 1.5rem; }
  .post-related { margin-top: 0; }

  .pricing-grid { grid-template-columns: 1fr; }
  .mkt-footer { padding: 2.5rem 1rem; }
  .mkt-footer-cols { grid-template-columns: 1fr; text-align: left; }
  .mkt-footer-bottom { flex-wrap: wrap; justify-content: center; }
  .mkt-copy { margin-left: 0; width: 100%; order: 3; }
}

/* ----- Phone ----- */
@media (max-width: 560px) {
  /* The 1px side rules read as clutter once the page is edge-to-edge. */
  .mkt { border-left: none; border-right: none; }

  /* Shorter two-row brand nav; marketing.js re-measures, so the condense
     behaviour follows automatically. */
  .mkt-nav { height: 62px; }
  .mkt-nav-top { padding: 0.75rem 0.5rem; }
  .mkt-brand { top: 16px; }
  .mkt-brand .wordmark { height: 26px; }
  .mkt-nav-brand-tagline { font-size: 0.58rem; margin-top: 0.5rem; }
  .mkt-brand-compact, .mkt-brand-mark { font-size: 0.95rem; gap: 6px; }
  .mkt-brand-compact .emblem, .mkt-brand-mark .emblem { width: 36px; }

  .section-kicker, .pill-label { font-size: 1.1rem; padding: 0.15rem 0.5rem; }
  .section-head h2 { margin-left: .25rem; }
  .pill { font-size: 0.9rem; padding: 0.45rem 0.8rem; }
  .integrations-inner { padding: 1.5rem 1rem; }
  .integrations-head { padding-right: 1rem; }
  .blog-featured, .blog-card-body { padding: 1.25rem; }
  .blog-featured h2 { font-size: 1.35rem; }
  .newsletter-form-wrap input[type="email"] { font-size: 16px; }  /* avoids iOS zoom-on-focus */
  .mkt-form input, .mkt-form textarea { font-size: 16px; }
  .blog-search input { font-size: 16px; }
}