/* Applied Will: the pages other than home (/sample, /contact, /research and its posts, /audit,
   /experts, /privacy, 404). They load site.css first, then this. */

/* Page heroes */

.page-hero { padding-block: clamp(48px, 8vw, 112px) clamp(56px, 8vw, 104px); }
.page-hero .wrap { display: grid; gap: 28px; }
.page-hero h1 { max-width: 16ch; }
.page-hero-copy { display: grid; gap: 28px; max-width: 700px; }

/* Stats, the criteria tiles and the cited quote (research posts) */

.evidence { display: grid; gap: 32px; margin-bottom: clamp(56px, 8vw, 104px); }
.evidence-intro { display: grid; gap: 12px; max-width: 54ch; }
.evidence-intro h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; }
.evidence-intro p { color: var(--gray-700); }
.stats { display: grid; gap: 32px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
@media (min-width: 1100px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stat .num { font-size: clamp(44px, 4.4vw, 64px); } }

.ruled { display: grid; gap: 36px 24px; }
.ruled > li { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 20px; border-top: 1px solid var(--ink); }
.ruled h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.15; }
.ruled p:not(.label) { color: var(--gray-700); }
@media (min-width: 900px) { .ruled.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.criteria-head { margin-bottom: 24px; }

.cite { display: grid; gap: 16px; max-width: 62ch; margin-top: clamp(56px, 8vw, 96px); padding-left: 22px; border-left: 3px solid var(--blue); }
.cite blockquote p { font: 500 clamp(24px, 3vw, 36px)/1.18 var(--sans); letter-spacing: -0.02em; word-spacing: 0.08em; text-wrap: balance; }
.cite figcaption { font-size: 15px; color: var(--gray-600); }
.cite figcaption a { color: var(--ink); text-underline-offset: 3px; }
.ruled.tiles { gap: 20px; }
.ruled.tiles > li { gap: 0; padding: 0; border: 1px solid var(--ink); }
.tiles .plate { height: clamp(148px, 15vw, 196px); border-bottom: 1px solid var(--ink); }
.tile-body { display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 28px); }

/* Offers: two cards, task sets first */

.offers { display: grid; gap: 20px; }
@media (min-width: 840px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid var(--ink);
  background: var(--paper);
}
.offer.lead { background: var(--ink); color: var(--paper); }
.offer.lead .label { color: var(--muted-ink); }
.offer.lead :focus-visible { outline-color: var(--paper); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: clamp(36px, 5vw, 56px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; word-spacing: 0.08em; }
.price .small { font-size: 16px; font-weight: 500; letter-spacing: 0; }
.offer.lead .price .small { color: var(--muted-ink); }
.price-sub { font: 400 14px/1.4 var(--mono); }
.offer ul { display: grid; gap: 10px; margin-block: 6px 12px; }
.offer li { position: relative; padding-left: 22px; }
.offer li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: currentColor; }
.offer .btn { margin-top: auto; }
.offer-intro { max-width: 40ch; }
.offer.lead .offer-intro { color: var(--muted-ink); }
.offer:not(.lead) .offer-intro { color: var(--gray-700); }

/* Sample report: the planted controls (sticky beside the batch on wide screens), and the batch */

.sample { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .sample { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; } }
.sample .report { max-width: none; }
@media (min-width: 960px) { .sample > .controls { position: sticky; top: calc(var(--header-h) + 24px); } }
.caught { flex-basis: 100%; font-size: 14px; color: var(--gray-600); }

