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

:root {
  --sand: #FAF6F1;
  --sand-dark: #F0E8DD;
  --warm: #E8793A;
  --warm-light: #FAEDE3;
  --warm-deep: #C4612B;
  --ink: #2C2420;
  --ink-soft: #6B5D52;
  --ink-muted: #9B8E83;
  --cream: #FFFCF8;
  --sage: #7A9B82;
  --sage-light: #EAF2EC;
  --blue: #4A7FAD;
  --blue-light: #E3EEF8;
  --plum: #7C6BA5;
  --plum-light: #EDE8F5;
  --radius: 16px;
  --radius-sm: 10px;
  /* One measure for everything inside an article — the title, the prose, the
     tables and the figures all line up on it. Change this and all four move
     together; that is the point. Before 2026-07-25 they were three different
     widths (title at the container edge, prose at 680-720px, tables widened
     past both) and the mismatch read as a broken column. */
  --article-measure: 900px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  background: var(--sand);
  color: var(--ink);
  line-height: 1.7;
  font-weight: 400;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  /* Stops iOS Safari inflating body copy when a phone is turned landscape. */
  -webkit-text-size-adjust: 100%;
}

/* A long unbroken token (URL, product name) must wrap rather than widen the
   page — horizontal scroll is the single worst mobile failure mode here. */
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }

img, svg, video { max-width: 100%; }

h1, h2, h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; line-height: 1.2; }

a { color: var(--warm); }

/* Keyboard focus. Added 2026-07-25 — the sheet had no :focus rule at all, so
   keyboard users got the UA ring, which is a thin blue-on-cream line here and
   nearly invisible over the warm palette. :focus-visible rather than :focus so
   mouse clicks do not draw it. The offset keeps the ring clear of the ring on
   .nav-cta and the email button, both of which already carry a border. */
:focus-visible {
  outline: 2px solid var(--warm-deep);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Scroll containers are focusable for keyboard scrolling (see tabindex="0" in
   the table/diagram markup), and a ring hugging the border reads better than
   one floating outside it. */
.table-scroll:focus-visible,
.diagram-scroll:focus-visible {
  outline-offset: -2px;
}

/* 1120px / 32px is the measure the 2026-07-25 prototype is drawn on. Every
   section in it is a .container, so widening this widens the whole site at
   once — do not reintroduce a second width. */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- NAV ---- */
nav {
  padding: 28px 0;
  position: relative;
  z-index: 10;
}
nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-placeholder {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.logo-placeholder span { color: var(--warm); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}
.nav-links a:hover { color: var(--warm); }
.nav-links a[aria-current="page"] { color: var(--warm); }
.nav-links a.nav-cta[aria-current="page"] { color: var(--warm-deep); }

nav a.nav-cta {
  font-size: 15px;
  font-weight: 600;
  color: var(--warm-deep);
  text-decoration: none;
  padding: 10px 24px;
  border: 2px solid var(--warm);
  border-radius: 100px;
  transition: all 0.3s ease;
}
nav a.nav-cta:hover {
  background: var(--warm);
  color: #fff;
}

/* ---- PAGE HERO ---- */
.page-hero {
  padding: 48px 0 60px;
  position: relative;
  /* The ::before glow below sits at right:-120px, which on a phone widened the
     document to 510px and gave every inner page a horizontal scrollbar.
     `clip` (not `hidden`) contains it without making this a scroll container,
     and leaving overflow-y visible keeps the glow bleeding above the section. */
  overflow-x: clip;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -170px;
  right: -150px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(232,121,58,0.09) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero .section-label {
  margin-bottom: 20px;
}
.page-hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.14;
  color: var(--ink);
  max-width: var(--article-measure);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  animation: fadeUp 0.7s ease both;
}
.page-hero h1 em {
  font-style: italic;
  color: var(--warm);
}
.page-hero p {
  font-size: 18.5px;
  color: var(--ink-soft);
  max-width: var(--article-measure);
  line-height: 1.75;
  animation: fadeUp 0.7s 0.1s ease both;
}
/* Two-column hero: copy on the left, a live panel on the right. */
.page-hero--split .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.page-hero--split h1,
.page-hero--split p { max-width: none; }

/* ---- SECTION BASICS ---- */
.section-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warm);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--warm);
  border-radius: 2px;
}

section.content-section {
  padding: 80px 0;
}
section.content-section.alt {
  background: var(--cream);
  border-top: 1px solid rgba(107,93,82,0.06);
  border-bottom: 1px solid rgba(107,93,82,0.06);
}
section.content-section h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
  max-width: var(--article-measure);
}
section.content-section h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
section.content-section p {
  color: var(--ink-soft);
  line-height: 1.8;
  max-width: var(--article-measure);
  margin-bottom: 16px;
  font-size: 16.5px;
}
section.content-section p:last-child { margin-bottom: 0; }

/* ---- CARDS GRID ---- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
/* Three-up variant. A class, not an inline style, so the mobile rule below can
   still collapse it — an inline grid-template-columns outranks the media query
   and traps the cards in 3 columns on a phone. */
.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.card:hover::after { transform: scaleX(1); }
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(44,36,32,0.06);
}
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card-icon.orange { background: var(--warm-light); color: var(--warm); }
.card-icon.sage { background: var(--sage-light); color: var(--sage); }
.card-icon.plum { background: var(--plum-light); color: var(--plum); }
.card-icon.blue { background: var(--blue-light); color: var(--blue); }
.card h3 {
  font-size: 22px;
  margin-bottom: 10px;
}
.card p {
  color: var(--ink-soft);
  line-height: 1.75;
  font-size: 15.5px;
  max-width: none;
}

/* ---- SCENARIO BLOCKS ---- */
.scenario {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: var(--radius);
  padding: 32px 28px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.scenario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(44,36,32,0.05);
}
.scenario-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.scenario h3 {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
  font-style: italic;
}
.scenario p {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: none;
}
.scenario .result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(107,93,82,0.08);
  font-weight: 500;
  color: var(--sage);
}

