/* De verfijnde laag (besluit 23-09-2026, sitebreed): een mix van plat en licht zwevend. De grote kleurvlakken blijven plat; kleine
   elementen (chatballonnen, icoontegels, labels, lichte kaarten) krijgen wit met een hairline (ink 10%) en een heel zachte schaduw,
   zoals de resultaattegels op het casedetail en de labels op Succesverhalen. Op donkere vlakken: wit op 7% met een hairline op 16%.
   Klasse .verfijnd staat op elke <body>; dit bestand laadt na volwassen.css. Gekleurde accenten (paarse ballonnen, Publish, lime
   icoontegels) blijven bewust plat, zodat het niet één vlakke laag wordt. */
.verfijnd {
  --vf-vlak: var(--white);
  --vf-lijn: rgba(29, 29, 27, 0.1);
  --vf-zweef: 0 1px 2px rgba(29, 29, 27, 0.04), 0 8px 20px rgba(29, 29, 27, 0.06);
  --vf-donker-vlak: rgba(253, 254, 255, 0.07);
  --vf-donker-lijn: rgba(253, 254, 255, 0.16);
}
/* Probleemblok: de mist-ballonnen worden wit met hairline en zweven licht; de paarse blijven plat als accent. */
.verfijnd .bubbles li:nth-child(odd) { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
/* Waaromblok (mist, sinds 24-09-2026): de icoontegel heeft de kleur van de kaart ernaast (lime, paars, wit), zodat tekst en kaart
   bij elkaar horen. Lime en paars blijven plat als accent; de witte tegel krijgt hairline en zachte schaduw. */
.verfijnd .reden-icoon { background: var(--lime); color: var(--ink); box-shadow: none; }
.verfijnd .r-jaar .reden-icoon { background: var(--purple); color: var(--white); }
.verfijnd .r-huisstijl .reden-icoon { background: var(--vf-vlak); color: var(--ink); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
/* Zichtbaarheidsblok: het oog-icoon op de witte tegel als omlijnd vlak met paars icoon. */
.verfijnd .t-herken .tegel-icoon { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); color: var(--purple); }
/* Voor-wie-blok (mist): de beroepen als witte labels met hairline. */
.verfijnd .wie-beroepen li { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); font-weight: 700; }
/* Autoriteitsblok: de labels op de ontwerptafel en de post krijgen een hairline bij hun schaduw. */
.verfijnd .regie-label { box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--schaduw); }
/* Voorbeeldenblok: hairline om de posts. */
.verfijnd .vb-post { box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--schaduw); }
/* Reviewblok: de twee lichte kaarten wit met hairline en zachte schaduw; de paarse blijft plat. */
.verfijnd .reviews > li:not(:nth-child(2)) { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
/* Pakkettenblok: Create en Grow wit met hairline; Publish blijft paars. De icoontegels omlijnd met het icoon in kleur. */
.verfijnd .pakket-fields > li:not(.f-publish) { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
.verfijnd .pakket-fields > li:not(.f-publish) .pakket-icoon { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); color: var(--purple); }
.verfijnd .f-publish .pakket-icoon { background: var(--vf-donker-vlak); box-shadow: inset 0 0 0 1px var(--vf-donker-lijn); color: var(--white); }
/* Teamblok: de naamsticker bij hover met hairline. */
.verfijnd .lineup .tag { box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--schaduw); }

