/* Demo-/e-mailformulier en demodashboard. Zelfstandig (eigen kleuren), zodat het op elke pagina werkt:
   product-, dienst-, prijzen- en praktijkpagina's, homepage, Growth System en blog. HTML: lib/lead-form-html.js */
.lead-sec, .dd-sec { font-family: 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif; color: #0A0A0A; }
.lead-sec { padding: 72px 0 88px; }
.dd-sec { padding: 88px 0; background: #F3EEE4; }
.lead-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.lead-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FF5722; margin: 0 0 14px; }
.lead-sec h2, .dd-sec h2 { font-size: 40px; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; margin: 0; }
.lead-sec h2 em, .dd-sec h2 em { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-weight: 500; color: #FF5722; }

/* Formulier */
.lead-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: start; border-radius: 24px; padding: 56px; background: linear-gradient(135deg, #FF5722 0%, #FF7A45 55%, #FF9466 100%); color: #fff; position: relative; overflow: hidden; }
.lead-card::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255,255,255,.1); left: -180px; bottom: -220px; pointer-events: none; }
.lead-copy { position: relative; z-index: 1; }
.lead-copy .lead-eyebrow { color: rgba(255,255,255,.85); }
.lead-copy h2, .lead-copy h2 em { color: #fff; }
.lead-copy > p { font-size: 17.5px; line-height: 1.55; color: rgba(255,255,255,.92); margin: 14px 0 0; }
.lead-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-weight: 600; }
.lead-list li { display: flex; gap: 10px; align-items: center; margin: 0; padding: 0; }
.lead-list li::before { content: none; }
.lf-ico { width: 18px; height: 18px; stroke-width: 2.6; flex: none; }
.lead-alt { font-size: 15px; margin-top: 22px !important; }
.lead-alt a { color: #fff; font-weight: 700; text-decoration: underline; }
.lead-form { position: relative; z-index: 1; background: #fff; color: #0A0A0A; border-radius: 18px; padding: 26px; display: grid; gap: 14px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.35); text-align: left; }
.lead-form label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: #0A0A0A; margin: 0; }
.lead-form .lf-l i { font-style: normal; font-weight: 500; color: #5C5C5C; }
.lead-form input:not([type=checkbox]), .lead-form select, .lead-form textarea { font: inherit; font-size: 16px; font-weight: 400; padding: 11px 13px; border: 1px solid #E5DFD2; border-radius: 10px; background: #FBF9F5; color: #0A0A0A; width: 100%; box-sizing: border-box; margin: 0; -webkit-appearance: none; appearance: none; }
.lead-form select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5C5C' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: 2px solid #FF5722; outline-offset: 1px; background-color: #fff; }
.lead-form .lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-form .lf-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: #5C5C5C; font-size: 13px; }
.lead-form .lf-check input { margin-top: 2px; accent-color: #FF5722; width: 16px; height: 16px; flex: none; }
.lead-form .lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lf-btn { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15.5px; color: #fff; background: #FF5722; padding: 14px 22px; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(255,87,34,.7); }
.lf-btn:hover { background: #E64A1A; }
.lf-btn[disabled] { opacity: .6; cursor: default; }
.lf-msg { margin: 0; font-size: 14px; font-weight: 600; }
.lf-msg.ok { color: #2E7A47; } .lf-msg.err { color: #C0392B; }
.lf-small { margin: 0; font-size: 12.5px; color: #5C5C5C; line-height: 1.5; }
.lf-small a { color: #5C5C5C; }
.lead-form.sent label, .lead-form.sent button, .lead-form.sent .lf-row { display: none; }
.lead-form.sent .lf-msg { font-size: 17px; padding: 18px 0; }
.calc-form { background: transparent; box-shadow: none; padding: 0; margin-top: 18px; gap: 10px; color: inherit; }
.calc-form label, .calc-form .lf-check { color: rgba(255,255,255,.85); }
.calc-form .lf-l i { color: rgba(255,255,255,.55); }
.calc-form input:not([type=checkbox]) { background: #fff; }
.calc-form .lf-btn { justify-self: stretch; }

/* Demodashboard: een appvenster dat eruitziet als het echte product */
.dd-sec { background: linear-gradient(180deg, #F6F2EA 0%, #EFE8DC 100%); }
.dd-head { max-width: 680px; margin-bottom: 36px; }
.dd-head h2 { font-size: 40px; }
.dd-head > p { color: #5C5C5C; font-size: 17px; line-height: 1.6; margin: 14px 0 0; }
.dd-window { border-radius: 18px; background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 50px 90px -40px rgba(60,35,15,.45), 0 0 0 1px rgba(60,35,15,.08); overflow: hidden; }
.dd-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #F7F4EF; border-bottom: 1px solid #ECE6DC; }
.dd-chrome > i { width: 11px; height: 11px; border-radius: 50%; background: #E3DCCF; flex: none; }
.dd-chrome > i:nth-child(1) { background: #FF6159; } .dd-chrome > i:nth-child(2) { background: #FFBD2E; } .dd-chrome > i:nth-child(3) { background: #28C941; }
.dd-url { margin-left: 14px; flex: 1; max-width: 340px; font-size: 12.5px; color: #7A7268; background: #fff; border: 1px solid #ECE6DC; border-radius: 7px; padding: 5px 12px; }
.dd-label { margin-left: auto; font-size: 12px; font-weight: 600; color: #B23B12; background: #FFEDE5; padding: 5px 11px; border-radius: 99px; white-space: nowrap; }
.dd-app { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 560px; }
.dd-side { background: #1C1815; color: #CFC6BA; padding: 20px 14px; display: flex; flex-direction: column; gap: 22px; }
.dd-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 14.5px; padding: 0 6px; }
.dd-dot { width: 30px; height: 30px; border-radius: 9px; background: #FF5722; color: #fff; display: grid; place-items: center; flex: none; }
.dd-ico { width: 17px; height: 17px; flex: none; }
.dd-side nav { display: grid; gap: 2px; }
.dd-side nav span { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; }
.dd-side nav span.on { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 2px 0 0 #FF5722; }
.dd-status { margin-top: auto; font-size: 12px; color: #A89F93; display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.dd-status i { width: 8px; height: 8px; border-radius: 50%; background: #3CC46E; box-shadow: 0 0 0 4px rgba(60,196,110,.18); }
.dd-main { padding: 22px 24px 24px; background: #FBFAF7; display: grid; gap: 16px; align-content: start; min-width: 0; }
.dd-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dd-topbar small { display: block; font-size: 12.5px; color: #7A7268; }
.dd-topbar b { display: block; font-size: 21px; letter-spacing: -.015em; margin-top: 2px; }
.dd-seg { display: flex; background: #EFEAE1; border-radius: 9px; padding: 3px; font-size: 12.5px; font-weight: 600; color: #6F675C; }
.dd-seg span { padding: 6px 11px; border-radius: 7px; }
.dd-seg span.on { background: #fff; color: #16130F; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.dd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dd-kpi { background: #fff; border: 1px solid #ECE6DC; border-radius: 12px; padding: 14px 16px 15px; min-width: 0; position: relative; display: flex; flex-direction: column; }
.dd-kpi small { display: block; font-size: 12.5px; color: #6F675C; font-weight: 500; padding-right: 54px; }
.dd-kpi b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.025em; margin-top: auto; padding-top: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-delta { position: absolute; top: 12px; right: 12px; font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.dd-delta.up { color: #1F7A45; background: #E3F3E9; } .dd-delta.down { color: #B2371E; background: #FBE6E1; }
.dd-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dd-cardhead b { font-size: 14px; }
.dd-cardhead small { font-size: 12px; color: #8A8276; }
.dd-flow { background: #fff; border: 1px solid #ECE6DC; border-radius: 12px; padding: 16px 18px 18px; }
.dd-flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dd-flow li { position: relative; display: grid; gap: 4px; margin: 0; padding: 0; }
.dd-flow li::before { content: none; }
.dd-flow li + li { padding-left: 14px; border-left: 1px dashed #E3DCCF; }
.dd-flow li em { position: absolute; top: -2px; right: 0; font-style: normal; font-size: 11.5px; font-weight: 700; color: #B23B12; }
.dd-fl { font-size: 12.5px; color: #6F675C; }
.dd-flow li b { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dd-fbar { display: block; height: 8px; border-radius: 4px; background: #F3EEE6; overflow: hidden; margin-top: 4px; }
.dd-fbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #FF5722, #FF8A5C); transform-origin: left; }
.dd-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.dd-chart, .dd-feed { background: #fff; border: 1px solid #ECE6DC; border-radius: 12px; padding: 16px 18px; min-width: 0; }
.dd-area { display: block; width: 100%; height: 190px; overflow: visible; }
.dd-grid line { stroke: #F1ECE4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dd-line { fill: none; stroke: #FF5722; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dd-pt { fill: #fff; stroke: #FF5722; stroke-width: 3; vector-effect: non-scaling-stroke; }
.dd-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: #8A8276; margin-top: 8px; }
.dd-axis b { color: #16130F; margin-left: 4px; }
.dd-row { display: flex; align-items: center; gap: 12px; }
.dd-row + .dd-row { margin-top: 11px; padding-top: 11px; border-top: 1px solid #F1ECE4; }
.dd-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.dd-red { background: #FDE8E5; color: #C0392B; } .dd-green { background: #E3F3E9; color: #1F7A45; } .dd-or { background: #FFEDE5; color: #E64A1A; } .dd-blue { background: #E9EFFB; color: #2A62C9; }
.dd-rt { display: grid; min-width: 0; flex: 1; }
.dd-rt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-rt em { font-style: normal; font-size: 12.5px; color: #7A7268; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-time { font-size: 12px; color: #8A8276; white-space: nowrap; display: flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.dd-time i { font-style: normal; font-weight: 700; font-size: 11px; color: #1F7A45; background: #E3F3E9; padding: 3px 8px; border-radius: 99px; }
/* Eén moment beweging: lijn en balken tekenen zich als het dashboard in beeld komt */
.dd-window.dd-anim .dd-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dd-window.dd-anim .dd-fill, .dd-window.dd-anim .dd-pt { opacity: 0; }
.dd-window.dd-anim .dd-fbar i { transform: scaleX(0); }
.dd-window.dd-in .dd-line { transition: stroke-dashoffset 1.4s cubic-bezier(.6,.05,.2,1); stroke-dashoffset: 0; }
.dd-window.dd-in .dd-fill { transition: opacity .8s .7s; opacity: 1; }
.dd-window.dd-in .dd-pt { transition: opacity .3s 1.3s; opacity: 1; }
.dd-window.dd-in .dd-fbar i { transition: transform 1s cubic-bezier(.6,.05,.2,1); transform: scaleX(1); }
.dd-window.dd-in li:nth-child(2) .dd-fbar i { transition-delay: .12s; } .dd-window.dd-in li:nth-child(3) .dd-fbar i { transition-delay: .24s; } .dd-window.dd-in li:nth-child(4) .dd-fbar i { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .dd-window.dd-anim .dd-line { stroke-dashoffset: 0; } .dd-window.dd-anim .dd-fill, .dd-window.dd-anim .dd-pt { opacity: 1; } .dd-window.dd-anim .dd-fbar i { transform: none; } }

@media (max-width: 860px) {
  .lead-sec h2, .dd-sec h2 { font-size: 30px; }
  .lead-card { grid-template-columns: 1fr; padding: 32px 20px; gap: 28px; }
  .lead-form { padding: 20px; }
  .lead-form .lf-row { grid-template-columns: 1fr; }
  .lead-wrap { padding: 0 16px; }
  .dd-sec { padding: 64px 0; }
  .dd-head h2 { font-size: 30px; }
  .dd-app { grid-template-columns: 1fr; min-height: 0; }
  .dd-side { display: none; }
  .dd-main { padding: 16px; }
  .dd-url { display: none; }
  .dd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dd-kpi { padding: 12px 13px 13px; }
  .dd-kpi small { padding-right: 0; }
  .dd-kpi b { font-size: 23px; padding-top: 6px; }
  .dd-delta { position: static; align-self: flex-start; margin-top: 6px; order: 3; }
  .dd-cardhead { flex-wrap: wrap; }
  .dd-flow li em { position: static; order: 4; font-size: 11.5px; }
  .dd-flow li em::after { content: " van vorige stap"; font-weight: 500; color: #8A8276; }
  .dd-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .dd-flow li:nth-child(3) { padding-left: 0; border-left: 0; }
  .dd-body { grid-template-columns: 1fr; }
}

/* Freebie-pagina's (/gratis/...) */
.fb-hero { padding: 64px 0 80px; background: radial-gradient(900px 420px at 85% -10%, rgba(255,87,34,.14), transparent 60%), #FAF6EF; }
.fb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.fb-kicker { font-size: 14px; font-weight: 700; color: #E64A1A; margin: 0 0 12px; }
.fb-copy h1 { font-size: 48px; line-height: 1.06; letter-spacing: -.03em; margin: 0; }
.fb-copy .lead { font-size: 18px; color: #4A4A4A; margin: 18px 0 0; line-height: 1.6; max-width: 34em; }
.fb-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; font-weight: 600; }
.fb-list li { padding-left: 26px; position: relative; }
.fb-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2.5px solid #FF5722; border-bottom: 2.5px solid #FF5722; transform: rotate(-45deg); }
.fb-tool { background: #fff; border: 1px solid #ECE6DC; border-radius: 20px; padding: 26px; box-shadow: 0 40px 80px -40px rgba(60,35,15,.35); display: grid; gap: 18px; }
.fb-field label { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.fb-field label b { white-space: nowrap; color: #E64A1A; font-variant-numeric: tabular-nums; }
.fb-field input[type=range] { width: 100%; accent-color: #FF5722; }
.fb-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fb-out div { background: #1C1815; color: #fff; border-radius: 14px; padding: 16px 18px; }
.fb-out small { display: block; font-size: 13px; color: #CFC6BA; }
.fb-out b { display: block; font-size: 32px; letter-spacing: -.025em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fb-out div:first-child b { color: #FF8A5C; }
.fb-sum { margin: -6px 0 0; font-size: 13px; color: #7A7268; }
.fb-form { box-shadow: none; padding: 18px 0 0; border-top: 1px solid #F0EADF; border-radius: 0; }
.fb-preview { background: #FBF9F5; border: 1px solid #F0EADF; border-radius: 14px; padding: 18px; font-size: 15px; line-height: 1.6; position: relative; }
.fb-preview small { display: block; font-size: 12.5px; color: #7A7268; margin-bottom: 8px; }
.fb-preview p { margin: 0 0 8px; }
.fb-more { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: #E64A1A; background: #FFEDE5; padding: 5px 10px; border-radius: 99px; }
.fb-how { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.fb-how h2 { font-size: 26px; margin: 0 0 10px; }
.fb-how p { color: #4A4A4A; line-height: 1.65; margin: 0; }
@media (max-width: 860px) {
  .fb-grid, .fb-how { grid-template-columns: 1fr; gap: 28px; }
  .fb-copy h1 { font-size: 34px; }
  .fb-tool { padding: 18px; }
  .fb-out b { font-size: 26px; }
}

/* Voorbeeldposts op de AI Marketing-pagina's */
.px-sec { padding: 88px 0; background: #fff; font-family: 'Inter', -apple-system, Arial, sans-serif; color: #0A0A0A; }
.px-sec .dd-head h2 { font-size: 40px; letter-spacing: -.02em; margin: 0; }
.px-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.px-grid.px-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; }
.px-post { margin: 0; background: #fff; border: 1px solid #E8E2D8; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px -36px rgba(40,25,10,.4); }
.px-post:nth-child(even) { margin-top: 28px; }
.px-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.px-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: .02em; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #FF8A5C; }
.px-head b { display: block; font-size: 13.5px; }
.px-head small { display: block; font-size: 12px; color: #8A8276; }
.px-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background: #F3EFE8; }
.px-head { flex-wrap: wrap; }
.px-when { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #1E7A4C; background: #E7F5EC; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.px-when i { width: 6px; height: 6px; border-radius: 50%; background: #22A55E; }
.px-cap { padding: 12px 14px 14px; }
.px-acts { display: flex; gap: 14px; margin-bottom: 8px; }
.px-acts svg { width: 21px; height: 21px; fill: none; stroke: #2B2620; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.px-cap p { margin: 0; font-size: 13px; line-height: 1.5; color: #3A3530; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.px-extra { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; margin-top: 48px; align-items: center; }
.px-reply { background: #FBFAF7; border: 1px solid #ECE6DC; border-radius: 16px; padding: 18px; }
.px-cardhead { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .px-cardhead b { font-size: 14px; } .px-cardhead small { font-size: 12px; color: #8A8276; }
.px-bubble { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.px-bubble.in { background: #EFEAE1; border-bottom-left-radius: 4px; }
.px-bubble.out { background: #FF5722; color: #fff; margin-left: auto; border-bottom-right-radius: 4px; position: relative; }
.px-bubble.out::after { content: 'Concept door AI'; position: absolute; right: 0; bottom: -18px; font-size: 11px; color: #8A8276; }
.px-approve { display: flex; gap: 10px; margin-top: 28px; }
.px-btn { background: #1C1815; color: #fff; font-weight: 700; font-size: 13.5px; padding: 9px 14px; border-radius: 10px; }
.px-edit { border: 1px solid #E3DCCF; font-weight: 600; font-size: 13.5px; padding: 9px 14px; border-radius: 10px; }
.px-why h3 { font-size: 24px; margin: 0 0 10px; } .px-why p { color: #4A4A4A; line-height: 1.65; margin: 0 0 10px; }
@media (max-width: 1000px) { .px-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-grid.px-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .px-sec { padding: 64px 0; } .px-sec .dd-head h2 { font-size: 30px; } .px-extra { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .px-grid, .px-grid.px-n3 { grid-template-columns: 1fr; max-width: 380px; } .px-post:nth-child(even) { margin-top: 0; } }

/* Contentkalender in het marketingdashboard */
.dd-cal { background: #fff; border: 1px solid #ECE6DC; border-radius: 14px; padding: 16px; margin-top: 14px; }
.dd-cal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dd-cal-it { border: 1px solid #EFE9DE; border-radius: 12px; overflow: hidden; background: #FBFAF7; display: flex; flex-direction: column; }
.dd-cal-it img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.dd-cal-it > div { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.dd-cal-it small { font-size: 11.5px; color: #8A8276; font-weight: 600; }
.dd-cal-it b { font-size: 13px; line-height: 1.3; }
.dd-cal-ch { font-size: 11.5px; color: #6A635A; }
.dd-cal-st { align-self: flex-start; margin-top: 6px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; }
.dd-cal-st.st-plan { background: #E7F5EC; color: #1E7A4C; }
.dd-cal-st.st-wait { background: #FFF1D6; color: #9A5B00; }
.dd-cal-st.st-done { background: #ECEAF9; color: #4B3FB0; }
.dd-cal-more { border: 1.5px dashed #E3DCCF; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4px; padding: 16px; color: #6A635A; }
.dd-cal-more b { font-size: 20px; color: #1C1815; }
.dd-cal-more span { font-size: 12.5px; }
@media (max-width: 760px) { .dd-cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dd-cal { padding: 12px; } }

/* Dashboard: eigen login */
.dd-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 32px; align-items: center; margin-bottom: 28px; }
.dd-intro .dd-head { margin: 0; }
.dd-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #E64A19; }
.dd-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.dd-points li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; } .dd-points svg { width: 18px; height: 18px; color: #FF5722; flex: none; }
.dd-login { background: #fff; border-radius: 22px; padding: 22px; display: grid; gap: 12px; box-shadow: 0 30px 60px -30px rgba(60,20,0,.35); border: 1px solid #EEE8E0; transform: rotate(1.5deg); }
.dd-login-top { display: flex; align-items: center; gap: 8px; } .dd-login-top b { font-size: 14px; }
.dd-login-h { font-size: 18px; }
.dd-login-f { border: 1px solid #E5DFD2; border-radius: 12px; padding: 12px 14px; color: #8A8276; font-size: 14px; background: #FBF8F4; }
.dd-login-btn { background: #FF5722; color: #fff; font-weight: 700; text-align: center; padding: 12px; border-radius: 12px; font-size: 14px; box-shadow: 0 12px 26px -14px rgba(255,87,34,.9); }
.dd-login small { color: #6B655D; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 860px) { .dd-intro { grid-template-columns: 1fr; } .dd-points { grid-template-columns: 1fr; } .dd-login { transform: none; } }