/* ---- STEP LIST ---- */
.step-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
  margin-top: 40px;
}
.step {
  position: relative;
}
.step-number {
  font-family: 'DM Serif Display', serif;
  font-size: 52px;
  color: var(--sand-dark);
  line-height: 1;
  margin-bottom: 14px;
}
.step h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.step p {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: none;
}

/* ---- CTA BLOCK ---- */
/* The 27 pages the 2026-07-25 prototype does not cover still use this block.
   Matched to .cta-panel below — same glow, same card metrics — so the two
   never read as two different designs on the same site. */
.cta-block {
  padding: 76px 0 92px;
  text-align: center;
  overflow-x: clip;
  position: relative;
}
.cta-block::before {
  content: '';
  position: absolute;
  bottom: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 440px;
  background: radial-gradient(circle, rgba(232,121,58,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-block .container { position: relative; }
.cta-card {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 24px;
  padding: 52px 44px;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}
.cta-block h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.cta-block p {
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 32px;
  line-height: 1.75;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.email-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--warm);
  text-decoration: none;
  padding: 16px 40px;
  background: var(--warm-light);
  border-radius: 100px;
  transition: all 0.35s ease;
}
.email-link:hover {
  background: var(--warm);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(232,121,58,0.25);
}
.email-small {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-muted);
}

/* ---- TECH NOTE ---- */
.tech-note {
  background: var(--sand-dark);
  border-radius: var(--radius-sm);
  padding: 24px 28px;
  margin-top: 24px;
  max-width: var(--article-measure);
}
.tech-note p {
  font-size: 15px;
  color: var(--ink-muted);
  max-width: none;
  margin-bottom: 0;
}
.tech-note strong {
  color: var(--ink-soft);
}

/* ---- ABOUT SECTION ---- */
.about-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.about-highlight {
  text-align: center;
  padding: 32px 20px;
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: var(--radius);
}
.about-highlight .stat {
  font-family: 'DM Serif Display', serif;
  font-size: 40px;
  color: var(--warm);
  line-height: 1;
  margin-bottom: 8px;
}
.about-highlight h3 { font-size: 18px; margin-bottom: 6px; }
.about-highlight p { font-size: 15px; color: var(--ink-soft); max-width: none; }

/* ---- BLOG GRID ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.blog-post {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: all 0.3s ease;
}
.blog-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(44,36,32,0.06);
}
.blog-category {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warm);
  margin-bottom: 12px;
}
.blog-post h3 {
  font-size: 20px;
  margin-bottom: 10px;
  line-height: 1.35;
}
.blog-post p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: none;
}
.blog-post .read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--warm);
}

/* ---- ARTICLE ---- */
.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 40px;
  font-size: 15px;
  color: var(--ink-muted);
}
.article-meta .author {
  font-weight: 600;
  color: var(--ink-soft);
}
.article-meta .separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-muted);
}
.article-body {
  max-width: var(--article-measure);
}
.container:has(> .article-body) > h1 { max-width: var(--article-measure); }
.article-body h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-top: 48px;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
/* `section.content-section p { max-width: 640px }` also matches paragraphs
   inside .article-body, so without this the prose sat 260px narrower than the
   title and the tables it is meant to line up with. */
