/* ============================================================
   MarketStarter — long-form articles
   Loaded AFTER styles.css and service.css, so the nav, buttons,
   FAQ (.faq details), .close and .footer all come for free and
   the article reads as part of the same system.

   Same resilience contract as every other page: this file alone
   renders the article complete and static. Nothing here depends
   on JS. Motion states live in service.js behind html.fx.

   ⚠️ Every grid track is minmax(0, …) on purpose. A bare `1fr`
   refuses to shrink below its content and pushed the privacy
   pages to 713px on a 375px viewport (L3 QA, 2026-07-20). Wide
   things — tables — scroll inside their own container instead of
   scrolling the page.
   ============================================================ */

/* ---------- hero ---------- */
.art-hero {
  background: var(--navy);
  color: var(--on-dark);
  padding-top: clamp(112px, 15vw, 168px);
  padding-bottom: clamp(52px, 7vw, 80px);
}
.art-hero .container { max-width: 900px; }
.art-crumb {
  color: var(--on-dark-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(22px, 3vw, 32px);
}
.art-crumb a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
.art-crumb a:hover { color: var(--green-bright); }
.art-crumb i { font-style: normal; color: var(--on-dark-faint); }
.art-crumb span { color: var(--on-dark-muted); }

.art-hero h1 {
  color: var(--paper);
  font-size: clamp(32px, 6.2vw, 62px);
  line-height: 1.03;
  letter-spacing: -0.032em;
  max-width: 16ch;
}
.art-hero h1 .sig { color: var(--green); }
.art-standfirst {
  margin-top: clamp(18px, 2.4vw, 26px);
  max-width: 60ch;
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--on-dark-muted);
}

/* byline strip — the visible dateModified lives here.
   Prices inside articles go stale and get quoted back for years,
   so the review date is a load-bearing element, not decoration. */
.art-meta {
  margin-top: clamp(26px, 3.4vw, 38px);
  padding-top: 18px;
  border-top: 1px solid rgba(233, 236, 239, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: var(--on-dark-faint);
}
.art-meta b { color: var(--on-dark-muted); font-weight: 500; }

/* ---------- body ---------- */
.art-body {
  background: var(--paper);
  padding-block: clamp(52px, 7vw, 84px);
}
.art-body .container { max-width: 780px; }

.art-body h2 {
  font-size: clamp(25px, 3.4vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin-top: clamp(46px, 6vw, 72px);
}
.art-body h2:first-child { margin-top: 0; }
.art-body h2 em { font-style: normal; color: var(--green-text-light); }
.art-body h3 {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: clamp(30px, 3.6vw, 40px);
}
.art-body p {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-strong);
}
.art-body p b, .art-body li b { font-weight: 600; color: var(--navy); }
/* Inline prose links only. The :not(.btn) is load-bearing: .art-body a is
   (0,1,1) and .btn-primary is (0,1,0), so without it this rule beat the button
   and painted the .art-next CTA #007944 on #00C26E — 2.34:1, failing AA at any
   size — plus an underline no button should have. Let each .btn class supply
   its own colour (--cta-ink for primary, --on-dark for ghost). */
.art-body a:not(.btn) {
  color: var(--green-text-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.art-body a:not(.btn):hover { color: var(--green-deep); }

.art-body ul.bullets, .art-body ol.numbers {
  margin-top: 16px;
  display: grid;
  gap: 11px;
  padding-left: 0;
}
.art-body ul.bullets li, .art-body ol.numbers li {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-strong);
}
.art-body ul.bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.art-body ol.numbers { counter-reset: n; }
.art-body ol.numbers li { counter-increment: n; }
.art-body ol.numbers li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.16em;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--green-text-light);
}

/* ---------- the short answer: the block an assistant lifts ---------- */
.answer {
  margin-top: clamp(26px, 3vw, 34px);
  background: var(--mint-wash);
  border: 1px solid var(--mint-tint);
  border-radius: var(--r-2xl);
  padding: clamp(22px, 3.4vw, 32px);
}
.answer .mono-label { color: var(--green-text-light); }
.answer p { margin-top: 14px; }
.answer p:first-of-type { margin-top: 12px; }
.answer ul.bullets { margin-top: 14px; }
.answer ul.bullets li::before { background: var(--green-deep); }

/* ---------- callouts ---------- */
.callout {
  margin-top: clamp(26px, 3vw, 34px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.6vw, 28px);
}
.callout .mono-label { color: var(--green-text-light); display: block; }
.callout p { margin-top: 10px; font-size: 15.5px; }
.callout--counter { border-left-color: var(--ink-muted); }
.callout--counter .mono-label { color: var(--ink-muted-strong); }

/* ---------- data tables ----------
   The scroller, not the page, takes the overflow. */
