/* marketing.css — the little the generated marketing pages need on top of
   site.css (tokens), landing.css (nav, footer) and static-page.css (.doc-*).

   Four additions, and nothing else belongs here:
     1. the breadcrumb trail, which reuses .doc-kicker for type and colour
     2. the related-pages grid, which static-page.css has no equivalent for
     3. one mobile rule for the extra nav links added in public_layout.php
     4. the cost calculator table and slider, used only on /cost-calculator
        today but built to be dropped into any page through the same
        render_cost_table() partial, so it lives with the other shared
        marketing components rather than a page-specific file

   Anything a second page type would also want belongs in static-page.css
   instead. Loaded after the other three base sheets, so equal-specificity
   overrides win. */

/* ── Single-column article ────────────────────────────────────────────── */
/* .doc-wrap is a two-column grid sized for the setup guide's sticky table of
   contents. render_marketing_page() emits no aside, so without this the text
   sits hard left of a 240px hole. 808px is the 760px measure plus the wrap's
   own 24px of padding on each side, so the column centres exactly. A later
   page that wants a table of contents should add the aside back and drop
   this class rather than widen the measure. */
.doc-wrap.doc-solo {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 808px;
}

/* ── Breadcrumb trail ─────────────────────────────────────────────────── */
.doc-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.doc-crumbs a {
  color: inherit; text-decoration: none; opacity: 0.8;
  transition: opacity .12s;
}
.doc-crumbs a:hover { opacity: 1; text-decoration: underline; }
.doc-crumbs .sep { opacity: 0.4; }
.doc-crumbs [aria-current="page"] { color: var(--text-mute); }

/* ── Related pages ────────────────────────────────────────────────────── */
/* A bare list of links at the foot of a long article gets scrolled past, so
   these are cards with the route's own description under each title. */
.doc-related {
  margin-top: 64px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.doc-related h2 { margin-top: 28px; margin-bottom: 18px; }
.doc-related ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.doc-related li { margin: 0; }
.doc-related a {
  display: flex; flex-direction: column; gap: 6px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.doc-related a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.doc-related .t {
  color: var(--text);
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
}
.doc-related .d {
  color: var(--text-dim);
  font-size: 13px; line-height: 1.5;
}

@media (max-width: 720px) {
  .doc-related ul { grid-template-columns: minmax(0, 1fr); }
  .doc-related { margin-top: 48px; }
}

/* ── Cost calculator ──────────────────────────────────────────────────── */
/* app/partials/cost-table.php renders one real <table>; this only styles it.
   Prices and volumes use the mono face with tabular figures, so a column of
   numbers lines up like a ledger instead of jittering as the digits change,
   which matters here because the slider rewrites one row every time it
   moves. Every colour is a token from site.css, so dark mode needs nothing
   extra: it already redefines every one of them. */
.cc-table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.cc-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13.5px;
}
/* The table's accessible name. .caps (site.css) already sets the small
   uppercase mono label style used elsewhere on the site; this only adds the
   spacing a <caption> needs, since it carries none by default. Visible on
   purpose: what names the table for a screen reader also tells a sighted
   reader what the row below it means, which matters most for the slider's
   own single-row table. */
.cc-table caption {
  caption-side: top;
  text-align: left;
  padding: 14px 14px 8px;
}
.cc-table th,
.cc-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cc-table thead th {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-strong);
}
.cc-table tbody th[scope="row"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text);
}
.cc-table tbody tr:last-child th,
.cc-table tbody tr:last-child td { border-bottom: none; }

/* sendvia is the reason this table exists, so its column is the one visual
   departure: a soft fill and a rule down each side, not a louder colour. */
.cc-table .cc-col-sendvia {
  background: var(--accent-soft);
  border-left: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}
.cc-table thead th.cc-col-sendvia { color: var(--accent-deep); }

.cc-price {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  /* 500 is the heaviest Geist Mono weight the font URL actually loads. Asking
     for 600 here made the browser synthesise a faux bold, which at this size
     smears the digits into something hard to read. */
  font-weight: 500;
  font-size: 14.5px;
  color: var(--text);
}
.cc-price.cc-na {
  font-family: var(--sans);
  font-weight: 500;
  font-style: italic;
  color: var(--text-mute);
}
.cc-note {
  display: block;
  margin-top: 4px;
  max-width: 260px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  white-space: normal;
}
.cc-note a { color: inherit; text-decoration-color: var(--border-strong); }

.cc-table tfoot td {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-mute);
  white-space: normal;
  background: var(--surface-alt);
}

/* The one row the slider drives, in the full table when reused elsewhere
   with a $highlight, and always in the slider's own mini table below it. */
.cc-row-live { background: var(--accent-soft); }

.cc-slider {
  margin: 40px 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}
.cc-slider h2 { margin-top: 0; }
.cc-slider > p { color: var(--text-dim); font-size: 14.5px; }
.cc-slider .cc-table-wrap { margin-bottom: 0; }

.cc-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 20px 0 24px;
}
.cc-controls label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}
.cc-controls input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
#cc-range-value {
  min-width: 9ch;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  /* Geist Mono loads at 400 and 500 only, so anything heavier is a synthesised
     faux bold that smears at small sizes. */
  font-weight: 500;
  color: var(--accent-deep);
  text-align: right;
}

@media (max-width: 560px) {
  .cc-controls { flex-wrap: wrap; }
  .cc-controls label { flex: 1 0 100%; }
  #cc-range-value { text-align: left; }
}

/* Nav overflow is handled in landing.css, not here. public_nav() gained four
   marketing links, and the nav row turns into a horizontal scroll strip below
   820px so none of them are hidden. That rule lives beside the nav's other
   mobile rules rather than in this file, because landing.html uses the same
   markup and needs the same behaviour. */

/* == Comparison pages ================================================== */
/* /compare and /compare/{provider} render three generated tables: the cost
   table from app/partials/cost-table.php and two comparison tables from
   app/partials/compare-table.php. Both carry a 720px minimum width, so that a
   sixteen-row comparison never squashes its columns into nonsense, and both
   therefore need somewhere to scroll. landing.html gives the homepage table a
   .compare-wrap of its own; a generated marketing page has no equivalent, and
   without one the whole page scrolls sideways on a phone rather than the
   table doing it. Same shape as .cc-table-wrap above, which does this job for
   the cost table on /cost-calculator. */
.cmp-scroll {
  overflow-x: auto;
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* .cmp-wins-wrap is a two-column grid on the homepage, where it holds one
   block per rival. A comparison page has one rival, so it holds a single
   list, and the grid would leave half the row empty. */
.doc-main .cmp-wins-wrap {
  display: block;
  margin-top: 0;
}
.doc-main .cmp-wins { padding-left: 22px; }
.doc-main .cmp-wins li { margin-bottom: 12px; }

/* The rival's documented send call beside ours, from render_send_examples().
   Two columns on a wide screen so the shapes of the two payloads can be read
   against each other, which is the whole reason both are printed; stacked
   below 860px, where side by side would mean two unreadably narrow code
   blocks. Each <pre> scrolls on its own rather than stretching the grid,
   because a single long curl line would otherwise widen the whole page. */
.cmp-code-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}
@media (max-width: 860px) {
  .cmp-code-pair { grid-template-columns: 1fr; }
}
.cmp-code { margin: 0; min-width: 0; }
.cmp-code figcaption {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.cmp-code pre {
  margin: 0;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
}
.cmp-code-src {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-mute);
}