section.content-section .article-body p,
section.content-section .article-body ul,
section.content-section .article-body ol,
section.content-section .article-body blockquote { max-width: none; }
.article-body p {
  color: var(--ink-soft);
  line-height: 1.85;
  font-size: 17px;
  margin-bottom: 20px;
}
.article-body p:last-child { margin-bottom: 0; }
.article-body ul, .article-body ol {
  color: var(--ink-soft);
  line-height: 1.85;
  font-size: 17px;
  margin-bottom: 20px;
  padding-left: 24px;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body strong {
  color: var(--ink);
  font-weight: 600;
}
.article-body blockquote {
  border-left: 3px solid var(--warm);
  padding: 16px 24px;
  margin: 28px 0;
  background: var(--warm-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article-body blockquote p {
  color: var(--ink);
  font-style: italic;
  margin-bottom: 0;
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--warm);
  text-decoration: none;
  margin-bottom: 32px;
}
.article-back:hover { text-decoration: underline; }

/* ---- RELATED SERVICES ---- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.related-link {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.08);
  border-radius: var(--radius-sm);
  padding: 24px 20px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: all 0.3s ease;
}
.related-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(44,36,32,0.05);
}
.related-link h3 {
  font-size: 17px;
  margin-bottom: 6px;
}
.related-link p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: none;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* ---- FOOTER ---- */
footer {
  padding: 48px 0;
  border-top: 1px solid rgba(107,93,82,0.1);
}
footer .container {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 40px;
}
.footer-left p {
  font-size: 14px;
  color: var(--ink-muted);
  max-width: none;
}
.footer-links {
  display: flex;
  gap: 32px;
}
.footer-col h3 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.footer-col a {
  display: block;
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--warm); }

/* ---- ANIMATIONS ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-reveal .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .container { padding: 0 20px; }

  /* -- Nav: always visible. No drop-down, nothing hidden behind a tap.
     `display: contents` lifts the links out of their wrapper so the logo and
     the CTA can share the top row and the destinations sit on their own row
     beneath, all reachable without opening anything. -- */
  nav { padding: 18px 0; }
  nav .container { flex-wrap: wrap; justify-content: flex-start; row-gap: 10px; column-gap: 16px; }
  .nav-links { display: contents; }
  .logo-placeholder { order: 1; }
  nav a.nav-cta {
    order: 2;
    margin-left: auto;
    padding: 9px 18px;
    font-size: 15px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* Forces a line break after the CTA so the destinations always start their
     own row instead of creeping up alongside it. */
  nav .container::after {
    content: '';
    order: 2;
    flex: 0 0 100%;
    height: 0;
  }
  .nav-links a:not(.nav-cta) {
    order: 3;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    color: var(--ink);
  }
  .nav-links a[aria-current="page"] { color: var(--warm); }

  .page-hero { padding: 48px 0; }
  .page-hero p { font-size: 17.5px; }
  section.content-section { padding: 56px 0; }
  .cards-grid,
  .cards-grid--3 { grid-template-columns: 1fr; }
  .about-highlights { grid-template-columns: 1fr; }
  .cta-block { padding: 56px 0 68px; }
  .cta-card { padding: 36px 24px; }
  .cta-block p { font-size: 17px; }

  /* Comfortable thumb targets: these links were 26px tall on a phone. */
  .logo-placeholder { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col a { padding: 9px 0; margin-bottom: 0; }
  .article-back { padding: 10px 0; }
  .email-link { padding: 16px 32px; }

  /* 12px uppercase labels are hard to read at arm's length. */
  .footer-col h3 { font-size: 14px; }
  .scenario-label, .blog-category { font-size: 14px; }

  /* Two compact columns beat one long stack of link groups. */
  footer { padding: 40px 0; }
  footer .container { flex-direction: column; gap: 32px; }
  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
  }
}

@media (max-width: 420px) {
  .page-hero h1 { font-size: 32px; }
  .email-link { padding: 15px 22px; font-size: 16.5px; }
  .step-list { gap: 28px; }
}

/* ---- TABLES ----
   Added 2026-07-24. The site had no table styling until the AEO content landed,
   so the first comparison tables shipped with inline styles on seven pages.
   Comparison tables are an AEO requirement in blog-guide.md, so they need real
   rules. Always wrap a wide table in .table-scroll: the container scrolls, the
   page does not, which is the horizontal-scroll rule in CLAUDE.md. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 28px 0;
  max-width: var(--article-measure);
  border: 1px solid rgba(107,93,82,0.16);
  border-radius: var(--radius-sm);
}
.table-scroll > table { margin: 0; border: 0; }

/* ---- SCROLLBAR STYLING ON HORIZONTAL SCROLLERS ----
   Added 2026-07-25, as a secondary cue only. macOS draws overlay scrollbars:
   invisible until you are already scrolling, so a clipped table just looks
   broken. Styling ::-webkit-scrollbar is the usual way to opt a container out
   of overlay behaviour, but headless Chrome still reserved no layout height for
   the bar, so it could not be confirmed here — treat it as a nice-to-have on
   the platforms where it does apply. The affordance the fix actually leans on
   is the edge fade below, which is verified.
   Scoped to these containers on purpose — do not make it a global rule. */
.table-scroll,
.diagram-scroll {
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: rgba(107,93,82,0.38) transparent;
}
.table-scroll::-webkit-scrollbar,
.diagram-scroll::-webkit-scrollbar {
  height: 10px;
}
.table-scroll::-webkit-scrollbar-track,
.diagram-scroll::-webkit-scrollbar-track {
  background: rgba(107,93,82,0.07);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.table-scroll::-webkit-scrollbar-thumb,
.diagram-scroll::-webkit-scrollbar-thumb {
  background: rgba(107,93,82,0.34);
  border-radius: 5px;
}
.table-scroll::-webkit-scrollbar-thumb:hover,
.diagram-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(107,93,82,0.5);
}

/* Edge fade on the side that still has content. `.is-scrollable`, `.at-start`
   and `.at-end` are set by _includes/scroll-hint.html — CSS cannot detect
   overflow on its own. A mask rather than a gradient overlay because the table
   paints opaque cell backgrounds over anything behind it, and a mask applies to
   the container box rather than to the scrolled content, so it stays pinned to
   the edge while the table moves under it. Without JS no class is set, no mask
   applies, and the container is exactly what it is today. */
.table-scroll.is-scrollable,
.diagram-scroll.is-scrollable {
  --edge-fade: 44px;
}
/* At the start: more to the right only. */
.is-scrollable.at-start:not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--edge-fade)), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--edge-fade)), transparent);
}
/* Mid-scroll: more in both directions. */
.is-scrollable:not(.at-start):not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent);
}
/* At the end: more to the left only. */
.is-scrollable.at-end:not(.at-start) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade));
          mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade));
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.6;
  margin: 28px 0;
  background: var(--cream);
}
table th,
table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(107,93,82,0.14);
}
/* No `white-space: nowrap` here. It was set until 2026-07-25 and it also hit
   th[scope="row"], whose row labels are full sentences ("Fixed automation (a
   Zap, a Make scenario, a cron job)"). That pinned the first column to its
   sentence width, pushed the table past the 678px article measure, and
   .table-scroll clipped the rest — a whole column was invisible at 1440px on
   five pages, and macOS overlay scrollbars gave no hint it was there. Wrapping
   headers fits every table on the site from 768px up. */
table th {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-weight: 600;
  color: var(--ink);
  background: var(--sand-dark);
}
table td { color: var(--ink-soft); }
table tbody tr:last-child th,
table tbody tr:last-child td { border-bottom: 0; }
table tbody tr:nth-child(even) td { background: rgba(240,232,221,0.35); }
/* First column reads as a row label in comparison tables. */
table tbody th[scope="row"] { color: var(--ink); font-weight: 600; background: transparent; }

/* ---- LISTS OUTSIDE ARTICLE BODIES ----
   The global reset zeroes padding, and only .article-body styled its lists, so a
   bare <ul> on a service page rendered with clipped markers. */
.content-section ul,
.content-section ol {
  margin: 0 0 20px 0;
  padding-left: 22px;
  max-width: var(--article-measure);
  color: var(--ink-soft);
}
.content-section li { margin-bottom: 10px; }
.content-section li::marker { color: var(--warm); }

@media (max-width: 768px) {
  table { font-size: 15px; }
  table th, table td { padding: 10px 12px; }
}

/* No width override on .table-scroll. Until 2026-07-25 it grew to
   min(1040px, 100vw - 240px) above 1200px, because the prose measure was 680px
   and a five-column table did not fit. The measure is now --article-measure and
   the table shares it, so the scroller is exactly as wide as the paragraphs and
   the title above it. A table wider than that scrolls inside its own box. */

/* ---------- Diagrams (inline SVG figures) ----------
   Inline rather than <img> so the labels are real text in the HTML: crawlable,
   selectable, and readable by answer engines. The SVG inherits the page font
   because no font-family is set on it. Do not add one. */
