/* ===================================================================
   StorageIQ Helpdesk & Kennisbank · vormlaag "Studio"
   Vriendelijk en ruim: zachte lilatinten, grote radii, opgetilde
   kaarten, royale witruimte, langere leesregel. Voor bewoners.
   Laadt ná de basisstijlen en overschrijft alleen vorm, geen structuur.
   =================================================================== */
:root { --r-lg: 22px; --r-md: 16px; }
body { background: #F7F5FB; }
.section { padding-top: clamp(52px,6vw,92px); padding-bottom: clamp(52px,6vw,92px); }
.section--soft { background: #EFEBF8; }
.section-head { max-width: 40ch; }
.section-head .h2 { letter-spacing: -0.04em; line-height: 1.1; }
.lead { font-size: 16.5px; line-height: 1.65; }
.eyebrow { font-size: 10.5px; letter-spacing: 0.16em; }

.card { background: #fff; border: 1px solid rgba(33,16,64,.07); border-radius: 22px; padding: 26px 26px 28px;
  box-shadow: 0 2px 3px rgba(23,9,47,.03), 0 14px 34px -14px rgba(23,9,47,.14); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 4px 6px rgba(23,9,47,.04), 0 26px 52px -18px rgba(23,9,47,.2); }
/* Studio-kaarten zijn altijd wit — ook in een donkere sectie. Daar heeft
   .ctx-dark de tekstvariabelen naar licht gezet, dus de kaart zet de
   lichte context weer terug. Eén plek, alle onderliggende tekst mee. */
.ctx-dark .card { --fg: #211040; --fg-muted: #55447A; --fg-dim: #8677A6;
  --line: rgba(33,16,64,.10); --line-strong: rgba(33,16,64,.16); color: var(--fg); }
.ctx-dark .card:hover { background: #fff; }
.hd-art h4 { font-size: 18px; line-height: 1.28; }
.hd-art p { font-size: 14px; }
.grid.g-3, .grid.g-4 { gap: 18px; }

.hd-search { background: #fff; border: 1px solid rgba(33,16,64,.1); border-radius: 100px; padding: 5px 8px 5px 22px;
  box-shadow: 0 14px 34px -16px rgba(23,9,47,.28); }
.hd-search input { color: #211040; } .hd-search input::placeholder { color: #8B7EA5; }
.hd-search .ico { color: #D6248C; }
.hd-panel { border-radius: 20px; }
.hd-hit { padding: 14px 18px; }
.hd-chip, .hd-chip.alt { border-radius: 100px; padding: 10px 18px; font-size: 13.5px; background: #fff; border-color: rgba(33,16,64,.1); color: #4A3D63; }
.hd-chip:hover { color: #211040; border-color: rgba(33,16,64,.22); }
.hd-chips { gap: 10px; }

.hd-topic { border-radius: 18px; border-color: rgba(33,16,64,.07); padding: 18px 20px; box-shadow: 0 10px 26px -16px rgba(23,9,47,.18); }
.hd-topic .ti { width: 38px; height: 38px; border-radius: 12px; }
.hd-topic { grid-template-columns: 38px 1fr; }
.hd-topics { gap: 16px; }
.hd-dlc { border-radius: 18px; padding: 22px 24px; border-color: rgba(33,16,64,.07); box-shadow: 0 10px 26px -16px rgba(23,9,47,.16); }
.hd-dlc .ft { border-radius: 100px; padding: 5px 11px; background: rgba(214,36,140,.08); border-color: transparent; }
.hd-dlgrid { gap: 16px; }

.step { border-top: 0; padding: 24px; background: #fff; border-radius: 20px; box-shadow: 0 10px 26px -16px rgba(23,9,47,.16); }
.steps { gap: 16px !important; }

/* artikel: leesbaar en luchtig */
.ha-art { max-width: 66ch; }
.ha-body { font-size: 16px; line-height: 1.78; }
.ha-body h2 { font-size: 22px; margin-top: 38px; }
.ha-meta span { border-radius: 100px; background: #fff; border-color: rgba(33,16,64,.08); }
.ha-index { background: #fff; border-radius: 20px; padding: 20px 18px; box-shadow: 0 10px 30px -18px rgba(23,9,47,.2); }
.b-tblwrap { border-radius: 18px; border-color: rgba(33,16,64,.08); background: #fff; }
.b-tbl th { background: #F7F5FB; }
.b-warn, .b-tip { border-radius: 18px; padding: 20px 22px; }
.b-steps { gap: 10px; }
.b-step { border: 1px solid rgba(33,16,64,.07); border-radius: 18px; background: #fff; padding: 18px 20px; grid-template-columns: 36px 1fr; }
.b-step:last-child { border-bottom: 1px solid rgba(33,16,64,.07); }
.figure { border-radius: 20px; }

.wz, .ai { border-radius: 26px; }
.wz-opt, .ai-form textarea { border-radius: 16px; }
.ai-msg.bot .ai-bd { border-radius: 6px 20px 20px 20px; }
.ai-msg.me .ai-bd { border-radius: 20px 20px 6px 20px; }
.btn { border-radius: 100px; }
.ks-router { border-radius: 22px; overflow: hidden; gap: 1px; }