/* Vacaturematch v2: één stylesheet, waarden letterlijk uit het ontwerp (Claude Design).
   Kleuren: ink #2A384E, accent (hover) #985548, focus #1A5B7D, zand #F5F5EF, kiezel #E7E7D9,
   mist #DFEAED, lucht #BACED8, lijn #E1E3E0, staal #4A6287. Grijs is #5F656D in plaats van
   het #7C8188 uit het ontwerp: die haalt op wit (3,9:1), zand en mist geen AA-contrast voor
   de hints en bijschriften van 11-14 px; #5F656D geeft 5,9/5,4/4,8:1.
   Letter: coranto-2 (Typekit) voor lopende tekst en koppen, Barlow voor UI-tekst.
   Huisstijl (UXH-15): brass alleen als hovertoestand, tags en markers in inkt, knoppen met
   de slide-fill uit de brandguide. Uitzondering (besluit 6, 5 oktober 2026): de
   vacaturekaarten volgen topofminds.com/nl/vacatures, inclusief het rode "Nieuw"-label.
   Responsief (besluit 3, 5 oktober 2026, laat): de inhoud benut de breedte tot laptopformaat
   (.wrap 1320px met vloeiende zijmarges), kaarten onder elkaar over de volle breedte (Auke,
   19 oktober 2026; daarvoor 1/2/3 kolommen), met de foto of de consultant rechts vanaf 900 px,
   de drie zijblokken van het dashboard in één rij vanaf 752 px, koppen met clamp(). */

/* Barlow zelf gehost (UXV-6/PB-8): latin-subset, woff2, font-display swap. */
@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/barlow-600.woff2) format('woff2'); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/barlow-700.woff2) format('woff2'); }

:root {
  --ink: #2A384E;
  --accent: #985548;
  --focus: #1A5B7D;
  --sand: #F5F5EF;
  --pebble: #E7E7D9;
  --mist: #DFEAED;
  --sky: #BACED8;
  --grey: #5F656D;
  --line: #E1E3E0;
  --steel: #4A6287;
  --serif: 'coranto-2', Georgia, serif;
  --sans: Barlow, 'Helvetica Neue', Arial, sans-serif;
  --d: calc(100vw * 0.0436);
  --shadow: 0 4px 24px rgba(0, 0, 0, .05);
}

