.wybe-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; max-width: 980px; margin: 0 auto; padding: 18px; background:#f8fafc; }
.wybe-card { background: rgba(255,255,255,.95); border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; margin: 12px 0; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.wybe-h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; letter-spacing:.2px; }
.wybe-h2 { font-size: 18px; font-weight: 700; margin: 16px 0 8px; }
.wybe-btn { display: inline-block; padding: 10px 14px; border-radius: 12px; border: 1px solid #111827; background: #111827; color: #fff; text-decoration: none; cursor: pointer; margin-right: 8px; }
.wybe-btn.secondary { background: #fff; color: #111827; }
.wybe-grid { display: grid; grid-template-columns: repeat(1,minmax(0,1fr)); gap: 12px; }
@media (min-width:640px){ .wybe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .wybe-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.wybe-option { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; }
.wybe-option h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.wybe-option p { margin: 0; font-size: 13px; color: #374151; }
.wybe-code { font-weight: 700; font-feature-settings: 'tnum'; letter-spacing: .3px; }
.wybe-bullets li { margin: 8px 0; }
.wybe-input { width: 100%; padding: 10px 12px; border:1px solid #d1d5db; border-radius: 12px; }
.wybe-note { font-size: 12px; color:#6b7280; margin-top:6px; }
.wybe-step { font-size: 12px; color:#6b7280; margin-bottom:8px; }
.wybe-triple { display:grid; grid-template-columns: repeat(3,80px); gap:14px; margin:12px 0 6px; }
.wybe-square { width:80px; height:80px; background:#ffffff; border:1.5px solid #d1d5db; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.wybe-square input { width:100%; height:100%; border:0; text-align:center; font-weight:700; font-size:28px; background:transparent; outline:none; }
.wybe-error { color:#b91c1c; font-size:12px; margin-top:6px; }
.wybe-banner { padding:10px 12px; border:1px solid #d1d5db; background:#fef3c7; color:#92400e; border-radius:10px; margin:10px 0; }
.wybe-success { padding:16px; border:1px solid #d1fae5; background:#ecfdf5; color:#065f46; border-radius:12px; margin:12px 0; }
.wybe-disclaimer { font-size:12px; color:#6b7280; margin:6px 0 12px; }


/* Slots + Selection */
.wybe-slots{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin:16px 0 8px; }
.wybe-slot{ border:1px dashed #bbb; border-radius:12px; padding:10px; min-height:64px; cursor:pointer; background:#fafafa; }
.wybe-slot.filled{ border-style:solid; background:#fff; }
.wybe-slot-label{ font-size:12px; font-weight:600; opacity:.7; margin-bottom:4px; }
.wybe-slot-value{ font-size:14px; font-weight:600; }

.wybe-option{ border:1px solid #e5e5e5; border-radius:12px; padding:12px; background:#fff; transition:transform .05s ease; cursor:pointer; }
.wybe-option:hover{ transform:translateY(-1px); }
.wybe-option.selected{ border-color:#6b46c1; box-shadow:0 0 0 2px rgba(107,70,193,.15) inset; }
.wybe-chip{ margin-left:8px; font-size:11px; padding:2px 6px; border-radius:999px; border:1px solid currentColor; }
.wybe-option.selected-ist1 .wybe-chip{ color:#0b84ff; }
.wybe-option.selected-ist2 .wybe-chip{ color:#00a86b; }
.wybe-option.selected-soll .wybe-chip{ color:#c2410c; }


.wybe-note{ white-space: pre-line; }


/* Refined CTA block spacing and readability */
.wybe-note{ 
  white-space: pre-line; 
  line-height: 1.25; 
  margin: 6px 0 18px; 
  padding: 10px 12px; 
  border-radius: 12px; 
  border: 1px solid #ece8f9; 
  background: #faf9ff;
}
/* Preserve separation to other sections */
.wybe-slots{ margin-top: 8px; margin-bottom: 14px; }
.wybe-grid{ margin-top: 8px; }



/* Two-column option grid (mobile-first) */
.wybe-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width: 900px){
  .wybe-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* CTA pictograms & accents */
.wybe-cta { }
.wybe-cta-sub{ margin-top: 4px; margin-bottom: 6px; font-weight: 600; }
.wybe-cta-list{ list-style:none; padding:0; margin: 0; }
.wybe-cta-step{ display:flex; align-items:flex-start; gap:8px; margin: 4px 0; }
.wybe-badge{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:999px; border:1px solid #a78bfa; font-size:12px; font-weight:700; }
.wybe-cta-ist{ }
.wybe-cta-soll{ color:#c2410c; font-weight:600; }
.wybe-badge.wybe-soll{ border-color:#fb923c; }



/* Better headline wrapping & hyphenation */
.wybe-option h4,
.wybe-slot-value{
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}



/* ==== Per-area background & accent ==== */
.wybe-wrap{ background-color: var(--wybe-area-bg, #ffffff); transition: background-color .25s ease; }
.wybe-card{ border-top: 6px solid var(--wybe-area-accent, #6b46c1); }

/* Area palettes (very light tints for bg; strong accent for borders/badges) */
.wybe-wrap[data-area="why"]     { --wybe-area-bg:#F6F0FF; --wybe-area-accent:#6B46C1; }
.wybe-wrap[data-area="vibe"]    { --wybe-area-bg:#E9FFF4; --wybe-area-accent:#00A86B; }
.wybe-wrap[data-area="work"]    { --wybe-area-bg:#EAF4FF; --wybe-area-accent:#0B84FF; }
.wybe-wrap[data-area="voice"]   { --wybe-area-bg:#FFF6E6; --wybe-area-accent:#FFB62E; }
.wybe-wrap[data-area="mindset"] { --wybe-area-bg:#FFEAF2; --wybe-area-accent:#D13B7B; }
.wybe-wrap[data-area="neutral"] { --wybe-area-bg:#FFFFFF; --wybe-area-accent:#6B46C1; }

/* Optional: adapt small UI elements to accent */
.wybe-badge{ border-color: var(--wybe-area-accent, currentColor); }


.wybe-row{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }

.wybe-optin{ margin-top:10px; padding-top:6px; border-top:1px dashed rgba(0,0,0,.08); }