.diagram {
  margin: 36px 0 8px;
  max-width: var(--article-measure);
}
.diagram-scroll {
  overflow-x: auto;
  background: var(--cream);
  border: 1px solid var(--sand-dark);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.diagram-scroll svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 620px;
}
.diagram figcaption {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
@media (max-width: 640px) {
  .diagram-scroll { padding: 16px 14px; }
  .diagram figcaption { font-size: 14px; }
}

/* ============================================================================
   PROTOTYPE COMPONENTS (2026-07-25)

   The design refresh replaced the hand-rolled per-page markup with one set of
   components: a panel, a pill, a band card, a tab strip, an accordion. The
   prototype expressed all of it as inline styles and shipped with no media
   queries at all — copying that verbatim would have given every page a
   horizontal scrollbar on a phone, which is the failure CLAUDE.md exists to
   prevent. So the values are the prototype's, the structure is classes, and
   the collapse rules live in the RESPONSIVE block at the end of this file.

   Interactive components (tabs, accordions, filters, the pricer, the runner)
   are progressive enhancement: every panel is in the DOM and visible without
   JavaScript. The `.js-reveal` class on <html> — set in _includes/reveal-init
   before first paint — is what switches them into one-at-a-time mode, so there
   is no flash of everything-at-once and no content is hidden from a crawler.
   ========================================================================== */

/* ---- SECTIONS ---- */
.section { padding: 76px 0; }
.section--tight { padding: 0 0 76px; }
.section--alt {
  background: var(--cream);
  border-top: 1px solid rgba(107,93,82,0.08);
  border-bottom: 1px solid rgba(107,93,82,0.08);
}
.section h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.section-intro {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 640px;
  line-height: 1.75;
  margin-bottom: 32px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.section-head h2 { margin-bottom: 0; }
.section-label--center { justify-content: center; }
.link-arrow {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--warm-deep);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(196,97,43,0.3);
  white-space: nowrap;
}
.link-arrow:hover { border-bottom-color: var(--warm-deep); }
.footnote {
  font-size: 14.5px;
  color: var(--ink-muted);
  line-height: 1.65;
  margin-top: 18px;
}

/* ---- PANEL: the cream card everything sits in ---- */
.panel {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 20px;
  padding: 26px;
}
.panel--raised { box-shadow: 0 18px 50px rgba(44,36,32,0.07); }
.panel--flush { padding: 0; overflow: hidden; }
.panel-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.eyebrow-sm {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.eyebrow-sm--warm { color: var(--warm); }
.eyebrow-sm--sage { color: var(--sage); }

/* ---- BUTTONS ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--warm);
  text-decoration: none;
  padding: 16px 32px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(232,121,58,0.25);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: var(--warm-deep);
  color: #fff;
  transform: translateY(-2px);
}
.btn-quiet {
  font-size: 16px;
  font-weight: 600;
  color: var(--warm-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(196,97,43,0.35);
  padding-bottom: 2px;
}
.btn-quiet:hover { border-bottom-color: var(--warm-deep); }
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ---- PILLS (filter / tab strips) ---- */
.pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pill {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s ease;
  background: var(--cream);
  color: var(--ink-soft);
  border: 1px solid rgba(107,93,82,0.2);
}
.section--alt .pill { background: var(--sand); }
.pill:hover { border-color: rgba(232,121,58,0.45); color: var(--warm-deep); }
.pill.is-active,
.pill[aria-selected="true"] {
  background: var(--warm);
  color: #fff;
  border-color: var(--warm);
}
.pill--lg { font-size: 15px; padding: 11px 22px; }
.pill--sm { font-size: 13px; padding: 7px 14px; }

/* Small inert tags: system names, layer chips. */
.tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.16);
  border-radius: 8px;
  padding: 6px 12px;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag--warm { color: var(--warm-deep); background: var(--warm-light); border: 0; border-radius: 7px; font-size: 12.5px; padding: 5px 10px; }
.tag--sage { color: #5C7D64; background: var(--sage-light); border: 0; border-radius: 7px; font-size: 12.5px; padding: 5px 10px; }
.badge {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warm-deep);
  background: var(--warm-light);
  border-radius: 100px;
  padding: 5px 12px;
}

/* ---- NOTE BOXES: "the agent does" / "where it stops" ---- */
.note-box {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.16);
  border-radius: 12px;
  padding: 16px 18px;
}
.note-box--sage { border-color: rgba(122,155,130,0.4); }
.note-box--warm { border-color: rgba(232,121,58,0.35); }
.note-box p,
.note-box div:not(.eyebrow-sm) {
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.6;
  max-width: none;
  margin: 0;
}
.note-stack { display: flex; flex-direction: column; gap: 12px; }

/* ---- TRUST BAR ---- */
.trust-bar {
  padding: 26px 0;
  border-top: 1px solid rgba(107,93,82,0.1);
  border-bottom: 1px solid rgba(107,93,82,0.1);
  background: var(--cream);
}
.trust-bar .container {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
}
.trust-item svg { flex-shrink: 0; stroke: var(--sage); }