html, body { margin: 0; padding: 0; background: #FFFFFF; color: var(--ink); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; transition: color .15s ease; }
a:hover { color: var(--accent); }
input::placeholder { color: var(--grey); }
input:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Labels die een onzichtbare input omhullen (dropzone, toestemming) tonen de ring alleen bij
   toetsenbordfocus; de segmentopties hebben hun eigen regels verderop. */
.drop:has(.drop__input:focus-visible), .consent:has(.consent__box:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Op de donkere header is #1A5B7D onzichtbaar (1,6:1); wit geeft 11,8:1. */
.hdr a:focus-visible, .hdr button:focus-visible { outline-color: #fff; }
button { font: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Skip-link (UXV-2): onzichtbaar tot toetsenbordfocus, dan bovenaan in beeld. */
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: #fff; color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: 5px; box-shadow: var(--shadow); }
.skip:focus { top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.page {
  font-family: var(--serif);
  font-weight: 400;
  font-feature-settings: 'liga' 1, 'kern' 1;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); width: 100%; }

/* --- koppen en tekst ------------------------------------------------------------------ */
.eyebrow { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--sky); margin-bottom: 18px; }
.eyebrow--app { margin-bottom: 12px; }
.h2 { font-size: clamp(22px, 1.2vw + 14px, 26px); font-weight: 400; margin: 0; text-wrap: pretty; }
.h2--how { margin-bottom: 36px; }
.h2--tight { margin-bottom: 8px; }
.h2--panel { margin-bottom: 20px; }
.hint { font-family: var(--sans); color: var(--grey); margin: 0; }
.hint--upload { font-size: 14px; margin-bottom: 16px; }
.hint--sal { font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.hint--file { font-size: 14px; line-height: 1.55; margin-top: 10px; color: var(--ink); }
.field-title { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .02em; margin: 0 0 4px; padding: 0; }
.field-title--label { display: block; margin-bottom: 6px; }
.field-title__opt { font-weight: 400; color: var(--grey); letter-spacing: 0; }
.fieldset-plain { border: none; padding: 0; margin: 0; min-width: 0; }
.fieldset-plain legend { padding: 0; }
.label { display: block; font-family: var(--sans); font-weight: 600; margin-bottom: 6px; }
.label--muted { font-size: 13px; color: var(--grey); }
.label--account { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--grey); margin-bottom: 8px; }

/* --- header ----------------------------------------------------------------------------- */
.hdr { background: var(--ink); color: #fff; position: relative; z-index: 3; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--d)), 0 100%); }
.hdr--landing { padding: 32px 0 calc(72px + var(--d)); }
.hdr--app { padding: 24px 0 calc(40px + var(--d)); }
/* Merk links, navigatie en taalkeuze rechts; op een smal scherm (zie onderaan) gaat de
   navigatie naar een eigen regel en blijft de taalkeuze naast het merk. */
.hdr__row { display: flex; align-items: center; gap: 24px 28px; flex-wrap: wrap; }
.hdr__brand { display: flex; align-items: center; gap: 16px; color: #fff; text-decoration: none; flex-shrink: 0; margin-right: auto; }
.hdr__brand:hover { color: #fff; }
.hdr__name { font-size: 16px; }
.logo { display: block; flex-shrink: 0; }
.nav { display: flex; align-items: center; gap: 28px; font-family: var(--sans); font-size: 14px; font-weight: 500; flex-wrap: wrap; }
.nav--app { gap: 24px; }
/* Raakvlak van 44 px hoog en breed genoeg voor korte woorden ("Log in") zonder de regel of
   de tussenruimte te veranderen: padding tegen een even grote negatieve marge. */
.nav__link { color: #fff; text-decoration: none; display: inline-block; padding: 14px 8px; margin: -14px -8px; }
.nav__link:hover { color: var(--accent); }
.nav__form { display: inline-flex; margin: 0; }
.nav__btn { background: transparent; border: none; color: #fff; font: inherit; cursor: pointer; padding: 14px 8px; margin: -14px -8px; transition: color .15s; }
.nav__btn:hover { color: var(--accent); }
.lang { display: flex; background: rgba(255, 255, 255, .12); border-radius: 5px; padding: 2px; gap: 2px; margin: 0; }
/* Raakvlak minstens 44 x 44 px (UXV-5). */
.lang__btn { font: inherit; font-size: 12px; font-weight: 600; min-height: 44px; min-width: 44px; padding: 5px 9px; border: none; border-radius: 4px; cursor: pointer; background: transparent; color: #fff; transition: background .15s, color .15s; }
.lang__btn.is-active { background: #fff; color: var(--ink); }
.lang__btn:hover:not(.is-active) { color: var(--sky); }

.hero { max-width: 640px; margin-top: 72px; }
.hero__title { font-size: clamp(32px, 5vw, 44px); line-height: 1.15; margin: 0 0 22px; font-weight: 400; text-wrap: pretty; }
.hero__lead { font-size: 18px; line-height: 1.65; margin: 0 0 32px; color: var(--mist); text-wrap: pretty; }
.app-title { margin-top: 44px; max-width: 760px; }
/* overflow-wrap: een lang woord in de titel (de vacaturetitel op de ontgrendelde pagina) breekt
   af in plaats van de pagina op 390 px zijwaarts te laten scrollen (20 oktober 2026). */
.app-title__h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 0; font-weight: 400; text-wrap: pretty; overflow-wrap: anywhere; }
/* Dashboard (besluit 1): pasfoto uit het CV of initialen links van bovenregel en titel. */
.app-title--avatar { display: flex; align-items: center; gap: 20px; }
.app-title__text { min-width: 0; }
.app-title--avatar .eyebrow--app { margin-bottom: 8px; overflow-wrap: anywhere; }
/* Naam zetten of wijzigen onder de titel (open zolang er geen naam is). */
/* "Naam aanpassen" (6 oktober 2026): kleine link in het zijpaneel "Je CV" die het formulier
   openklapt; de naam zelf komt uit het CV. */
.name-edit { margin-top: 10px; font-family: var(--sans); font-size: 13px; }
.side .name-edit { margin-top: 4px; }
.side .name-edit__summary { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; min-height: 36px; }
.side .name-edit__summary:hover { color: var(--accent); }
.name-edit__summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; width: fit-content; padding-right: 8px; font-weight: 500; opacity: .85; }
.name-edit__summary:hover { opacity: 1; }
.name-edit__form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; }
.name-edit__input { background: #fff; flex: 1 1 200px; width: auto; padding: 11px 12px; }
.name-edit__btn { margin-top: 0; }
.avatar { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; }
.avatar--photo { display: block; object-fit: cover; background: #fff; }
.avatar--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--sky); color: var(--ink); font-family: var(--sans); font-size: 24px; font-weight: 600; letter-spacing: .02em; }

/* --- knoppen ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  padding: 14px 26px; border: none; border-radius: 5px; cursor: pointer; min-height: 44px;
  background: var(--ink); color: #fff; text-decoration: none;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .15s ease;
}
/* Slide-fill uit de brandguide: een brass-vlak schuift van links over de knop. */
.btn::before { content: ''; position: absolute; inset: 0; background: var(--accent); border-radius: inherit; transform: translateX(-101%); transition: transform .15s cubic-bezier(.65, 0, .35, 1); z-index: -1; }
.btn:hover::before { transform: translateX(0); }
.btn:hover { color: #fff; }
.btn--light { background: #fff; color: var(--ink); padding: 14px 28px; gap: 10px; }
.btn--block { width: 100%; padding: 15px 28px; margin-top: 6px; }
.btn--wide { padding: 15px 30px; }
.btn--self { justify-self: start; }
.btn--soft { background: var(--line); color: var(--ink); font-weight: 500; padding: 12px 16px; margin-top: 18px; }
.btn--google { margin-top: 12px; }
.btn--sent { background: var(--mist); color: var(--ink); cursor: default; }
.btn--sent::before { display: none; }
.btn--sent:hover, .btn--sent:disabled { background: var(--mist); color: var(--ink); }
.link-btn { display: inline-flex; gap: 8px; align-items: center; font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 15px 0; color: var(--ink); text-decoration: none; transition: color .15s; }
.link-btn:hover { color: var(--accent); }
.link-btn--small { font-size: 13px; padding: 0; margin-top: 14px; gap: 6px; }

/* --- secties ---------------------------------------------------------------------------- */
.section { position: relative; }
.section--how { background: var(--sand); z-index: 2; margin-top: calc(-1 * var(--d)); padding: calc(56px + var(--d)) 0 calc(56px + var(--d)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--d)), 0 100%); }
.section--start { background: #fff; z-index: 1; margin-top: calc(-1 * var(--d)); padding: calc(56px + var(--d)) 0 72px; }
.section--app { background: var(--sand); z-index: 2; margin-top: calc(-1 * var(--d)); padding: calc(40px + var(--d)) 0 72px; flex: 1; }
.section--email { background: var(--pebble); flex: 1; padding: 40px 0 72px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.step { background: #fff; border-radius: 5px; padding: 28px 26px; box-shadow: var(--shadow); }
.step__n { width: 42px; height: 42px; border-radius: 50%; background: var(--sky); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 20px; }
.step__title { font-size: 19px; margin-bottom: 10px; }
.step__body { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--grey); margin: 0; text-wrap: pretty; }

/* --- start: upload + account ----------------------------------------------------------- */
/* Twee kolommen vanaf ongeveer 820 px; op een tablet in portret (768) staan upload en
   paneel onder elkaar, anders breekt de hoofdknop in het paneel. */
.start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 821px) { .start { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: clamp(40px, 5vw, 72px); } }
.start__left { display: grid; gap: 24px; }
.wrap--notice { margin-bottom: 24px; }
.notice { background: var(--mist); border-radius: 5px; padding: 14px 16px; font-family: var(--sans); font-size: 14px; }

.drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 200px; background: var(--sand); border-radius: 5px; padding: 28px; text-align: center; cursor: pointer;
  box-shadow: inset 1px 1px 4px rgba(42, 56, 78, .12); transition: background .15s;
}
.drop:hover, .drop.is-dragover, .drop.has-file { background: var(--mist); }
.drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop__empty, .drop__filled { display: contents; }
.drop__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--sky); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 20px; }
.drop__icon--done { background: var(--ink); color: #fff; font-size: 18px; }
.drop__title { display: block; font-size: 17px; }
.drop__title--file { overflow-wrap: anywhere; }
.drop__browse { display: block; font-family: var(--sans); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.drop__meta { display: block; font-family: var(--sans); font-size: 13px; color: var(--grey); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input { width: 100%; font-family: var(--sans); font-size: 15px; padding: 13px 14px; border: none; border-radius: 5px; background: var(--sand); color: var(--ink); }
.input--num { font-variant-numeric: tabular-nums; }
.input--white { background: #fff; margin-bottom: 16px; }
.input--grey { background: var(--sand); margin-bottom: 16px; }
/* "Wat zoek je?" (besluit 2): vrije tekst, max 1500 tekens, teller eronder. */
.input--area { display: block; resize: vertical; min-height: 92px; line-height: 1.5; font-family: var(--sans); }
.hint--count { font-size: 12px; margin-top: 6px; text-align: right; font-variant-numeric: tabular-nums; }
.consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-family: var(--sans); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.consent__box { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex-shrink: 0; }
/* "Hoe we je CV gebruiken" (UXP-6): Barlow-lijst met vierkante markers in inkt. */
.howcv { background: var(--sand); border-radius: 5px; padding: 18px 20px; }
.howcv__title { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .02em; margin: 0 0 10px; }
.howcv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-family: var(--sans); font-size: 13px; line-height: 1.55; }
.howcv__list li { position: relative; padding-left: 16px; }
.howcv__list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--ink); }

.panel { background: var(--sand); border-radius: 5px; padding: 32px 30px; }
.panel__note { font-family: var(--sans); font-size: 12px; line-height: 1.55; color: var(--grey); margin: 16px 0 0; text-wrap: pretty; }
.panel__alt { font-family: var(--sans); font-size: 14px; font-weight: 500; margin: 18px 0 0; text-align: center; }
/* E-mailadressen: alleen afbreken als het echt niet past (`anywhere`), niet midden in
   elk adres zoals `break-all` doet. */
.account__who { font-family: var(--sans); font-size: 14px; line-height: 1.55; margin: 0 0 20px; overflow-wrap: anywhere; }

/* Gastmodus (CV eerst, 18 oktober 2026): de melding over de inloglink of het terugvalveld,
   op de verwerkingskaart en in het zijpaneel "Berichten". */
.linkbox { display: grid; gap: 12px; }
.linkbox__sent { display: grid; gap: 10px; }
.linkbox__form { display: grid; gap: 8px; }
.linkbox__title { margin: 0; font-size: 17px; }
.linkbox__form .input--grey { margin-bottom: 4px; }
.linkbox__btn { margin-top: 6px; width: fit-content; }
.linkbox__ask { display: grid; gap: 8px; }
.linkbox__summary { cursor: pointer; display: flex; align-items: center; width: fit-content; min-height: 36px; padding-right: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.linkbox__summary:hover { color: var(--accent); }
.linkbox__other[open] .linkbox__summary { margin-bottom: 6px; }
.note__title { font-family: var(--sans); font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.conf__guest { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--grey); margin: 0; max-width: 260px; text-wrap: pretty; }

.alert { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 5px; padding: 14px 16px; margin-bottom: 14px; }
.alert--grey, .alert--proc { background: var(--sand); }
.alert--proc { padding: 16px 18px; margin: 0; }
.alert--white { background: #fff; margin-bottom: 22px; }
.alert__dot { width: 6px; height: 6px; background: var(--ink); flex-shrink: 0; margin-top: 8px; }
.alert__dot--ink { margin-top: 9px; }
.alert__text { font-family: var(--sans); font-size: 14px; line-height: 1.55; margin: 0; text-wrap: pretty; }
.alert__stack { display: grid; gap: 6px; }
.alert__title { font-size: 17px; }

/* --- kaarten (verwerking, voorkeuren, inloggen) --------------------------------------- */
.card { background: #fff; border-radius: 5px; }
/* Verwerking (besluit 2, 6 oktober 2026): links de voortgang, rechts de tabel "Wat we uit je
   CV halen"; onder 821 px onder elkaar (tabel onder de voortgang). */
.proc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
/* Het profieloverzicht rechts mag breder zijn dan de oude tabel (loopbaan met omschrijvingen):
   de voortgang houdt 560 px, de rest is voor het overzicht. */
@media (min-width: 821px) { .proc { grid-template-columns: minmax(0, 560px) minmax(320px, 1fr); gap: 24px; } }
/* Onder elkaar (tablet, telefoon): het overzicht even breed als de voortgangskaart erboven. */
@media (max-width: 820px) { .card--proc-profile { max-width: 620px; } }
.card--proc { max-width: 620px; padding: 32px; display: grid; gap: 22px; }
.card--proc-profile { padding: 24px 28px; display: grid; gap: 18px; align-content: start; }
.proc-profile__title { margin: 0; font-size: 13px; }
.proc-profile__wait { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--grey); margin: 0; text-wrap: pretty; }
.summary--proc { gap: 12px 16px; }
.summary--proc .summary__value { font-size: 14px; }
/* Profieloverzicht (6 oktober 2026, 00:30): samenvatting cursief in coranto, loopbaan als
   tijdlijn (lijn met stippen), opleidingen als lijst, kernvaardigheden, branchekennis en
   internationaal als tags. Volledig op de verwerkingspagina, compact in "Je ervaring". */
.profile-summary { margin: 0; font-size: 16px; line-height: 1.55; font-style: italic; color: var(--ink); text-wrap: pretty; }
.profile-summary--side { font-size: 15px; margin: 0 0 12px; }
.proc-profile__section { display: grid; gap: 8px; }
.proc-profile__subtitle { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--grey); margin: 0; }
.timeline { list-style: none; margin: 0; padding: 2px 0 0 18px; border-left: 2px solid var(--pebble); display: grid; gap: 14px; }
.timeline__item { position: relative; min-width: 0; }
.timeline__item::before { content: ''; position: absolute; left: -24px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.timeline__title { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.timeline__meta { font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--grey); display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; overflow-wrap: anywhere; }
.timeline__desc { font-family: var(--sans); font-size: 13px; line-height: 1.5; margin: 4px 0 0; color: var(--ink); text-wrap: pretty; }
.edu { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.edu__item { display: grid; gap: 1px; min-width: 0; }
.edu__name { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.edu__meta { font-family: var(--sans); font-size: 12px; color: var(--grey); overflow-wrap: anywhere; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.3; padding: 5px 9px; border-radius: 4px; background: var(--sand); color: var(--ink); overflow-wrap: anywhere; }
/* Compact in het zijpaneel: loopbaan (met opleidingen, branchekennis, internationaal) achter
   "Toon loopbaan" als details/summary; kernvaardigheden als tags eronder. */
.career { margin-top: 12px; font-family: var(--sans); font-size: 13px; }
.career__summary { cursor: pointer; display: flex; align-items: center; width: fit-content; min-height: 36px; padding-right: 8px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.career__summary:hover { color: var(--accent); }
.career__body { display: grid; gap: 14px; padding: 6px 0 4px; }
.side .timeline__title { font-size: 15px; }
.side__tags { margin-top: 12px; display: grid; gap: 6px; }
.card--dev { max-width: 620px; padding: 20px 32px; margin-top: 16px; }
.card__text { font-family: var(--sans); font-size: 14px; line-height: 1.6; margin: 0; text-wrap: pretty; }
.card__text--muted { color: var(--grey); }
.kv { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--sans); font-size: 14px; }
.kv__k { color: var(--grey); }
.kv__v { font-weight: 500; overflow-wrap: anywhere; }
.grid-dev { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.dev-link { font-family: var(--sans); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; display: inline-block; padding: 12px 0; margin: -12px 0; }

.proc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.proc__status { margin: 0; font-size: 19px; }
.proc__pct { font-family: var(--sans); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--grey); }
.proc__hint { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--grey); margin: 0; text-wrap: pretty; }
.bar { height: 6px; background: var(--pebble); border-radius: 3px; overflow: hidden; }
/* Besluit 7: de breedte wordt elke 250 ms bijgewerkt; een korte lineaire overgang maakt
   het vloeiend. Bij prefers-reduced-motion vervalt de overgang (zie onderaan), de voortgang blijft. */
.bar__fill { height: 100%; background: var(--ink); border-radius: 3px; transition: width .3s linear; }
.bar__fill--failed { background: var(--grey); }
.phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.phase { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 14px; color: var(--grey); }
.phase__mark { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; background: var(--pebble); color: var(--ink); }
.phase--done { color: var(--ink); }
.phase--done .phase__mark { background: var(--ink); color: #fff; }
.phase--current, .phase--failed { color: var(--ink); font-weight: 600; }
.phase--current .phase__mark, .phase--failed .phase__mark { background: var(--sky); }

.note { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 5px; padding: 16px 20px; margin-bottom: 28px; box-shadow: var(--shadow); }
.note--flat { background: var(--sand); box-shadow: none; margin: 0; }
.note__icon { width: 34px; height: 34px; border-radius: 50%; background: var(--sky); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 15px; flex-shrink: 0; }
.note__text { font-family: var(--sans); font-size: 14px; line-height: 1.55; margin: 0; text-wrap: pretty; }

.actions { display: flex; align-items: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; }
.actions--card { margin-top: 0; }
.actions .btn--soft { margin-top: 0; }

/* --- dashboard -------------------------------------------------------------------------- */
.dash { display: grid; gap: 36px; }
.dash__main { display: grid; gap: 44px; min-width: 0; }
/* Drie zijkaarten naast elkaar vanaf 752 px (op 768 px, tablet in portret, past 3 x 220 + 2 x 16
   in de 707 px inhoud), daaronder onder elkaar. Niet aan auto-fit overlaten: tussen ongeveer 500
   en 750 px zou dat twee kaarten naast elkaar en de derde alleen op halve breedte geven. */
/* Besluit Auke 18 oktober 2026: de blokken Je ervaring, Berichten en Je CV staan onder de
   matches (documentvolgorde, geen order); de matches komen direct onder de kop. */
.dash__aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* De regel direct onder de kop: aantal matches, in gastmodus plus de inloglink in één zin. */
.dash__result { font-family: var(--sans); font-size: 15px; line-height: 1.55; margin: -8px 0 -12px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; text-wrap: pretty; }
.dash__result-count { font-weight: 700; }
.dash__result-link { color: var(--grey); font-size: 14px; }
.dash__result-link a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 8px 0; margin: -8px 0; }
.dash__result-link a:hover { color: var(--accent); }
.few { background: #fff; border-radius: 10px; padding: 16px 22px; font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--grey); margin: 0; text-wrap: pretty; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.sec-head--conf { margin-bottom: 10px; }
.count { font-family: var(--sans); font-size: 13px; font-weight: 700; background: var(--mist); padding: 3px 9px; border-radius: 5px; }
.count--ink { background: var(--ink); color: #fff; }
.conf-intro { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--grey); margin: 0 0 20px; max-width: 560px; text-wrap: pretty; }
/* Kaarten onder elkaar in één kolom over de volle breedte, ook op desktop (Auke, 19 oktober
   2026, na zijn eigen test: smalle kolommen naast elkaar lazen slecht). Dit vervangt besluit 3
   (1/2/3 kolommen). De lopende tekst blijft met .story op ongeveer 75 tekens per regel. */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

/* --- vacaturekaart als op topofminds.com/nl/vacatures ------------------------------------
   Waarden uit de CSS van de site (.job-result, 5 oktober 2026): witte kaart, radius 10px
   (--card-border-radius), geen schaduw in rust, bij hover 4px 4px 14px 2px rgba(42,56,78,.2);
   inhoud met padding 44px 20px 0 en een raster logo (80px) / titel / tekst met 16px
   tussenruimte; titel coranto 26px/1.1 (24px onder 768px); intro 15px/22.5px (.text-small);
   lijst met vierkante markers van 7px in rgba(26,91,125,.3); "Nieuw" rechtsboven in
   brass (#985548) met witte tekst, radius 0 10px; foto 34:23 met een witte schuine snede
   bovenin (aspect 25:2) en bij hover een pijlknop van 48px in inkt rechtsonder plus een
   lichtblauwe wig; de hele kaart is één link (overlay). */
.job { position: relative; background: #fff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s; }
.job__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
/* Schaduw en focusring staan op de kaart zelf: `overflow: hidden` knipt alles van de
   kinderen weg wat buiten de kaart valt, dus op de overlay-link zou je ze nooit zien. De
   focusring volgt alleen toetsenbordfocus (:focus-visible), zoals de regel bovenaan. */
.job:hover, .job:focus-within { box-shadow: 4px 4px 14px 2px rgba(42, 56, 78, .2); }
.job:has(.job__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tag-new { position: absolute; top: 0; right: 0; z-index: 2; background: var(--accent); color: #fff; font-family: var(--serif); font-size: 16px; line-height: 1; padding: 8px 10px; border-radius: 0 10px; }
/* Reeds ingevuld (ter inspiratie): zelfde plek en vorm als "Nieuw", in gedempt grijs. */
.tag-filled { position: absolute; top: 0; right: 0; z-index: 2; background: var(--grey); color: #fff; font-family: var(--serif); font-size: 16px; line-height: 1; padding: 8px 10px; border-radius: 0 10px; }
.sec-head--insp { margin-bottom: 10px; }
/* Een ingevulde kaart zonder url is geen link: geen schaduw of wig bij hover. */
.job--filled:not(:has(.job__link)):hover { box-shadow: none; }
.job--filled:not(:has(.job__link)):hover .job__image::before { transform: translateY(100%); }
.job--filled:not(:has(.job__link)):hover .job__image img { transform: none; }
.job__content { position: relative; z-index: 1; display: grid; grid-template-rows: 80px auto; gap: 16px; padding: 44px 20px 20px; flex-grow: 1; }
.job__logo { width: 200px; max-width: 100%; height: 80px; display: flex; align-items: center; }
.job__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
/* Zonder logo: de organisatienaam klein in Barlow op de plek van het logo. */
.job__eyebrow { height: 80px; display: flex; align-items: center; }
.job__org { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--steel); }
.job__text { display: grid; gap: 14px; align-content: start; }
.job__title { font-size: clamp(22px, 1.2vw + 14px, 26px); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: pretty; }
/* Besluit 4: één tekst per kaart. Het verhaal van de Matcher (coranto 16px), daaronder de
   aandachtspunten als klein blok in zand met een Barlow-kopje. Zonder toelichting de intro
   (terugval), en zonder intro de door code samengestelde reden in grijs. */
.job__story { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
/* De tekst in delen met subkopjes (19 oktober 2026): "Over de rol", "Waarom dit bij je past",
   "Aandachtspunten". Maximaal 35em (ongeveer 75 tekens) per regel. Een vertrouwelijke kaart
   toont "Over de rol" (de teaser) altijd, ook naast de toelichting (20 oktober 2026). */
.story { display: grid; gap: 18px; max-width: 35em; font-size: 16px; }
.story__part { display: grid; gap: 4px; }
.story__head { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--grey); margin: 0; }
.attention { display: grid; gap: 4px; padding: 12px 14px; background: var(--sand); border-radius: 5px; }
.conf .attention { background: #fff; }
.attention__title { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--grey); margin: 0; }
.attention__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.job__summary { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.job__summary--code { color: var(--grey); }
.facts { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 2px 22px; }
.facts__item::before { content: ''; display: inline-block; width: 7px; height: 7px; background: rgba(26, 91, 125, .3); margin: 0 10px 2px 0; }
.job__summary + .facts { margin-top: 0; }
/* Sterren met label (besluit 5: "Sterke match" of "Mogelijke match"), onder de titel. */
.stars { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); }
.stars__glyphs { font-size: 15px; letter-spacing: .04em; }
.stars__glyphs--plain { font-size: inherit; }
/* Foto onderaan met de schuine bovensnede; zonder foto een rustige onderbalk in mist. */
.job__image { position: relative; overflow: hidden; display: flex; justify-content: flex-end; align-items: flex-end; aspect-ratio: 34 / 23; max-height: 320px; margin-top: auto; }
/* Kaart zonder beeld: witte voet met ruimte voor de pijlknop, geen gekleurd vlak. */
.job__foot { position: relative; margin-top: auto; height: 72px; }
.job__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .3s; transform-origin: center bottom; }
.job__image::after { content: ''; position: absolute; left: 0; top: -.5px; width: calc(100% + 1px); aspect-ratio: 25 / 2; background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none; z-index: 1; }
.job__image::before { content: ''; position: absolute; right: -1px; bottom: -1px; height: 60px; width: 40%; background: var(--mist); clip-path: polygon(0 calc(100% - 1px), 100% 0, 100% 100%, 0 100%); transform: translateY(100%); transition: transform .3s; pointer-events: none; z-index: 1; }
.job__arrow { position: absolute; right: 20px; bottom: 20px; z-index: 2; width: 48px; height: 48px; padding: 14px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; border-radius: 5px; opacity: 0; transform: translateY(100%); transition: transform .3s, opacity .3s; pointer-events: none; }
.job:hover .job__image::before, .job:focus-within .job__image::before { transform: translateY(10px); }
.job:hover .job__arrow, .job:focus-within .job__arrow { opacity: 1; transform: translateY(0); }
.job:hover .job__image img { transform: scale(1.02); }

.conf { position: relative; background: var(--mist); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.conf__body { padding: 44px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.conf .tag-new { background: var(--ink); }
.conf__label { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.conf__dot { width: 6px; height: 6px; background: var(--ink); }
.conf__text { display: grid; gap: 14px; }
.conf__title { font-size: clamp(22px, 1.2vw + 14px, 26px); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: pretty; }
/* Sector en regio uit de teaser direct onder de kop, zodat twee searches in hetzelfde vak
   herkenbaar verschillen (19 oktober 2026). */
.conf__subtitle { margin: -6px 0 0; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--steel); text-wrap: pretty; }
.conf__summary { margin: 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.conf__foot { margin-top: auto; background: #fff; clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%); padding: 72px 20px 24px; display: grid; gap: 18px; }
.conf__foot form { margin: 0; display: grid; }
.consultant { display: flex; align-items: center; gap: 14px; }
.consultant__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.consultant__initials { width: 56px; height: 56px; border-radius: 50%; background: var(--sky); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 18px; font-weight: 600; flex-shrink: 0; }
.consultant__name { font-size: 17px; }
.consultant__role { font-family: var(--sans); font-size: 13px; color: var(--grey); }

/* Brede kaart vanaf 900 px (19 oktober 2026): links de tekst, rechts de foto (openbaar) of de
   consultant met de knop (vertrouwelijk). De schuine snede van de site staat dan links van dat
   vlak in plaats van erboven. Zonder foto blijft de kaart één kolom met de voet eronder. */
@media (min-width: 900px) {
  .job__content { padding: 44px 40px 32px; }
  .job--with-image { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 32%, 420px); }
  .job--with-image .job__image { aspect-ratio: auto; max-height: none; min-height: 240px; margin-top: 0; }
  .job--with-image .job__image::after { top: 0; left: -.5px; width: 56px; height: 100%; aspect-ratio: auto; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .conf { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 32%, 420px); }
  .conf__body { padding: 44px 40px 32px; }
  .conf__foot { margin-top: 0; clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%); padding: 44px 32px 32px 80px; align-content: start; }
}

.empty { background: #fff; border-radius: 10px; padding: 40px 32px; text-align: center; }
.empty__dot { width: 48px; height: 48px; border-radius: 50%; background: var(--sky); margin: 0 auto 18px; }
.empty__title { font-size: 19px; font-weight: 400; margin: 0 0 10px; }
.empty__body { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--grey); margin: 0; text-wrap: pretty; }
.empty__btn { margin-top: 20px; justify-self: center; }

/* Compact: de drie blokken onder de matches mogen weinig hoogte kosten. */
.side { background: #fff; border-radius: 5px; padding: 18px 20px; }
.side__title { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--grey); margin-bottom: 10px; }
.side__title--tight { margin-bottom: 8px; }
.side__title--inline { margin: 0; }
.side__value { font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.side__sub { font-family: var(--sans); font-size: 13px; color: var(--grey); line-height: 1.5; overflow-wrap: anywhere; }
.side__sub--lead { margin: -6px 0 10px; }
/* Wensen als <details>: korte staan open, lange dicht achter de kop; nooit afgekapt zonder
   handeling (de hele tekst staat in de pagina). */
.wishes { margin-top: 12px; }
.wishes__summary { cursor: pointer; margin: 0 0 4px; }
.side__wishes { font-family: var(--sans); font-size: 13px; line-height: 1.5; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
/* Berichtfrequentie als klein formulier (de voorkeurenstap is vervallen); de keuzes naast
   elkaar zolang ze passen. */
.freq { display: grid; gap: 8px; margin: 0 0 8px; }
.freq__opts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.freq__opt { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; min-height: 28px; }
.freq__input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.freq__row { display: flex; align-items: center; gap: 12px; }
.btn--freq { margin-top: 0; }
.freq__saved { font-family: var(--sans); font-size: 13px; color: var(--grey); }
.side__text { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--grey); margin: 4px 0 10px; text-wrap: pretty; }
.side__links { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--sans); font-size: 13px; font-weight: 500; }
/* "Je ervaring" in twee kolommen: zes regels kosten zo drie regels hoogte. */
.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.summary__row { display: grid; gap: 1px; min-width: 0; }
.summary__label { font-family: var(--sans); font-size: 12px; color: var(--grey); }
.summary__value { font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; margin: 0; overflow-wrap: anywhere; }

/* --- e-mailvoorbeeld -------------------------------------------------------------------- */
.email-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.email-head .link-btn { padding: 0; gap: 6px; }
.email-frame { max-width: 620px; margin: 0 auto; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, .08); }
.email-meta { padding: 18px 28px; display: grid; gap: 4px; font-family: var(--sans); font-size: 13px; color: var(--grey); background: #FAFAFA; }
.email-meta__k { display: inline-block; width: 70px; }
.email-meta__v { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

/* --- footer ----------------------------------------------------------------------------- */
.footer { background: #fff; padding: 48px 0 40px; box-shadow: inset 0 1px 0 var(--line); margin-top: auto; }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: 20px; }
.footer__name { font-size: 16px; }
.footer__tag { font-size: 14px; text-align: right; flex-shrink: 0; }
.footer__tag-b { font-family: var(--sans); font-weight: 700; }
.footer__meta { display: flex; gap: 28px; margin-top: 16px; font-family: var(--sans); font-size: 11px; color: var(--grey); flex-wrap: wrap; }
.footer__link { color: var(--grey); }

/* --- smal scherm ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* Header in twee regels: merk met taalkeuze, daaronder de navigatie. */
  .hdr__row { gap: 20px 24px; }
  .nav { order: 2; flex-basis: 100%; gap: 24px; }
  .lang { order: 1; }
  .lang__btn { padding: 9px 12px; }
  /* Raakvlakken: minstens 44 px voor de frequentiekeuze en de losse tekstlinks. */
  .freq__opt { min-height: 44px; }
  /* Pasfoto kleiner naast de titel. */
  .avatar { width: 56px; height: 56px; }
  .avatar--initials { font-size: 20px; }
  .link-btn--small, .footer__link, .email-head .link-btn { display: inline-block; padding: 16px 0; margin: -16px 0; }
  .link-btn--small { margin-top: 0; }
  /* De twee cv-links onder elkaar als blokken met echte padding: met een negatieve marge
     overlapten hun raakvlakken elkaar zodra ze op twee regels kwamen (een tik laag op
     "Nieuw CV uploaden" opende dan de verwijderpagina). */
  .side__links { flex-direction: column; gap: 0; }
  .side__links a { display: block; padding: 14px 0; margin: 0; }
  /* iOS zoomt in op een invoerveld met een letter kleiner dan 16 px. */
  .input { font-size: 16px; }
  .proc__head { flex-wrap: wrap; }
}
@media (max-width: 751px) {
  .dash__aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .grid-2 { grid-template-columns: 1fr; }
  .panel { padding: 26px 20px; }
  .card--proc { padding: 24px 20px; }
  .card--proc-profile { padding: 20px; }
  .conf__foot { padding: 64px 20px 24px; }
  .footer__tag { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Getrapt proces voor vertrouwelijke vacatures (18 oktober 2026): vragen, NDA, wachten en de
   ontgrendelde vacature. Zelfde kaart als de verwerkingspagina; teksten behouden hun regels. */
/* Smal scherm (browsertest 20 oktober 2026: op 390 px liep de verklaring rechts af, clientWidth
   274 bij scrollWidth 393). Een grid zonder kolomdefinitie groeit mee met het langste woord;
   met minmax(0, 1fr) blijft de kolom binnen de kaart en breken lange woorden (samenstellingen,
   adressen, invullijnen, URL's) af, zodat niets rechts wegvalt en de pagina niet zijwaarts
   scrollt. Geldt voor elke pagina van het getrapte proces. */
.card--trap { max-width: 720px; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.card--trap > * { min-width: 0; max-width: 100%; }
.trap__teaser { margin: 0; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--grey); }
.trap__question { display: grid; gap: 4px; }
.trap__hint { margin: 0; font-family: var(--sans); font-size: 13px; color: var(--grey); }
.trap__form { display: grid; gap: 16px; }
.trap__text { white-space: pre-line; }
.trap__org { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 600; }
.trap__quote { margin: 0; padding: 0 0 0 16px; border-left: 3px solid var(--sky); font-size: 17px; line-height: 1.5; }
.trap__quote p { margin: 0; }
.trap__quote-by { margin-top: 6px; font-family: var(--sans); font-size: 13px; color: var(--grey); }
/* Eigen NDA-module: de verklaring op de tekenpagina, in een kader dat zelf scrollt, en
   "Niet ondertekenen" als knop (POST) die eruitziet als een link. */
.trap__nda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 100%; max-height: 60vh; overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: 4px; }
.trap__nda .h2, .trap__nda p { margin: 0; }
.trap__nda > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.link-btn--plain { background: none; border: 0; cursor: pointer; text-decoration: underline; }
@media (max-width: 480px) {
  .card--trap { padding: 24px 20px; }
}