.batch { display: grid; gap: 16px; }
.batch-total { font-size: 18px; }
.stack { display: flex; gap: 3px; height: 14px; }
.stack i { flex: var(--n) 1 0; min-width: 6px; }
.legend { display: grid; gap: 8px; }
.legend li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.legend i { flex: none; width: 10px; height: 10px; transform: translateY(1px); }
.a { background: var(--mid); }
.b { background: var(--blue); }
.c { background: var(--ink); }
.rows { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 14px; }
.rows caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rows tr { display: grid; gap: 4px; padding-block: 14px; border-top: 1px solid var(--line); }
.rows tr:last-child { border-bottom: 1px solid var(--line); }
.rows th[scope=row] { font-size: 12.5px; font-weight: 500; text-align: left; overflow-wrap: anywhere; }
.rows td { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rows td::before { content: attr(data-label); flex: none; width: 128px; font: 600 11px/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-600); }
@media (min-width: 720px) {
  .rows thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .rows thead tr { padding-block: 10px; border-top: 0; border-bottom: 1px solid var(--ink); }
  .rows tr { grid-template-columns: minmax(0, 1fr) 128px 164px 72px; align-items: center; gap: 16px; }
  .rows td.mono { white-space: nowrap; }
  .rows th[scope=col] { font: 600 11px/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-600); text-align: left; }
  .rows td::before { display: none; }
}
.batch-note { max-width: 62ch; margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--gray-600); }

/* Trust */

/* Trust: one dark card, the hash scene on top, the copy and a SOC 2 tile linking the trust center. */
.trust { margin-top: 24px; }
.trust .plate { height: clamp(96px, 10vw, 136px); border-bottom: 1px solid var(--line-ink); }
.trust-body { display: grid; gap: 32px; padding: clamp(20px, 4vw, 56px); }
.trust-copy { display: grid; gap: 20px; }
.trust-text + .trust-text, .founder { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted-ink); }
.founder { padding-top: 20px; border-top: 1px solid var(--line-ink); }
.soc { display: grid; gap: 14px; justify-items: start; padding: clamp(16px, 4vw, 24px); border: 1px solid var(--line-ink); }
.soc-title { font-size: min(18px, 4.5vw); font-weight: 600; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { padding: 5px 8px; border: 1px solid var(--line-ink); font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-ink); }
@media (min-width: 980px) { .trust-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; } }
.trust-text { max-width: 36em; font: 500 clamp(22px, 2.8vw, 32px)/1.35 var(--sans); letter-spacing: -0.015em; word-spacing: 0.06em; text-wrap: pretty; }

/* Forms: one bottom rule per field */