/* ---------- Sitebreed ---------- */
/* Verder kijken: witte kaarten met hairline. */
.verfijnd .link-cards a { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
/* Wat kan, Oplossingen, Plan een demo: de tegels met icoon wit met hairline; de icoontegels omlijnd met het icoon in zijn kleur
   (paars, ink); de lime tegel blijft plat als accent. */
.verfijnd .levert-tegels li { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
.verfijnd .levert-tegels li:nth-child(3n + 1) .tegel-icoon { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn); color: var(--purple); }
.verfijnd .levert-tegels li:nth-child(3n) .tegel-icoon { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn); color: var(--ink); }
.verfijnd .probleem-tegels .pt-1, .verfijnd .probleem-tegels .pt-4 { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
/* Pagina's uit Sections.astro (Is het iets voor jou): mist-lijsten en kaarten wit met hairline; labels met hairline. */
.verfijnd .lijst.t-mist, .verfijnd .lijst.t-lime, .verfijnd .kaarten > li:not(.is-quote > li) { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
.verfijnd .kaarten.is-quote > li:nth-child(4n + 1) { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
.verfijnd .tags li:nth-child(3n + 2) { box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
/* De Monkeys: de afdelingen als witte kaarten met hairline. */
.verfijnd .dept-grid li { box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
/* Labels op foto's (fototegels, hero-tegel) en de kaarten op de werkbladen. */
.verfijnd .wie-naam, .verfijnd .hero-wk-foto figcaption { box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
.verfijnd .bc-tegel, .verfijnd .afspraak { box-shadow: inset 0 0 0 1px var(--vf-lijn), 0 14px 34px rgba(29, 29, 27, 0.14); }
/* Succesverhalen: de review op de kaart en de kaarten "Meer succesverhalen" wit met hairline. */
.verfijnd .case-review, .verfijnd .sv-meer-lijst a { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
/* Kennisbank: vraagkaarten en het directe antwoord wit met hairline (de paarse rand blijft). */
.verfijnd .kb-kaart { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
.verfijnd .kb-kaart:has(a:hover), .verfijnd .kb-kaart:has(a:focus-visible) { box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--schaduw); }
.verfijnd .kb-direct { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
/* Plan een demo: de weekpijlen en het gekozen moment wit met hairline; de agenda-kaart met hairline. De posts zijn paars en het demoblok lime (site.css). */
.verfijnd .agenda { box-shadow: inset 0 0 0 1px var(--vf-lijn), 0 1px 2px rgba(29, 29, 27, 0.06), 0 24px 60px rgba(29, 29, 27, 0.16); }
.verfijnd .agenda-pijl, .verfijnd .dialog-sluit { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn); }
.verfijnd .agenda-pijl:hover:not(:disabled) { background: var(--mist); }
.verfijnd .form-moment { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn); }
/* Over Whoosh! Studio: de labels bij "Waarom" en de missie- en visiekaarten. */
.verfijnd .over-mist li { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
.verfijnd .over-mv-kaarten li { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn), var(--vf-zweef); }
.verfijnd .over-mv-kaarten .mv-icoon-1 { background: var(--vf-vlak); box-shadow: inset 0 0 0 1px var(--vf-lijn); } /* de ink-tegel van de visie blijft plat als accent */

/* ---------- Dubbele check (23-09-2026): dezelfde soort vlakken, dezelfde stijl ---------- */
/* Hairline via outline: dan blijft de eigen schaduw van het element staan. Outline volgt de hoekradius in alle moderne browsers. */
/* Werkbladen (de illustratiepanelen met puntenraster) en de kaartjes erop. De vervaagde zoekbalk blijft bewust zonder rand. */
.verfijnd .werkblad, .verfijnd .r-huisstijl .reden-beeld, .verfijnd .regie { outline: 1px solid var(--vf-lijn); outline-offset: -1px; }
.verfijnd .v-posts span, .verfijnd .regie-post, .verfijnd .url-jij, .verfijnd .url-core, .verfijnd .adv-post { outline: 1px solid var(--vf-lijn); outline-offset: -1px; }
/* Stap 1 in het stappenblok (mist) en de optelsom op Pricing. */
.verfijnd .stap.s1, .verfijnd .optelsom { outline: 1px solid var(--vf-lijn); outline-offset: -1px; }
/* De twee witte tegels in het zichtbaarheidsblok, zoals de missie- en visiekaarten: hairline en zachte schaduw op het paars. */
.verfijnd .tegel.t-herken, .verfijnd .tegel.t-belofte { outline: 1px solid var(--vf-lijn); outline-offset: -1px; box-shadow: 0 1px 2px rgba(29, 29, 27, 0.06), 0 12px 32px rgba(29, 29, 27, 0.14); }

/* ---------- Pijlen en knoppen (23-09-2026) ---------- */
/* Pijlen van de hero en de Monkey-showcase: afgeronde vierkanten van glas met hairline en zachte schaduw, zoals het hamburgervakje. */
.verfijnd .hero-controls button { border: 0; border-radius: 0.625rem; background: rgba(253, 254, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.38), 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .verfijnd .hero-controls button:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.22); } }
/* Knoppen: geen extra rand of schaduw (geprobeerd en op verzoek weer weggehaald, 23-09-2026). Ze blijven plat zoals in de volwassen laag. */