/* ==========================================================
   DeltaVisor · the profession pages (site/for/<profession>/index.html)

   Layers on the shared design system and on ../../css/core.css. One template,
   seven pages: who the page is for and what they get, the chore they do by hand
   today, their questions with REAL answers (each asked in the product on the
   date shown and shortened, never written by hand; MARKETING-SITE.md), what the
   answers rest on, and a question box that hands their own question to sign-up
   the way the home page's does. Limits are not listed here: an answer states
   what its records cover when it is asked, and help's coverage page has the rest.
========================================================== */

/* ---- page head (the same shape as /who/ and /product/) ---- */
.phead { padding: clamp(2.5rem, 5vw, var(--s-8)) var(--gutter) var(--rhythm-block); }
.phead > * { max-width: var(--home-max); margin-inline: auto; }
.phead__inner { display: flex; flex-direction: column; gap: var(--s-4); }
.phead h1 {
  font-size: clamp(2.25rem, 5vw, var(--t-5xl));
  line-height: 1.04; letter-spacing: -0.036em; font-weight: 600;
  max-width: 20ch;
}
.phead__sub {
  font-size: clamp(1rem, 1.4vw, var(--t-lg));
  color: var(--ink-mid); line-height: 1.6; max-width: var(--measure-lede);
}

/* ---- the chore: what the work costs them today ---- */
.chore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
@media (max-width: 60rem) { .chore { grid-template-columns: 1fr; } }
.chore__item {
  padding: var(--pad-card); border-radius: 1.125rem;
  background: var(--paper-1);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.chore__item b { font-size: var(--t-md); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.chore__item p { margin: 0; font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.6; }

/* ---- real questions and answers ---- */
.qa-list { list-style: none; margin-block: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
@media (max-width: 60rem) { .qa-list { grid-template-columns: 1fr; } }
.qa {
  padding: var(--s-5); border-radius: 1.25rem;
  background: var(--paper-1);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.qa__q {
  margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--radius-md);
  background: var(--paper-2); color: var(--ink); font-size: var(--t-base); line-height: 1.45;
}
.qa__a { margin: 0; padding: 0 var(--s-1); color: var(--ink-soft); font-size: var(--t-base); line-height: 1.6; }
.qa__a b { color: var(--ink); font-weight: 600; }
.qa__meta { margin: auto 0 0; padding: 0 var(--s-1); font-size: var(--t-xs); color: var(--ink-ghost); }
.qa-note { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-mid); }

/* ---- what it rests on: the records each answer is built from ---- */
.rests { list-style: none; margin-block: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-grid); }
@media (max-width: 60rem) { .rests { grid-template-columns: 1fr; } }
.rests li {
  padding-block: var(--s-3); border-top: var(--rule-w) solid var(--rule);
  font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.6;
}
.rests li strong { color: var(--ink); font-weight: 600; }

/* ---- the closing question box (same contract as the home page's) ---- */
.ask-own {
  max-width: 44rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--s-3); text-align: left;
}
.ask-own__box { display: flex; align-items: stretch; gap: var(--s-2); }
.ask-own__input {
  flex: 1; min-width: 0; font: inherit; font-size: var(--t-base); color: var(--ink);
  background: var(--paper-1); border: var(--rule-w) solid transparent; border-radius: var(--radius-md);
  padding: 0.6875rem var(--s-3);
}
.ask-own__input:focus { outline: none; border-color: var(--accent); }
.ask-own__fine { font-size: var(--t-xs); color: var(--ink-mid); }
.ask-own__fine a { color: var(--ink-soft); }
.ask-own .sr-only {
  position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- the /who/ hub: one card per profession ---- */
.for-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
@media (max-width: 60rem) { .for-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .for-grid { grid-template-columns: 1fr; } }
.for-card {
  padding: var(--pad-card); border-radius: 1.125rem;
  background: var(--paper-1);
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: background var(--dur) var(--ease);
}
.for-card--lead { grid-column: 1 / -1; }
.for-card--lead .for-card__q { font-size: var(--t-lg); color: var(--ink); }
a.for-card:hover { background: color-mix(in srgb, var(--paper-1), var(--paper-2) 40%); }
.for-card h2, .for-card h3 { font-size: var(--t-md); color: var(--ink); }
.for-card .for-card__q { font-size: var(--t-base); color: var(--ink-soft); line-height: 1.5; margin: 0; }
.for-card p { font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.6; margin: 0; }