.table-wrap {
  margin-top: clamp(22px, 2.8vw, 30px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
}
table.data {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14.5px;
}
table.data caption {
  caption-side: top;
  text-align: left;
  padding: 14px 18px 0;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
table.data th, table.data td {
  padding: 11px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.data thead th {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
table.data tbody th { font-weight: 600; color: var(--navy); }
table.data td { color: var(--ink-muted-strong); }
table.data td.num, table.data th.num {
  font-family: var(--f-mono);
  font-size: 13px;
  white-space: nowrap;
  color: var(--navy);
}
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }
table.data tr.total th, table.data tr.total td {
  background: var(--mint-wash);
  color: var(--navy);
  font-weight: 600;
}
table.data tr.ours th, table.data tr.ours td { background: rgba(0, 194, 110, 0.06); }
.table-note {
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}
/* ONLY when the note sits INSIDE the bordered box does it need the box's own
   horizontal padding: there the caption above it has 14px 18px 0 and the cells
   have 10px 14px, while this had 0 and sat flush against the border left, right
   and bottom. Matches the caption's 18px; the 14px bottom balances its 14px top.
   ⚠️ Must stay scoped — on /articles/ai-receptionist-cost/ the notes are
   siblings of .table-wrap at .container level, where 0 is already correct and
   this padding would indent them past the surrounding body copy. */
.table-wrap .table-note { padding: 0 18px 14px; }
.table-note b { color: var(--ink-muted-strong); font-weight: 500; }

/* evidence grade, inline */
.tier {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-text-light);
  background: var(--mint-wash);
  border: 1px solid var(--mint-tint);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
.tier--calc { color: var(--ink-muted-strong); background: var(--surface-subtle); border-color: var(--border); }

/* ---------- what we charge ---------- */
.pricebox {
  margin-top: clamp(26px, 3vw, 34px);
  background: var(--navy);
  color: var(--on-dark);
  border-radius: var(--r-2xl);
  padding: clamp(24px, 3.6vw, 38px);
}
.pricebox .mono-label { color: var(--green-bright); }
.pricebox h3 { color: var(--paper); margin-top: 12px; }
.pricebox p { color: var(--on-dark-muted); }
.pricebox .tiers {
  margin-top: clamp(20px, 2.6vw, 28px);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.pricebox .tiers li {
  background: var(--ink-deep);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  box-shadow: inset 0 0 0 1px rgba(233, 236, 239, 0.09);
}
.pricebox .tiers .t-k { display: block; color: var(--green-bright); }
.pricebox .tiers .t-v {
  display: block;
  margin-top: 8px;
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.pricebox .tiers .t-d { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--on-dark-muted); }
.pricebox .fineprint {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(233, 236, 239, 0.14);
  font-size: 14px;
  line-height: 1.65;
  color: var(--on-dark-muted);
}
.pricebox .fineprint b { color: var(--paper); font-weight: 500; }
/* :not(.btn) is here to WIN, not to exclude. The prose rule above is
   `.art-body a:not(.btn)` = (0,2,1); a bare `.pricebox a` is (0,1,1) and loses
   however far down the file it sits, so these links were being painted
   --green-text-light (a LIGHT-background green) on the navy card = 3.44:1.
   Matching the specificity puts them back on --green-bright = 8.05:1.
   Regression introduced by the 2026-08-07 button fix; caught 2026-08-07 by
   scripts/qa-site.mjs. */
.pricebox a:not(.btn) { color: var(--green-bright); }
.pricebox a:not(.btn):hover { color: var(--paper); }

/* ---------- other systems ---------- */
.sys-cost { scroll-margin-top: 96px; }

/* ---------- sources ---------- */
.art-sources {
  margin-top: clamp(46px, 6vw, 68px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}
.art-sources h2 { margin-top: 0; font-size: clamp(19px, 2.2vw, 23px); }
.art-sources p, .art-sources li { font-size: 14.5px; line-height: 1.68; color: var(--ink-muted-strong); }
.art-sources ul.bullets li { padding-left: 22px; }
.art-sources ul.bullets li::before { width: 5px; height: 5px; top: 0.66em; }

/* ---------- next step out of the article ---------- */
.art-next {
  margin-top: clamp(34px, 4.4vw, 52px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.art-next .btn { flex: none; }
.art-next .art-next-alt { font-size: 15px; color: var(--ink-muted-strong); }

/* ---------- FAQ section on an article ---------- */
.art-faq { background: var(--surface-subtle); }
.art-faq .container { max-width: 900px; }
.art-faq .faq { margin-inline: 0; }

/* ---------- narrow screens ---------- */
@media (max-width: 640px) {
  .art-hero h1 { max-width: none; }
  .art-body p, .art-body ul.bullets li, .art-body ol.numbers li { font-size: 16px; }
  table.data th, table.data td { padding: 10px 14px; }
}

/* ---------- Greek-language articles ----------
   MOVED 2026-08-06 → styles.css, together with the identical copy that lived
   in legal.css. Both were invisible to the service pages, which load neither
   stylesheet, so the first Greek SERVICE page had no Greek font stack to
   inherit. The override (Manrope + Noto Sans Mono, because Bricolage/Geist/
   Geist Mono ship no Greek glyphs) now lives in the one stylesheet every page
   loads. Do not copy it back here. */