/* Grizzly Beam — /services/conversion/
   v2 content rebuild, 2026-09-21.
   Shared: .svc-hero*, .svc-plus, .svc-closer*, .svc-sec*, .svc-cards/.svc-card,
   .svc-bullets, .svc-steps/.svc-step, .svc-faq/.svc-fq → components.css
   Page-only below: the hero, the worked-example table, and the team row. */

/* ---------- 1 · Hero ---------- */
.cnv-hero { display: flex; align-items: center; justify-content: center; }
/* ---------- 3 · The worked example ----------
   The numbers are invented, so the tag has to be impossible to miss and impossible
   to mistake for a client result. It sits ABOVE the table, in mono, not in the
   small print underneath — this is the one place on the site where a disclaimer
   is the point rather than a footnote.

   The table is a real <table> (with a caption and scope on every header), because
   that is what it is: five rows compared across two columns. */
.cnv-tag {
  display: inline-flex; align-items: center;
  font-family: var(--f-mono);
  font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber-deep);
  /* Solid --paper, not a translucent amber wash: the section is a gradient, so a
     see-through fill made the ratio slide from 4.89 at the paper end to 4.04 at the
     stone2 end — below AA for exactly the line that must not be missed.
     On --paper it is 5.40, wherever the tag lands. Same reason for the border:
     rgba(210,149,46,.4) measured 1.41 against the 3.0 that WCAG 1.4.11 asks of a
     boundary that is doing the framing. */
  background: var(--paper);
  border: 1px solid var(--amber-deep);
  border-radius: var(--r-6);
  padding: 0.5rem 0.9rem;
  margin-top: 2.6rem;
}
.cnv-table {
  width: 100%; max-width: 52rem;
  border-collapse: collapse;
  margin-top: 2rem;
  font-family: var(--f-body); font-size: 1.3rem;
}
.cnv-table th, .cnv-table td {
  padding: 1.2rem 1.4rem;
  text-align: left;
  border-bottom: 1px solid rgba(22, 24, 28, 0.14);
}
.cnv-table thead th {
  font-family: var(--f-mono);
  font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tx-g); font-weight: 400;
}
.cnv-table tbody th { font-weight: 400; color: var(--tx-g); }
.cnv-table td { text-align: right; font-variant-numeric: tabular-nums; }
.cnv-table thead th:not(:first-child) { text-align: right; }
/* The last row is the one the whole table exists for. */
.cnv-table tbody tr:last-child th,
.cnv-table tbody tr:last-child td {
  color: var(--ink); font-weight: var(--w-body-strong); border-bottom: none;
}
/* The punchline figure is --ink, not amber: amber-deep measured 4.38 against the
   stone2 end of the section's gradient. The row already carries the emphasis through
   weight and the missing rule underneath it, so nothing is lost. */
.cnv-table tbody tr:last-child td:last-child { color: var(--ink); }
.cnv-table__note { margin-top: 2.4rem; }

/* ---------- 4 · Where the revenue leaks out (ink + beam field) ----------
   Backdrop: the same beam field as "Our services" on the home page. Markup is
   components/BeamField.astro, styles (.hs__bg/.hsbg*) live in core.css;
   .svc-sec--beam only makes the section the positioning context and clips the beams.

   A single ink block between two light sections, so the field's hard bottom edge
   lands where the dark ends. */
.cnv-leaks { padding-block: 10rem; }

/* ---------- 6 · Why clients work with us ---------- */
/* Four cards, no heading above them — the copy gives none, so the grid opens the
   section on its own and needs the top margin a head would have supplied. */
.cnv-why { margin-top: 0; }

/* ---------- 8 · What we measure ---------- */
.cnv-measure { padding-block: 10rem; }
.cnv-measure__note { margin-top: 2.6rem; }

/* ---------- 9 · Your team ----------
   The badge is the only amber disc on the site, and it is deliberately a letter and
   not an icon: these are roles, not people, and a photo placeholder would promise
   faces we do not have yet. aria-hidden, because the role right underneath says it. */
.cnv-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem 2.6rem; margin-top: 4.4rem; }
.cnv-team__badge {
  display: grid; place-items: center;
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  margin-bottom: 1.6rem;
}
.cnv-team__badge svg { width: 1.75rem; height: 1.75rem; }   /* §08: 22px on a 46px disc */
.cnv-team__role { font-size: 1.75rem; line-height: 1.2; letter-spacing: 0; font-weight: var(--w-h3); }   /* brand: H3 */
.cnv-team__desc { color: var(--tx-g); margin-top: 0.9rem; }

/* ---------- 13 · Closer ---------- */
.cnv-closer { padding-block: 10rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .cnv-leaks, .cnv-measure { padding-block: 7rem; }
  .cnv-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2.4rem; margin-top: 3.6rem; }
}
@media (max-width: 767px) {
  /* The table keeps three columns down to 320: the row labels wrap, the figures do
     not, and tabular-nums keeps the two columns aligned. Padding is what gives way. */
  .cnv-table { font-size: 1.2rem; }
  .cnv-table th, .cnv-table td { padding: 1rem 0.5rem; }
  .cnv-table th:first-child, .cnv-table tbody th { padding-left: 0; }
  .cnv-leaks, .cnv-measure { padding-block: 6rem; }
  .cnv-team { grid-template-columns: 1fr; gap: 2.8rem; }
  .cnv-closer { padding-block: 6rem; }
}