.request { display: grid; gap: 40px; }
.request-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
@media (min-width: 1000px) { .request:has(form) { grid-template-columns: 1fr 1.1fr; gap: 96px; align-items: start; } }
/* Booking on /audit: the calendar opens between the copy and the link, full width. */
.request.is-booking { grid-template-columns: minmax(0, 1fr); }
.is-booking .request-copy .btn { display: none; }
.form { display: grid; gap: 24px; }
.form label, .form fieldset { display: grid; gap: 6px; }
.form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.form legend { padding: 0; margin-bottom: 8px; }
.form input:not([type=radio], [type=checkbox]), .form textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #8E9197;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  resize: vertical;
}
.form input:focus, .form textarea:focus { outline: 0; border-bottom: 2px solid var(--ink); padding-bottom: 9px; }
.form ::placeholder { color: #6B6E75; }
.form [aria-invalid="true"] { border-bottom: 2px solid var(--ink); padding-bottom: 9px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.form .choice { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid #8E9197; border-radius: 4px; cursor: pointer; font-size: 16px; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.choice input { margin: 0; accent-color: var(--ink); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; margin-top: 8px; }
.form-note { font-size: 14px; color: var(--gray-600); }
.form-note a { color: var(--ink); text-underline-offset: 3px; }

.who-cards { display: grid; gap: 20px; }
@media (min-width: 760px) { .who-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.who-card { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--ink); background: var(--paper); }
.who-card h3 { font-size: 24px; }
.who-card p { color: var(--gray-700); }
.flow li { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 1px solid var(--ink); }
.flow .step-no { color: var(--gray-600); }
.flow p { color: var(--gray-700); }
.flow li:last-child { border-top: 3px solid var(--blue); padding-top: 18px; }
.flow { display: grid; gap: 32px 24px; }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.payouts-copy { display: grid; gap: 20px; align-content: start; max-width: 56ch; }
.payouts-copy p { color: var(--gray-700); }
.facts { display: grid; gap: 0; }
.facts > div { display: grid; gap: 4px; padding-block: 16px; border-top: 1px solid var(--ink); }
.facts > div:last-child { border-bottom: 1px solid var(--ink); }
.facts dt { font: 600 11px/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-600); }
.facts dd { overflow-wrap: anywhere; }

/* Research (older project pages) */

.research-list { display: grid; gap: 0; max-width: 760px; }
.research-list li { display: grid; gap: 8px; padding-block: 28px; border-top: 1px solid var(--ink); }
.research-list li:last-child { border-bottom: 1px solid var(--ink); }
.research-list h3 { font-size: 26px; }
.research-list p { color: var(--gray-700); }

/* 404 */

.notfound-media { display: grid; place-items: center; background: var(--gray-50); padding-block: clamp(32px, 6vw, 72px) 0; }
.notfound-media img { width: min(360px, 70vw); height: auto; }
.notfound { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 104px); }

/* Small helpers */
.cols-2 { display: grid; gap: 40px; }
@media (min-width: 900px) { .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.spec-head { padding-bottom: 14px; border-bottom: 1px solid var(--ink); color: var(--ink); }
.facts dd { color: var(--gray-700); }

/* Sample report page: the card and the controls side by side, then the batch */

.sample-pair { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) { .sample-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.sample-pair .report { max-width: none; }
.sample-batch { margin-top: clamp(40px, 6vw, 72px); }

/* Contact: the form, a side column, and a thank-you in the form's place once it's sent */

.contact { display: grid; gap: 48px; }
.contact .cal-inline { grid-column: 1 / -1; }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 96px; align-items: start; } }
.form-title { max-width: none; font-size: clamp(24px, 2.6vw, 32px); }
.form-row { display: grid; gap: 24px; }
@media (min-width: 600px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-side > div { display: grid; gap: 10px; justify-items: start; padding-block: 24px; border-top: 1px solid var(--ink); }
.contact-side > div:last-child { border-bottom: 1px solid var(--ink); }
.contact-side h3 { font-size: 20px; }
.contact-side p { color: var(--gray-700); }
.contact-side .mail { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.thanks { display: grid; gap: 14px; justify-items: start; align-content: start; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--ink); }
.thanks:focus { outline: 0; }
.thanks-title { max-width: 18ch; font: 600 clamp(26px, 3vw, 36px)/1.1 var(--sans); letter-spacing: -0.03em; word-spacing: 0.06em; }
.thanks p:not(.thanks-title) { max-width: 52ch; color: var(--gray-700); }
.thanks a { color: var(--ink); text-underline-offset: 3px; }
.thanks-back { padding: 0; border: 0; background: none; cursor: pointer; }

/* Research index */

.posts-label { margin-bottom: 20px; }
#earlier h2 { font-size: clamp(26px, 3vw, 34px); }

/* Research posts: a reading column, with figures and tables beside it */

.post-hero { padding-bottom: clamp(32px, 5vw, 64px); }
.post-head h1 { max-width: 22ch; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; }
.post-head .label a { color: inherit; text-underline-offset: 3px; }
.post-body { display: grid; gap: clamp(32px, 4vw, 48px); padding-bottom: var(--section-y); }
.post-plate { height: clamp(150px, 17vw, 230px); border: 1px solid var(--ink); }
.prose { display: grid; gap: 18px; max-width: 720px; }
.prose > h2 { max-width: none; margin-top: clamp(16px, 3vw, 32px); font-size: clamp(26px, 3vw, 36px); }
.prose > h3 { margin-top: 12px; font-size: 21px; }
.prose p, .prose li { color: var(--gray-700); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { display: grid; gap: 10px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 1px; background: var(--ink); }
.prose a:not(.link-arrow) { color: var(--ink); text-underline-offset: 3px; }
.prose code { font: 0.86em/1.5 var(--mono); overflow-wrap: anywhere; }
.prose .prompt { padding: 14px 18px; border-left: 2px solid var(--ink); background: var(--gray-50); font-size: 16px; color: var(--ink); }
.brief, .callout { display: grid; gap: 12px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--ink); }
.callout { border-left: 4px solid var(--blue); }
.post-body > .stats { max-width: 960px; margin-bottom: 0; }
@media (min-width: 760px) { .post-body > .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-body .stat .num { font-size: clamp(44px, 5vw, 60px); }
.post-body .cite { margin-top: 12px; }
.post-body > .tiles { margin-top: 4px; }
.hashes { display: grid; }
.hashes > div { display: grid; gap: 2px; padding-block: 10px; border-top: 1px solid var(--line); }
.hashes dd { font-size: 14px; color: var(--gray-700); }
.post-next { display: grid; justify-items: start; margin-top: 8px; }
.post-next .link-arrow { color: var(--ink); text-decoration: none; }
.table-note { font-size: 14px; }

/* Tables of results: scroll sideways on a phone rather than squeeze */

.table-scroll { overflow-x: auto; }
.data { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.data caption { padding-bottom: 10px; text-align: left; font: 600 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-600); }
.data th, .data td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data thead th { font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-600); border-bottom-color: var(--ink); }
.data tbody th { font-weight: 500; color: var(--ink); }
.data td { color: var(--gray-700); }
.data .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.data td.num strong { color: var(--ink); }
.data .total th, .data .total td { border-top: 1px solid var(--ink); font-weight: 600; color: var(--ink); }

/* The bar chart: one row per tier, text only (ink) and with images (blue), every value at its bar's tip */

.chart { display: grid; gap: 16px; max-width: 720px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--ink); }
.chart-title { font-size: 18px; font-weight: 600; }
.chart-sub { font-size: 14px; color: var(--gray-600); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.chart-legend li { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend i { width: 14px; height: 10px; border-radius: 0 2px 2px 0; }
.k-text { background: var(--ink); }
.k-img { background: var(--blue); }
.bars { display: block; width: 100%; border-collapse: collapse; }
.bars tbody { display: grid; gap: 16px; }
.bars tr { display: grid; gap: 2px; }
.bars th[scope=row] { font: 600 13px/1.4 var(--sans); text-align: left; }
.bars td { display: flex; align-items: center; gap: 8px; padding: 0; }
.bar { display: block; flex: none; width: calc(var(--v) * 0.84%); min-width: 2px; height: 18px; border-radius: 0 4px 4px 0; }
.val { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
@media (min-width: 600px) {
  .bars tr { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; }
  .bars th[scope=row] { grid-row: span 2; align-self: center; }
}

/* The ctb-syn-0018 plan: the slab, the rectangle text-only reading measured, and the notch it counted */

.plan-figure { display: grid; gap: 16px; max-width: 720px; }
.plan { width: 100%; max-width: 560px; height: auto; }
.plan .slab { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.plan .bound { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 6 5; }
.plan .dims path { fill: none; stroke: var(--gray-600); stroke-width: 1; }
.plan text { font: 500 13px var(--mono); fill: var(--gray-700); }
.plan .area { font: 600 16px var(--sans); fill: var(--ink); }
.plan .notch { paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }
.plan-key { display: grid; gap: 8px; font-size: 14px; color: var(--gray-700); }
.plan-key li { display: flex; align-items: center; gap: 10px; }
.plan-key i { flex: none; width: 22px; height: 12px; }
.k-slab { border: 2.5px solid var(--ink); }
.k-bound { border: 1.25px dashed var(--ink); }
.k-notch { background: var(--blue); }