/* /wat-is-lovable/ — uitleg-archetype: gesplitste hero met projectstappen, lichte databand met balken
   en generatiesprong, donkere herkennerband, gids met tabel en tijdlijn. Tokens uit lovableseo-hub.css. */
body.lovableseo .wl { font-family: var(--ls-body); color: var(--ls-ink); }
.wl-eyebrow { font-family: var(--ls-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-accent-dark); margin: 0 0 14px; }
body.lovableseo .wl-hero { max-width: 1120px; margin: 0 auto; padding: 64px 20px 56px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }
body.lovableseo .wl h1 { font-family: var(--ls-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.04em; margin: 0 0 22px; }
.wl-lead { font-size: 1.2rem; line-height: 1.6; color: #2b313c; margin: 0 0 16px; max-width: 58ch; }
.wl-lead-sub { font-size: 1.02rem; line-height: 1.65; color: var(--ls-mute); margin: 0; max-width: 58ch; }
.wl-flow { list-style: none; margin: 8px 0 0; padding: 0; border-left: 2px solid var(--ls-border); }
.wl-flow li { position: relative; padding: 0 0 22px 30px; display: grid; gap: 4px; }
.wl-flow li:last-child { padding-bottom: 0; }
.wl-flow-n { position: absolute; left: -15px; top: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--ls-accent); color: #fff; display: grid; place-items: center; font: 600 .85rem var(--ls-mono); }
.wl-flow strong { font-family: var(--ls-display); font-size: 1.12rem; letter-spacing: -.01em; }
.wl-flow span:not(.wl-flow-n) { color: #4a5160; line-height: 1.55; font-size: .98rem; }

body.lovableseo .wl-data { background: #f4f5f7; padding: 64px 20px; }
.wl-data-inner { max-width: 880px; margin: 0 auto; }
body.lovableseo .wl-data h2, body.lovableseo .wl-tool h2, body.lovableseo .wl-guide h2 { font-family: var(--ls-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; }
body.lovableseo .wl-data .wl-h2-gen { margin-top: 64px; }
.wl-data-lead { line-height: 1.65; color: #2b313c; max-width: 66ch; margin: 0 0 24px; }
.wl-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wl-bar { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 4px 14px; align-items: center; }
.wl-bar-label { font-size: .98rem; }
.wl-bar-val { font: 600 1rem var(--ls-mono); text-align: right; }
.wl-bar-track { grid-column: 1 / -1; height: 10px; background: #e3e6eb; border-radius: 99px; overflow: hidden; }
.wl-bar-fill { display: block; height: 100%; width: var(--w, 0); background: var(--ls-accent); border-radius: 99px; transform-origin: left; transform: scaleX(1); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.wl-bars.is-wacht .wl-bar-fill { transform: scaleX(0); }
.wl-bars-rest { margin: 14px 0 0; font-size: .92rem; color: var(--ls-mute); }
.wl-gen { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin: 8px 0 28px; }
.wl-gen-col { display: grid; gap: 6px; padding: 20px 0; border-top: 3px solid #c9ced6; }
.wl-gen-col.is-new { border-top-color: var(--ls-accent); }
.wl-gen-k { font: 600 .76rem var(--ls-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ls-mute); }
.wl-gen-v { font-family: var(--ls-display); font-weight: 700; font-size: clamp(3rem, 8vw, 4.8rem); line-height: 1; letter-spacing: -.04em; }
.wl-gen-col.is-new .wl-gen-v { color: var(--ls-accent-dark); }
.wl-gen-s { color: #3b4250; line-height: 1.5; }
.wl-gen-arrow { font-size: 2rem; color: var(--ls-mute); }
.wl-data-note { margin: 8px 0 0; font-size: .88rem; color: var(--ls-mute); line-height: 1.6; max-width: 72ch; }

body.lovableseo .wl-tool { background: var(--ls-ink); color: #e8ebf0; padding: 64px 20px; }
.wl-tool-inner { max-width: 760px; margin: 0 auto; }
body.lovableseo .wl-tool h2 { color: #fff; }
.wl-tool-lead { color: #b9c0cc; line-height: 1.6; margin: 0 0 22px; }
.wl-form { display: flex; gap: 10px; background: #171b22; padding: 8px; border-radius: 16px; border: 1px solid #2a303b; }
.wl-input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; padding: 12px 12px; font: 500 1rem var(--ls-mono); }
.wl-input:focus { outline: 2px solid var(--ls-accent); outline-offset: 2px; border-radius: 10px; }
html body .wl-btn { background: var(--ls-accent) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 0 20px; font: 600 1rem var(--ls-body); cursor: pointer; white-space: nowrap; }
html body .wl-btn:hover { background: var(--ls-accent-dark) !important; }
html body .wl-btn:disabled { opacity: .6; cursor: progress; }
.wl-msg { min-height: 1.4em; margin: 12px 2px 0; font-size: .92rem; color: #9aa3b2; }
.wl-out { margin-top: 20px; background: #fff; color: var(--ls-ink); border-radius: 16px; padding: 22px 22px 18px; }
.wl-verdict { font-family: var(--ls-display); font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 12px; overflow-wrap: anywhere; }
.wl-explain { margin: 0; line-height: 1.6; color: #2b313c; }
.wl-dl { margin: 0; display: grid; }
.wl-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 18px; padding: 12px 0; border-top: 1px solid var(--ls-border); }
.wl-row dt { font: 600 .76rem var(--ls-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ls-mute); padding-top: 3px; }
.wl-row dd { margin: 0; display: grid; gap: 4px; }
.wl-row.is-ok dd strong { color: var(--ls-forest); }
.wl-row.is-let dd strong { color: #8a5a00; }
.wl-note { color: #4a5160; line-height: 1.55; font-size: .95rem; }
.wl-cta { margin: 14px 0 0; }
.wl-cta a { font-weight: 600; color: var(--ls-accent-dark); text-underline-offset: 3px; }

body.lovableseo .wl-guide { max-width: 760px; margin: 0 auto; padding: 56px 20px 48px; }
body.lovableseo .wl-guide h2 { margin-top: 48px; }
body.lovableseo .wl-guide h2:first-child { margin-top: 0; }
.wl-guide p { line-height: 1.7; }
.wl-guide table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.wl-guide th { text-align: left; font: 600 .76rem var(--ls-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ls-mute); padding: 10px 12px; border-bottom: 2px solid var(--ls-ink); }
.wl-guide td { padding: 12px; border-bottom: 1px solid var(--ls-border); vertical-align: top; line-height: 1.55; }
.wl-guide td:first-child { font-weight: 600; white-space: nowrap; }
.wl-guide figure.wp-block-table { margin: 0; overflow-x: auto; }
.wl-src { font-size: .88rem; color: var(--ls-mute); }
.wl-time { list-style: none; margin: 0; padding: 0; }
.wl-time li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--ls-border); }
.wl-time-d { font: 600 .82rem var(--ls-mono); letter-spacing: .04em; color: var(--ls-accent-dark); padding-top: 4px; }
.wl-time p { margin: 0; }

@media (max-width: 860px) {
  body.lovableseo .wl-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; }
  .wl-flow { margin-left: 14px; }
}
@media (max-width: 640px) {
  .wl-form { flex-direction: column; }
  html body .wl-btn { padding: 14px 18px; }
  .wl-gen { grid-template-columns: 1fr; gap: 0; }
  .wl-gen-arrow { display: none; }
  .wl-row, .wl-time li { grid-template-columns: 1fr; }
  .wl-guide td:first-child { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  body.lovableseo .wl-bar-fill { transition: none !important; transform: none !important; }
  body.lovableseo .wl a { transition: none !important; }
}
/* Landing-modus: volle breedte binnen de constrained post-content van het theme */
body.lovableseo.is-landing .bw-secondary { display: none !important; }
body.lovableseo.is-landing .bw-layout, body.lovableseo.is-landing .bw-main { max-width: none !important; width: 100% !important; display: block !important; padding: 0 !important; margin: 0 !important; }
body.lovableseo.is-landing .wp-block-post-content { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
body.lovableseo.is-landing .wp-block-post-content > .wl { max-width: none !important; width: auto !important; margin: 0 !important; }
html { overflow-x: clip; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
body.lovableseo .wl ol.wl-bars, body.lovableseo .wl ol.wl-time, body.lovableseo .wl ol.wl-flow { padding-left: 0 !important; margin-left: 0; }
@media (max-width: 860px) { body.lovableseo .wl ol.wl-flow { margin-left: 14px !important; } }
@media (max-width: 640px) {
  .wl-guide figure.wp-block-table { overflow: visible; }
  .wl-guide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
  .wl-guide table, .wl-guide tbody, .wl-guide tr, .wl-guide td { display: block; width: auto; }
  .wl-guide tr { padding: 14px 0; border-bottom: 1px solid var(--ls-border); }
  .wl-guide td { border: 0; padding: 4px 0; }
  .wl-guide td:first-child { font-family: var(--ls-display); font-size: 1.1rem; padding-bottom: 6px; }
  .wl-guide td[data-label]::before { content: attr(data-label); display: block; font: 600 .72rem var(--ls-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ls-mute); margin-bottom: 2px; }
}