/* ---- FEATURE CARDS (home "what we build") ---- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.1);
  border-radius: var(--radius);
  padding: 32px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: all 0.3s ease;
}
.feature-card:hover {
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(44,36,32,0.07);
  border-color: rgba(232,121,58,0.35);
}
.feature-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--warm-light);
  color: var(--warm);
}
.feature-icon.sage { background: var(--sage-light); color: var(--sage); }
.feature-icon.plum { background: var(--plum-light); color: var(--plum); }
.feature-card h3 { font-size: 23px; line-height: 1.25; margin-bottom: 10px; }
.feature-card p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; max-width: none; }

/* ---- THE AGENT RUNNER (home hero) ---- */
.runner {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.14);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(44,36,32,0.07);
  overflow: hidden;
}
.runner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(107,93,82,0.1);
  background: var(--sand);
}
.runner-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.runner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
  animation: teloraPulse 1.8s ease-in-out infinite;
}
@keyframes teloraPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}
.runner-replay {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--warm-deep);
  background: var(--warm-light);
  border: none;
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.runner-replay:hover { background: var(--warm); color: #fff; }
.runner-body {
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 352px;
}
.runstep {
  display: grid;
  grid-template-columns: 52px 22px 1fr;
  gap: 12px;
  align-items: start;
}
.js-reveal .runstep {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.js-reveal .runstep.is-on { opacity: 1; transform: translateY(0); }
.runstep-time { font-size: 12.5px; color: #B4A79B; font-variant-numeric: tabular-nums; padding-top: 9px; }
.runstep-rail { display: flex; flex-direction: column; align-items: center; padding-top: 9px; }
.runstep-bullet {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--warm);
  box-shadow: 0 0 0 4px rgba(232,121,58,0.14);
}
.runstep--ok .runstep-bullet { background: var(--sage); box-shadow: 0 0 0 4px rgba(122,155,130,0.16); }
.runstep-line { width: 1px; flex: 1; min-height: 34px; background: rgba(107,93,82,0.18); }
.runstep-main { padding-bottom: 14px; }
.runstep-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 3px;
  color: var(--ink-muted);
}
.runstep--ok .runstep-tag { color: var(--sage); }
.runstep--warn .runstep-tag { color: var(--warm); }
.runstep-text { font-size: 15.5px; color: var(--ink); line-height: 1.5; }
.runner-foot {
  padding: 14px 20px;
  border-top: 1px solid rgba(107,93,82,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.runner-foot-label { font-size: 12px; color: var(--ink-muted); margin-right: 4px; }
@media (prefers-reduced-motion: reduce) {
  .runner-dot { animation: none; opacity: 1; }
  .js-reveal .runstep { opacity: 1; transform: none; transition: none; }
}

/* ---- TAB PANELS (generic) ---- */
.js-reveal [data-panel]:not(.is-active) { display: none; }
[data-panel] + [data-panel] { margin-top: 16px; }
.js-reveal [data-panel] + [data-panel] { margin-top: 0; }

/* ---- INDUSTRY SPLIT PANEL ---- */
.split-panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  background: var(--sand);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 18px;
  padding: 34px;
}
.section--alt .split-panel { background: var(--sand); }
.split-panel h3 {
  font-size: 26px;
  line-height: 1.25;
  margin-bottom: 12px;
}
.split-panel p {
  font-size: 16.5px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 20px;
  max-width: none;
}

/* ---- THE PRICER (home) ---- */
.pricer {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
  align-items: start;
}
.pricer-controls {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.pricer-group-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.opt-list { display: flex; flex-direction: column; gap: 6px; }
.opt {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--sand);
  color: var(--ink-soft);
  border: 1px solid rgba(107,93,82,0.14);
}
.opt:hover { border-color: rgba(232,121,58,0.4); }
.opt.is-active,
.opt[aria-pressed="true"] {
  background: var(--warm-light);
  color: var(--ink);
  border-color: var(--warm);
}
.band-list { display: flex; flex-direction: column; gap: 14px; }
.band {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: var(--radius);
  padding: 24px 26px;
  transition: all 0.3s ease;
}
.band.is-active {
  border-color: var(--warm);
  box-shadow: 0 12px 34px rgba(232,121,58,0.12);
}
.band-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 8px;
}
.band-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 24px;
}
.band-flag {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--warm);
  border-radius: 100px;
  padding: 4px 10px;
}
.band:not(.is-active) .band-flag { display: none; }
.band-price {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.band-scope {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 14px;
}
.band-scope span { color: var(--ink-muted); }
.band-bar {
  height: 6px;
  border-radius: 100px;
  background: rgba(107,93,82,0.1);
  overflow: hidden;
}
.band-bar > span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: rgba(107,93,82,0.22);
  transition: background 0.4s ease;
}
.band.is-active .band-bar > span { background: var(--warm); }
.band--sage { border-color: rgba(122,155,130,0.5); }
.band--blue { border-color: rgba(74,127,173,0.45); }
.band--warm { border-color: rgba(232,121,58,0.5); }

/* ---- HORIZONTAL PROCESS TIMELINE (home) ---- */
.timeline { position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(107,93,82,0.16);
}
.timeline-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sand-dark);
  margin: 20px 0 18px;
}
.timeline-item:first-child .timeline-dot { background: var(--warm); }
.timeline-num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 40px;
  color: var(--sand-dark);
  line-height: 1;
  margin-bottom: 8px;
}
.timeline-item h3 { font-size: 20px; margin-bottom: 8px; }
.timeline-item p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; max-width: none; }

/* ---- FAQ ---- */
.faq-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid rgba(107,93,82,0.14); }
.faq-list > .faq-item:last-of-type { border-bottom: 1px solid rgba(107,93,82,0.14); }
.faq-q {
  font-family: 'DM Serif Display', Georgia, serif;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 0;
  font-size: 21px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.faq-q .faq-icon {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--warm);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a p {
  font-size: 16.5px;
  color: var(--ink-soft);
  line-height: 1.75;
  padding-bottom: 22px;
  max-width: 660px;
  margin: 0;
}
.js-reveal .faq-a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}
.js-reveal .faq-a.is-open { max-height: 420px; opacity: 1; }

/* ---- CONTACT PANEL (home) ---- */
.contact-panel {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 24px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.contact-panel h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 14px; }
.contact-panel > div > p {
  font-size: 17.5px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: none;
}
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--ink-soft);
  list-style: none;
  margin: 0;
}
.check-list svg { margin-top: 4px; flex-shrink: 0; stroke: var(--sage); }
.contact-aside { display: flex; flex-direction: column; gap: 14px; }
.contact-aside .email-link { align-self: flex-start; }
.contact-note { font-size: 14px; color: var(--ink-muted); line-height: 1.6; }

