/* ==========================================================================
   MAHSEN: pagina/software-op-maat.css
   Wat alleen /software-op-maat draagt, naast publiek.css (design-system.md §6
   en §10). pages/software-op-maat hangt dit blad zelf, via partials/stijlblad
   in @push('stijl'), zodat het ná publiek.css komt en de andere pagina's het
   niet laden.

   Onder dezelfde regels als publiek.css, en op zijn tokens: geen eigen
   tokenblok, geen letter, geen basis (OntwerpregelsTest). Elke selector draagt
   een klasse die alleen deze pagina heeft; de keten, de kolommen en de
   kaders staan in publiek.css, want de home of /prijzen draagt ze ook. Het
   vlak van het bewijs (echt-grens) staat hier sinds 27 september 2026: tot
   dan droeg de home het ook, als vlak in haar walnoten blok.
   ========================================================================== */

/* De kop: vanaf 75rem rechts van de H1 de kaart van een klant in ons
   programma, zoals de waaier in de held van de home (§6, Paginakop). Smaller
   staat ze er niet: op een gsm worden haar kolommen onleesbaar, en onder de
   knop maakte ze de pagina een scherm langer. Naast de kaart staat de zin
   over het gesprek onder de knop en niet ernaast, zoals op een gsm: in de
   smallere kolom brak de knop anders over twee regels. */
.kop-beeld { display: none; }
@media (min-width: 75rem) {
  .kop-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 3.5rem; align-items: start; }
  .kop-beeld { display: block; margin-top: 1.5rem; }
  .held-actie--gestapeld { display: block; }
  .held-actie--gestapeld .onder-knop { max-width: 30rem; margin-top: 0.9rem; }
}

/* De soorten werk: de stippen van publiek.css, met iets meer lucht tussen de
   regels, want elke soort beslaat op een gsm drie of vier regels. */
.soorten { gap: 1rem; }

/* De voorbeelden per vak, in de vraag die dicht staat: het vak vet, en wat wij
   zouden bouwen eronder. Een lijst van termen en geen tabel: twee kolommen
   schoven op een gsm buiten beeld (§6, Prose). */
.vakken { display: grid; row-gap: 0.25rem; }
.vakken dt { font-weight: 700; }
.vakken dd { margin: 0; }
.vakken dd + dt { margin-top: 0.875rem; }

/* Het tweede bewijs, "Wij werken zelf ...": een vlak in walnoot-2 als
   rechterkolom van de walnoten band (§5.7), met het kader erin bleek, want
   een kader in de kleur van zijn vlak is geen kader. In hoog contrast houdt
   het een rand, zoals elk vlak in publiek.css. */
.echt-grens { align-self: start; padding: 26px 24px; border-radius: var(--r-kaart); background: var(--walnoot-2); }
.echt-grens figure { margin-top: 1.5rem; }
.op-donker .echt-grens .kader { background: var(--bleek); }
@media (min-width: 62.5rem) {
  .echt-grens { padding: 34px 32px; }
}
@media (forced-colors: active) {
  .echt-grens { border: 2px solid CanvasText; }
}