/* What we do (layouts/_default/what-we-do.html): the Testing vs. verification tab. The comparison sits on
   the reading column like everything else on the page: two columns of prose facing each other across a
   narrow column of row labels, under the two column labels. Type stays at the site's sizes. */

.wwd { margin: var(--sp-8) 0 0; }
/* the comparison tab's title and intro are centred over the two-sided table below them */
.what-we-do .wwd-open { text-align: center; }
.what-we-do .wwd-open > p { font-size: 17px; line-height: 1.6; max-width: 60ch; margin-left: auto; margin-right: auto; }

/* the FAQ's questions carry no section numbers */
.what-we-do .prose h2::before { content: none; }
.what-we-do .prose h2 { counter-increment: none; }

/* the mono microlabel: column labels and row labels, in the tabs' type */
.wwd__label { font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin: 0; }
.wwd__label--testing { color: var(--dim); }
.wwd__label--theorem { color: var(--brand); }

/* the two column labels, each on a short rule in its own ink, over their columns */
.wwd__labels { display: grid; grid-template-columns: 4fr 3fr 4fr; gap: var(--sp-4); border-bottom: 1px solid var(--line); }
.wwd__labels .wwd__label { padding-bottom: var(--sp-2); margin-bottom: -1px; border-bottom: 2px solid currentColor; }
.wwd__labels .wwd__label--testing { grid-column: 1; justify-self: end; }
.wwd__labels .wwd__label--theorem { grid-column: 3; justify-self: start; }
.wwd__label--inline { display: none; }

/* the rows: the row label in the middle column, the two sides facing it */
.wwd__row { display: grid; grid-template-columns: 4fr 3fr 4fr; gap: var(--sp-4); align-items: start; padding: var(--sp-6) 0; border-bottom: 1px solid var(--line); }
.wwd__row-label { grid-column: 2; grid-row: 1; text-align: center; padding-top: 3px; }   /* spacing-exempt: sits the 12px label on the 15px text's first line */
.wwd__side { font-size: 15px; line-height: 24px; margin: 0; grid-row: 1; text-wrap: pretty; }
.wwd__side--testing { grid-column: 1; text-align: right; color: var(--dim); }
.wwd__side--theorem { grid-column: 3; }
.wwd__row:last-of-type { border-bottom: 0; }   /* the What you get rule follows */

/* what you get: five across on a hairline, each a bold line and a sentence */
.wwd__receive { margin-top: var(--sp-10); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.wwd__receive h2.wwd__label { font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.wwd__list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); }
.wwd__list li { display: flex; flex-direction: column; gap: var(--sp-1); font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.wwd__list strong { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ink); }

/* the one link out, a button like the form's, centred on the column */
.wwd__cta { margin: var(--sp-8) 0 var(--sp-4); text-align: center; }
.wwd__cta a { display: inline-block; min-height: 44px; box-sizing: border-box; padding: var(--sp-3) var(--sp-5); background: var(--brand); color: var(--paper); text-decoration: none; font: 500 14px/20px var(--font-mono); }
.wwd__cta a:hover { background: var(--brand-press); color: var(--paper); }
.wwd__cta a:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; }

@media (max-width: 900px) { .wwd__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .wwd__list { grid-template-columns: 1fr; }
  .wwd__labels { display: none; }
  .wwd__row { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5) 0; }
  .wwd__row:first-of-type { border-top: 1px solid var(--line); }
  .wwd__row-label, .wwd__side--testing, .wwd__side--theorem { grid-column: 1; grid-row: auto; }
  .wwd__row-label { text-align: left; padding-top: 0; }
  .wwd__side { display: flex; flex-direction: column; gap: var(--sp-1); }
  .wwd__side--testing { text-align: left; }
  .wwd__label--inline { display: inline-block; }
}