/* ---- CENTRED CTA PANEL ---- */
.cta-panel {
  padding: 76px 0 92px;
  position: relative;
  overflow-x: clip;
  text-align: center;
}
.cta-panel::before {
  content: '';
  position: absolute;
  bottom: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 440px;
  background: radial-gradient(circle, rgba(232,121,58,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-panel .container { position: relative; }
.cta-panel-card {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 24px;
  padding: 52px 44px;
  max-width: 700px;
  margin: 0 auto;
}
.cta-panel-card h2 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 14px; }
.cta-panel-card > p {
  font-size: 17.5px;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 540px;
  margin: 0 auto 28px;
}
.cta-panel-card .footnote { margin-top: 20px; font-size: 15px; }

/* ---- SERVICES: layer picker + card grid ---- */
.layer-card {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  text-align: left;
  width: 100%;
  display: block;
  cursor: pointer;
  border-radius: 14px;
  padding: 18px 20px;
  transition: all 0.3s ease;
  background: var(--sand);
  border: 1px solid rgba(107,93,82,0.14);
}
.layer-card.is-active {
  border-color: var(--warm);
  box-shadow: 0 8px 24px rgba(232,121,58,0.12);
}
.layer-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.layer-card-name { font-family: 'DM Serif Display', Georgia, serif; font-size: 21px; color: var(--ink); }
.layer-card-note { font-size: 13px; color: var(--ink-muted); }
.layer-card .tag-row { margin-top: 12px; gap: 6px; }
.layer-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--ink-muted);
}
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mini-card {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.1);
  border-radius: var(--radius);
  padding: 26px 24px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.3s ease;
}
.section--alt .mini-card { background: var(--sand); border-color: rgba(107,93,82,0.12); }
.mini-card:hover {
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(44,36,32,0.07);
  border-color: rgba(232,121,58,0.35);
}
.mini-card h3 { font-size: 21px; line-height: 1.25; }
.mini-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; max-width: none; margin: 0; }
.mini-card-layer {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warm-deep);
}
.mini-card-layer.sage { color: #5C7D64; }
.mini-card-more { margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--warm-deep); }
.js-reveal .mini-card.is-hidden { display: none; }

/* Two-column prose split used by "where we work" / "not listed" blocks. */
.prose-split {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}
.prose-split p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 16px;
  max-width: none;
}
.prose-split p:last-child { margin-bottom: 0; }
.prose-split h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 14px; }

/* ---- USE CASES ---- */
.case-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 24px;
  align-items: start;
}
.case-tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 24px;
}
.case-tab {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  padding: 16px 18px;
  transition: all 0.28s ease;
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
}
.case-tab.is-active,
.case-tab[aria-selected="true"] {
  border-color: var(--warm);
  box-shadow: 0 8px 24px rgba(232,121,58,0.1);
}
.case-tab-area {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--ink-muted);
}
.case-tab.is-active .case-tab-area,
.case-tab[aria-selected="true"] .case-tab-area { color: var(--warm); }
.case-tab-title { display: block; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.case-panel {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 18px 50px rgba(44,36,32,0.06);
}
.case-panel h2 {
  font-size: clamp(23px, 2.4vw, 29px);
  line-height: 1.3;
  margin-bottom: 24px;
  max-width: 720px;
}
.case-panel > p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 24px;
  max-width: 760px;
}
.kv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}
.kv {
  background: var(--sand);
  border: 1px solid rgba(107,93,82,0.14);
  border-radius: 12px;
  padding: 14px 16px;
}
.kv-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 5px;
}
.kv-v { font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.result-box {
  background: var(--sand);
  border: 1px solid rgba(122,155,130,0.4);
  border-radius: 14px;
  padding: 20px 22px;
}
.result-box p { font-size: 16px; color: var(--ink); line-height: 1.7; margin: 0; max-width: none; }

/* ---- NUMBERED CARD GRID ---- */
.numbered-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.numbered-card {
  background: var(--sand);
  border: 1px solid rgba(107,93,82,0.1);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.section:not(.section--alt) .numbered-card { background: var(--cream); }
.numbered-badge {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--warm-light);
  color: var(--warm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 18px;
}
.numbered-badge.sage { background: var(--sage-light); color: var(--sage); }
.numbered-card h3 { font-size: 20px; line-height: 1.3; margin-bottom: 10px; }
.numbered-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; max-width: none; margin: 0; }

/* ---- HOW WE WORK: the stepper ---- */
.stepper-shell {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 20px;
  padding: 34px 36px 36px;
  box-shadow: 0 18px 50px rgba(44,36,32,0.06);
}
.stepper { position: relative; margin-bottom: 30px; }
.stepper-track,
.stepper-fill {
  position: absolute;
  top: 13px;
  left: 0;
  height: 2px;
  border-radius: 2px;
}
.stepper-track { right: 0; background: rgba(107,93,82,0.12); }
.stepper-fill { width: 0; background: var(--warm); transition: width 0.35s ease; }
.stepper-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.stepper-btn {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stepper-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.3s ease;
  background: var(--sand);
  color: var(--ink-muted);
  border: 1px solid rgba(107,93,82,0.2);
}
.stepper-btn.is-done .stepper-dot,
.stepper-btn.is-active .stepper-dot {
  background: var(--warm);
  color: #fff;
  border-color: var(--warm);
}
.stepper-name {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-muted);
  transition: color 0.3s ease;
}
.stepper-btn.is-active .stepper-name { color: var(--ink); }
.step-detail {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px;
  align-items: start;
  background: var(--sand);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: var(--radius);
  padding: 30px 32px;
}
.step-detail-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}
.step-detail-n { font-family: 'DM Serif Display', Georgia, serif; font-size: 38px; color: #E8C7AC; line-height: 1; }
.step-detail h3 { font-size: 30px; line-height: 1.2; }
.step-detail p { font-size: 17px; color: var(--ink-soft); line-height: 1.8; max-width: none; margin: 0; }

/* ---- INDUSTRIES: accordion ---- */
.acc { display: flex; flex-direction: column; gap: 12px; }
.acc-row {
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: var(--sand);
  border: 1px solid rgba(107,93,82,0.12);
}
.acc-row.is-open {
  border-color: var(--warm);
  box-shadow: 0 12px 34px rgba(232,121,58,0.1);
}
.acc-btn {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}
.acc-btn-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.acc-name { font-family: 'DM Serif Display', Georgia, serif; font-size: 26px; color: var(--ink); }
.acc-kind {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 5px 12px;
  background: var(--cream);
  color: var(--ink-muted);
}
.acc-row.is-open .acc-kind { background: var(--warm-light); color: var(--warm-deep); }
.acc-icon { font-size: 24px; color: var(--warm); transition: transform 0.3s ease; flex-shrink: 0; }
.acc-btn[aria-expanded="true"] .acc-icon { transform: rotate(45deg); }
.acc-body-inner {
  padding: 0 28px 28px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: start;
}
.acc-body-inner p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 18px; max-width: none; }
.js-reveal .acc-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.js-reveal .acc-body.is-open { max-height: 640px; opacity: 1; }

/* Numbered method list (industries hero panel). */
.method-list { display: flex; flex-direction: column; gap: 12px; }
.method-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--sand);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 13px;
  padding: 16px 18px;
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.55;
}
.method-item b { font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; color: var(--warm); line-height: 1; font-weight: 400; }

/* ---- ABOUT ---- */
.stat-card {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 18px;
  padding: 32px 28px;
  transition: all 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(44,36,32,0.07);
  border-color: rgba(232,121,58,0.35);
}
.stat-card-value { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px; color: var(--warm); line-height: 1; margin-bottom: 12px; }
.stat-card h3 { font-size: 21px; margin-bottom: 10px; }
.stat-card p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; max-width: none; margin: 0; }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.logo-cell {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.14);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.dot-list { display: flex; flex-direction: column; gap: 12px; }
.dot-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
  list-style: none;
  margin: 0;
}
.dot-list li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warm);
  margin-top: 9px;
  flex-shrink: 0;
}
.dot-list--sage li::before { background: var(--sage); }
.criteria-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.criteria-box {
  background: var(--sand);
  border: 1px solid rgba(232,121,58,0.35);
  border-radius: 18px;
  padding: 28px 30px;
}
.criteria-box--sage { border-color: rgba(122,155,130,0.45); }
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(107,93,82,0.12);
  border-radius: var(--radius);
  overflow: hidden;
}
.strip-cell { background: var(--cream); padding: 26px 24px; }
.strip-cell h3 { font-size: 20px; margin-bottom: 8px; }
.strip-cell p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; max-width: none; margin: 0; }

/* ---- BLOG HUB ---- */
.featured-post {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
  align-items: stretch;
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 22px;
  padding: 22px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(44,36,32,0.06);
  transition: all 0.3s ease;
}
.featured-post:hover { color: var(--ink); border-color: rgba(232,121,58,0.4); transform: translateY(-3px); }
/* The prototype's featured slot expects photography. Until there is any, this
   carries the article's 1200x630 social card, so the aspect ratio has to match
   it exactly — `object-fit: cover` on a taller box crops the card's own title
   off and reads as a broken image. */
.featured-post img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  align-self: center;
}
.featured-post-body { padding: 22px 18px 18px 6px; display: flex; flex-direction: column; }
.featured-post-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.featured-post-meta time { font-size: 14px; color: var(--ink-muted); }
.featured-post h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.2; margin-bottom: 14px; }
.featured-post p { font-size: 17px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 20px; max-width: none; }
.featured-post-more { margin-top: auto; font-size: 16px; font-weight: 600; color: var(--warm-deep); }
.post-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.post-card-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.post-card-rule { width: 26px; height: 2px; border-radius: 2px; background: #C4A78F; }
.post-card-rule--agents { background: var(--warm); }
.post-card-rule--automation { background: var(--plum); }
.post-card-rule--integration { background: var(--sage); }

/* ---- ARTICLE (redesigned post) ---- */
.post-header { padding: 32px 0 8px; }
.post-back { font-size: 15px; font-weight: 600; color: var(--ink-muted); text-decoration: none; }
.post-back:hover { color: var(--warm); }
.post-meta { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; flex-wrap: wrap; }
.post-meta span:not(.badge):not(.post-meta-sep),
.post-meta time { font-size: 14.5px; color: var(--ink-muted); }
.post-meta-sep { width: 4px; height: 4px; border-radius: 50%; background: #D8CDC1; }
.post-header h1 {
  font-size: clamp(34px, 4.8vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  max-width: var(--article-measure);
}
.post-header h1 em { font-style: italic; color: var(--warm); }
.post-standfirst {
  font-size: 20px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: var(--article-measure);
  margin-bottom: 32px;
}
.post-hero-img {
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 21;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(107,93,82,0.12);
  display: block;
}
.post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  max-width: var(--article-measure);
}
.toc a {
  font-size: 14.5px;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.45;
  border-bottom: 2px solid rgba(107,93,82,0.16);
  padding: 4px 0;
}
.toc a:hover { color: var(--warm); border-bottom-color: var(--warm); }
.post-body { max-width: var(--article-measure); }
.post-body h2 {
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.2;
  margin: 0 0 16px;
  scroll-margin-top: 24px;
}
.post-body > p {
  font-size: 17.5px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 22px;
  max-width: none;
}
.post-body > p:last-child { margin-bottom: 0; }
.callout {
  background: var(--cream);
  border: 1px solid var(--warm);
  border-radius: 18px;
  padding: 26px 28px;
  margin-bottom: 34px;
}
.callout p { font-size: 18px; color: var(--ink); line-height: 1.7; margin: 0; max-width: none; }
.driver-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.driver {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 14px;
  padding: 20px 22px;
}
.driver-n { font-family: 'DM Serif Display', Georgia, serif; font-size: 26px; color: var(--warm); line-height: 1; }
.driver p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.7; margin: 0; max-width: none; }
.driver strong { color: var(--ink); }
.exclusion-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; }
.exclusion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 16.5px;
  color: var(--ink);
  line-height: 1.65;
  list-style: none;
  margin: 0;
}
.exclusion::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warm);
  margin-top: 10px;
  flex-shrink: 0;
}
.takeaways {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.14);
  border-left: 4px solid var(--warm);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-bottom: 34px;
  scroll-margin-top: 24px;
}
.takeaways .check-list li { font-size: 16.5px; color: var(--ink); line-height: 1.6; }
.takeaways .check-list svg { margin-top: 5px; }
.inline-cta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--warm-light);
  border-radius: var(--radius);
  padding: 22px 26px;
}
.inline-cta-copy { flex: 1 1 260px; }
.inline-cta-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; line-height: 1.3; margin-bottom: 4px; }
.inline-cta p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; max-width: none; }
.inline-cta a {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--warm);
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 100px;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.inline-cta a:hover { background: var(--warm-deep); color: #fff; transform: translateY(-2px); }

/* ---- THE RUNNING-COST CALCULATOR ---- */
.calc {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.14);
  border-radius: 18px;
  padding: 26px 28px;
  margin-bottom: 16px;
}
.calc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.calc-head-note { font-size: 13px; color: var(--ink-muted); }
.calc-body {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 28px;
  align-items: start;
}
.calc-controls { display: flex; flex-direction: column; gap: 20px; }
.calc-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.calc-label output { font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.calc input[type="range"] { width: 100%; accent-color: var(--warm); cursor: pointer; }
.calc-out {
  background: var(--sand);
  border: 1px solid rgba(232,121,58,0.35);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.calc-aed { font-family: 'DM Serif Display', Georgia, serif; font-size: 38px; color: var(--warm-deep); line-height: 1.1; }
.calc-usd { font-size: 14.5px; color: var(--ink-soft); margin-top: 4px; }
.calc-rule { height: 1px; background: rgba(107,93,82,0.14); margin: 14px 0; }
.calc-rate { font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; }
.calc p { font-size: 14px; color: var(--ink-muted); line-height: 1.6; margin: 18px 0 0; max-width: none; }

/* ---- FIGURE / SVG DIAGRAM inside a post ---- */
.figure-panel {
  background: var(--cream);
  border: 1px solid rgba(107,93,82,0.12);
  border-radius: var(--radius);
  padding: 20px;
  overflow-x: auto;
}
.figure-panel svg { min-width: 620px; width: 100%; height: auto; display: block; }
figure.post-figure { margin: 0 0 26px; }
figure.post-figure figcaption { font-size: 14.5px; color: var(--ink-muted); line-height: 1.6; margin-top: 10px; }

/* ============================================================================
   RESPONSIVE — prototype components
   The prototype ships no media queries. Every multi-column grid above has to
   collapse here or a 390px phone gets a horizontal scrollbar, which is the one
   mobile failure this repo treats as a bug rather than a nitpick. Verify at
   360/375/390px after touching any of it.
   ========================================================================== */
@media (max-width: 1000px) {
  .page-hero--split .container { grid-template-columns: 1fr; gap: 36px; }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .numbered-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
  .timeline::before { display: none; }
  .pricer { grid-template-columns: 1fr; }
  .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .prose-split { grid-template-columns: 1fr; gap: 20px; }
  .case-layout { grid-template-columns: 1fr; }
  .case-tabs { position: static; }
  .featured-post { grid-template-columns: 1fr; }
  .featured-post-body { padding: 4px 4px 8px; }
  .contact-panel { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; }
  .split-panel { grid-template-columns: 1fr; }
  .acc-body-inner { grid-template-columns: 1fr; }
  .js-reveal .acc-body.is-open { max-height: 1000px; }
  .step-detail { grid-template-columns: 1fr; gap: 22px; }
  .calc-body { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .section--tight { padding: 0 0 56px; }
  .page-hero { padding: 36px 0 44px; }
  .panel { padding: 22px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 26px 22px; }
  .card-grid-3 { grid-template-columns: 1fr; }
  .numbered-grid { grid-template-columns: 1fr; }
  .kv-grid { grid-template-columns: 1fr; }
  .criteria-grid { grid-template-columns: 1fr; }
  .strip-grid { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-grid { grid-template-columns: 1fr; }
  .case-panel { padding: 26px 22px; }
  .stepper-shell { padding: 24px 20px 26px; }
  .step-detail { padding: 22px 20px; }
  /* Five steps will not fit a phone row; the rail becomes a horizontal
     scroller with the same tabindex/edge-fade treatment as the tables. */
  .stepper { overflow-x: auto; padding-bottom: 6px; }
  .stepper-row { grid-template-columns: repeat(5, minmax(120px, 1fr)); min-width: 600px; }
  .stepper-track, .stepper-fill { min-width: 600px; }
  .acc-btn { padding: 20px 20px; gap: 14px; }
  .acc-btn-left { gap: 10px; }
  .acc-name { font-size: 22px; }
  .acc-body-inner { padding: 0 20px 22px; }
  .cta-panel { padding: 56px 0 68px; }
  .cta-panel-card { padding: 36px 24px; }
  .contact-panel { padding: 30px 22px; border-radius: 20px; }
  .section-head { gap: 20px; margin-bottom: 22px; }
  .band { padding: 20px 22px; }
  .band-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .runner-body { min-height: 0; }
  .post-header h1 { letter-spacing: -0.01em; }
  .post-standfirst { font-size: 18px; }
  .post-body > p { font-size: 17px; }
  .callout { padding: 22px 20px; }
  .callout p { font-size: 17px; }
  .driver { grid-template-columns: 34px 1fr; gap: 12px; padding: 18px; }
  .takeaways { padding: 22px 20px; }
  .inline-cta { padding: 20px; }
  .inline-cta a { width: 100%; text-align: center; }
  .calc { padding: 22px 20px; }
  .figure-panel { padding: 14px; }

  /* Comfortable thumb targets on every control the prototype introduced. */
  .pill, .opt, .case-tab, .layer-card, .runner-replay, .stepper-btn { min-height: 44px; }
  .pill { display: inline-flex; align-items: center; }
  .faq-q { padding: 16px 0; font-size: 19px; min-height: 44px; }
  .toc a { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 480px) {
  .cta-panel-card { padding: 30px 20px; }
  .case-panel { padding: 22px 18px; }
  .split-panel { padding: 22px 20px; }
  .feature-card { flex-direction: column; gap: 14px; }
}

/* Grid items default to `min-width: auto`, so a child with a hard minimum —
   the 620px floor on the SVG diagrams — pushes the whole column past the
   viewport instead of scrolling inside its own container. That is exactly what
   happened to the cost article at 390px: the column measured 650px on a 350px
   container. `min-width: 0` restores the intended behaviour: the scroller
   scrolls, the page does not. Applies to every multi-column grid introduced by
   the 2026-07-25 design. */
.post-layout > *,
.case-layout > *,
.pricer > *,
.calc-body > *,
.faq-layout > *,
.prose-split > *,
.split-panel > *,
.acc-body-inner > *,
.step-detail > *,
.contact-panel > *,
.featured-post > *,
.page-hero--split .container > * { min-width: 0; }