/* One clear hero, a readable product surface, and robust responsive sections. */
:root { --space: clamp(112px, 12vw, 176px); }
.hero { display: flex; align-items: center; min-height: calc(100svh - var(--header-height)); padding: 34px 0 44px; text-align: center; }
.hero-inner, .hero-message { max-width: 1020px; width: 100%; }
.hero h1 { font-size: clamp(3.1rem, 5.8vw, 5.2rem); line-height: 1.08; letter-spacing: -.04em; }
.hero h1 br { display: block; }
.hero h1 .blue-text { margin: 0; }
.hero-copy { max-width: 560px; margin: 20px auto 0; font-size: 1.0625rem; line-height: 1.6; }
.hero .builder-form { max-width: 690px; margin: 27px auto 0; }
.domain-entry { padding: 7px 7px 7px 20px; border-color: #adbfdf; border-radius: 15px; box-shadow: 0 9px 32px #215de314; }
.domain-entry .button { min-height: 54px; font-size: .9375rem; padding-inline: 20px; }
.domain-entry input { font-size: 1.0625rem; }
.builder-hint { font-size: .8125rem; line-height: 1.6; margin-top: 11px; text-align: center; color: #65738b; }
.hero-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: min(560px, 100%); max-width: none; margin: 28px auto 0; padding: 0; border: 0; text-align: center; }
.hero-proof > div, .hero-proof > div:first-child, .hero-proof > div:last-child { display: block; padding: 0; border: 0; }
.hero-proof strong { font-size: 2.55rem; color: #174dbb; line-height: 1.1; letter-spacing: -.055em; }
.hero-proof span { display: block; font-size: .875rem; line-height: 1.5; color: #34445f; margin-top: 5px; max-width: none; text-align: center; }
.hero-proof small { display: block; font-size: .75rem; color: #75839a; margin-top: 2px; }
.hero-proof a { color: #61738f; padding: 3px; text-underline-offset: 3px; }
.hero-proof a:hover { text-decoration: underline; }
.business-benefits { padding-block: var(--space); }
.section-heading p, .setup-grid p { font-size: 1rem; }
.product-dashboard { background: #f3f7ff; }
.dashboard-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-bottom: 44px; }
.dashboard-section-heading h2 { font-size: clamp(2rem, 3.7vw, 3.2rem); }
.dashboard-section-heading p { max-width: 360px; }
.pipeline-app { display: grid; grid-template-columns: 182px minmax(0, 1fr); background: #fff; border: 1px solid #d5e0f2; border-radius: 19px; overflow: hidden; box-shadow: 0 28px 70px -35px #24488640; text-align: left; }
.pipeline-sidebar { display: flex; flex-direction: column; gap: 28px; padding: 26px 15px; background: #fcfdff; border-right: 1px solid #e6ecf5; }
.pipeline-logo { display: flex; align-items: center; gap: 6px; font-size: 1.0625rem; letter-spacing: -.04em; }
.pipeline-logo img { width: 29px; height: 29px; object-fit: contain; transform: scale(1.45); }
.pipeline-workspace { border: 1px solid #e0e7f2; border-radius: 8px; font-size: .8125rem; padding: 10px 12px; color: #6a7891; }
.pipeline-nav { display: grid; gap: 9px; }
.pipeline-nav > span { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 8px; color: #69768d; font-size: .875rem; }
.pipeline-nav .icon { width: 18px; height: 18px; }
.pipeline-nav .selected { background: #eaf1ff; color: #235bd0; font-weight: 700; }
.pipeline-connected { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: #556b65; }
.pipeline-connected > span { width: 7px; height: 7px; border-radius: 50%; background: #298160; }
.pipeline-main { min-width: 0; padding: 27px 29px 20px; }
.pipeline-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 25px; }
.pipeline-top > div > span { display: block; font-size: .75rem; color: #8390a4; margin-bottom: 5px; }
.pipeline-top h3 { font-size: 1.15rem; line-height: 1.4; letter-spacing: -.03em; }
.pipeline-period { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #dce4f1; border-radius: 7px; padding: 7px 10px; font-size: .8125rem; color: #586983; white-space: nowrap; }
.pipeline-period .icon { width: 16px; height: 16px; }
.pipeline-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pipeline-kpis > div { border: 1px solid #e0e7f2; border-radius: 10px; padding: 16px; }
.pipeline-kpis span { display: block; color: #66778d; font-size: .875rem; }
.pipeline-kpis strong { display: block; font-size: 2.25rem; line-height: 1.15; letter-spacing: -.05em; margin-top: 8px; }
.pipeline-kpis small { display: block; font-size: .75rem; margin-top: 7px; line-height: 1.35; color: #7c8ca3; }
.pipeline-kpis .emphasized { background: #245de0; border-color: #245de0; color: white; }
.pipeline-kpis .emphasized span, .pipeline-kpis .emphasized small { color: #e2ebff; }
.pipeline-middle { display: grid; grid-template-columns: 1fr 200px; gap: 24px; margin: 26px 0; }
.pipeline-main h4 { font-size: .875rem; line-height: 1.4; margin-bottom: 17px; letter-spacing: -.015em; }
.pipeline-funnel > div { display: grid; grid-template-columns: 137px 1fr 25px; gap: 12px; align-items: center; margin-top: 13px; }
.pipeline-funnel > div > span { font-size: .875rem; color: #64758e; }
.pipeline-funnel i { display: block; width: var(--bar); height: 15px; border-radius: 4px; background: #3671f2; }
.pipeline-funnel > div:nth-of-type(2) i { background: #7ba4ff; }
.pipeline-funnel > div:nth-of-type(3) i { background: #b0c8fb; }
.pipeline-funnel > div:last-child i { background: #f39570; transition: width .3s; }
.pipeline-funnel > div > strong { text-align: right; font-size: .875rem; }
.pipeline-insight { padding: 18px; border-radius: 10px; background: #f3f7fd; }
.pipeline-insight .icon { color: #3066d2; width: 20px; height: 20px; margin-bottom: 10px; }
.pipeline-insight > strong { display: block; font-size: 2.125rem; line-height: 1.1; letter-spacing: -.045em; color: #265fd3; }
.pipeline-insight > span { display: block; font-size: .875rem; margin-top: 7px; }
.pipeline-insight p { font-size: .75rem; line-height: 1.6; margin-top: 9px; color: #7888a0; }
.pipeline-table-title { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding-bottom: 13px; }
.pipeline-table-title h4 { margin-bottom: 0; }
.pipeline-table-title > span { color: #8190a6; font-size: .75rem; }
.pipeline-row { display: grid; grid-template-columns: 1fr 1.35fr 1.2fr .65fr; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #eaf0f6; font-size: .875rem; color: #53647e; }
.pipeline-row > span { min-width: 0; overflow-wrap: anywhere; }
.pipeline-row.table-header { background: #f7f9fc; padding: 8px 10px; border: 0; border-radius: 6px; font-size: .75rem; color: #8290a3; }
.pipeline-person { display: flex; align-items: center; gap: 8px; }
.pipeline-person i { display: grid; place-items: center; flex: 0 0 29px; height: 29px; font-size: .6875rem; font-style: normal; background: #edf3fe; color: #4a6da9; border-radius: 50%; }
.pipeline-person strong { font-size: .875rem; color: #354862; }
.pipeline-status { display: inline-block; padding: 5px 8px; font-size: .75rem; line-height: 1.4; background: #edf2ff; color: #4868ac; border-radius: 6px; }
.pipeline-status.new { color: #a86430; background: #fff3e8; }
.pipeline-status.won { color: #287351; background: #e8f6ec; }
.pipeline-action { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 18px; }
.pipeline-action p { font-size: .8125rem; color: #728198; }
.pipeline-action button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #c4d5f5; background: #edf3ff; color: #235ac2; border-radius: 8px; font-size: .8125rem; padding: 10px 12px; flex-shrink: 0; }
.pipeline-action button[aria-pressed=true] { background: #ecf6ef; color: #267447; border-color: #c3e0cb; }
.pipeline-action .icon { width: 17px; height: 17px; }
.dashboard-takeaways { display: flex; justify-content: center; gap: 30px; margin-top: 28px; flex-wrap: wrap; }
.dashboard-takeaways > span { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: #617795; }
.dashboard-takeaways .icon { width: 17px; height: 17px; color: #316dde; }
.design-studio { background: #fff; }
.design-studio .section-heading { display: block; margin-bottom: 38px; }
.design-studio .section-heading h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.design-studio .section-heading p { margin-top: 16px; }
.design-lab { grid-template-columns: 340px minmax(0, 1fr); border-radius: 20px; }
.design-controls { padding: 30px; }
.design-control { padding-bottom: 20px; margin-bottom: 20px; }
.design-control > span, .design-control > label { display: block; font-size: .875rem; color: #516581; font-weight: 700; margin-bottom: 11px; }
.design-name input { width: 100%; padding: 10px 12px; border: 1px solid #cbd8ec; border-radius: 8px; font-size: 1rem; color: #233955; background: #fff; }
.design-name input:focus { outline: 2px solid #2563eb; outline-offset: 2px; }
.design-swatches { gap: 13px; }
.design-swatches button { width: 36px; height: 36px; }
.segmented button { font-size: .875rem; padding: 8px; }
.design-extra { font-size: .875rem; line-height: 1.55; color: #73819a; }
.brand-preview { min-width: 0; min-height: 540px; background: #eaf1fc; padding: 34px; display: block; }
.preview-site { opacity: .55; height: auto; }
.preview-site > div { height: 310px; }
.preview-chat, .preview-chat.size-compact, .preview-chat.size-large { display: block; opacity: 1; visibility: visible; width: 335px; max-width: calc(100% - 64px); bottom: 88px; right: 32px; left: auto; }
.preview-chat.size-compact { width: 290px; }
.preview-chat.size-large { width: 390px; }
.brand-preview.side-left .preview-chat { left: 32px; right: auto; }
.preview-chat header { position: static; padding: 16px; min-height: 75px; }
.preview-chat header img, .preview-launcher img { filter: none; }
.preview-chat header img { background: #fff; border-radius: 50%; transform: none; width: 40px; height: 40px; }
.preview-chat header strong { font-size: .9375rem; }
.preview-chat header span { font-size: .75rem; color: inherit; opacity: .9; }
.preview-chat header, .preview-thread .preview-answer { color: var(--preview-on-accent, #fff); }
.preview-thread { padding: 18px; gap: 13px; }
.preview-thread p { font-size: .875rem; width: 92%; line-height: 1.5; padding: 10px 12px; }
.preview-input { font-size: .875rem; padding: 14px 16px; }
.preview-launcher { right: 32px; bottom: 23px; width: 48px; height: 48px; border: 2px solid #fff; }
.preview-launcher img { background: #fff; border-radius: 50%; transform: none; }
.brand-preview.side-left .preview-launcher { left: 32px; right: auto; }
.industries { background: #f5f8fd; }
.industries .section-heading { margin-bottom: 36px; }
.industry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.industry-grid a { display: flex; position: relative; flex-direction: column; gap: 8px; padding: 21px 20px; min-height: 142px; background: #fff; border: 1px solid #dae4f3; border-radius: 12px; min-width: 0; }
.industry-grid strong { display: block; font-size: 1rem; line-height: 1.4; color: #233e67; padding-right: 15px; }
.industry-grid span { display: block; font-size: .875rem; line-height: 1.5; color: #76849a; margin: 0; }
.industry-grid a::after { content: '↗'; position: absolute; right: 16px; top: 17px; padding: 0; margin: 0; font-size: 1.0625rem; color: #3971d9; }
.industry-grid a:hover { transform: translateY(-3px); border-color: #8eb1ef; background: #fcfdff; }
.setup-grid p { line-height: 1.65; }
.setup-num, .platforms > p { font-size: .875rem; }
.platforms { border: 0; padding-top: 15px; }
#kennzahlen { scroll-margin-top: 110px; }
#kennzahlen p { margin-bottom: 16px; }
#kennzahlen a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1000px) and (max-height: 800px) {
  .hero { padding-block: 25px; }
  .hero h1 { font-size: clamp(3.1rem, 5.4vw, 4.65rem); }
  .hero-copy { margin-top: 17px; }
  .hero .builder-form { margin-top: 20px; }
  .hero-proof { margin-top: 23px; }
  .hero-proof strong { font-size: 2.2rem; }
}
@media (max-width: 1050px) {
  .pipeline-app { grid-template-columns: 150px minmax(0, 1fr); }
  .pipeline-sidebar { padding: 24px 10px; }
  .pipeline-logo { font-size: .9375rem; }
  .pipeline-main { padding: 24px 20px; }
  .pipeline-kpis { gap: 8px; }
  .pipeline-kpis > div { padding: 13px 10px; }
  .pipeline-middle { grid-template-columns: 1fr 155px; gap: 20px; }
  .pipeline-action { align-items: start; }
  .pipeline-action p { max-width: 240px; }
  .design-lab { grid-template-columns: 300px minmax(0, 1fr); }
  .design-controls { border-bottom: 0; border-right: 1px solid #dce5f3; padding: 25px; }
}
@media (max-width: 800px) {
  .hero-inner { width: calc(100% - 40px); }
  .hero h1 { font-size: clamp(2.6rem, 6.5vw, 4rem); }
  .dashboard-section-heading { display: block; }
  .dashboard-section-heading p { margin-top: 18px; }
  .pipeline-app { grid-template-columns: 1fr; }
  .pipeline-sidebar { display: none; }
  .pipeline-main { padding: 25px; }
  .design-lab { grid-template-columns: 1fr; }
  .design-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; border: 0; padding: 28px; }
  .design-control { padding: 0; margin: 0; border: 0; }
  .design-extra { grid-column: 1 / -1; }
  .brand-preview { min-height: 520px; border-top: 1px solid #dae4f2; }
  .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .industry-grid a { min-height: 135px; padding: 18px; }
}
@media (max-width: 600px) {
  :root { --space: 105px; }
  .hero { min-height: calc(100svh - var(--header-height)); padding: 30px 0 40px; }
  .hero-inner { width: calc(100% - 36px); }
  .hero h1 { font-size: clamp(2rem, 8.4vw, 3.1rem); line-height: 1.12; }
  .hero-copy { font-size: 1rem; max-width: 365px; margin-top: 19px; }
  .hero .builder-form { margin-top: 23px; }
  .domain-entry { flex-wrap: wrap; gap: 0; padding: 7px; }
  .domain-entry > .icon { display: none; }
  .domain-entry input { flex-basis: 100%; padding: 13px 10px; font-size: 1rem; }
  .domain-entry .button { width: 100%; font-size: .9375rem; padding: 13px; min-height: 50px; }
  .builder-hint { font-size: .75rem; max-width: 310px; margin: 10px auto 0; }
  .hero-proof { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 25px; }
  .hero-proof strong { font-size: 2rem; }
  .hero-proof span { font-size: .875rem; max-width: 180px; margin: 5px auto 0; line-height: 1.4; }
  .hero-proof small { font-size: .75rem; margin-top: 4px; }
  .dashboard-section-heading h2, .design-studio .section-heading h2 { font-size: 2rem; }
  .pipeline-main { padding: 20px 15px; }
  .pipeline-top { align-items: start; gap: 10px; }
  .pipeline-top h3 { font-size: 1rem; }
  .pipeline-period { font-size: .75rem; padding: 6px 8px; }
  .pipeline-period .icon { display: none; }
  .pipeline-kpis { grid-template-columns: 1fr 1fr; }
  .pipeline-kpis > div { min-height: 120px; padding: 14px; }
  .pipeline-kpis strong { font-size: 2rem; }
  .pipeline-middle { grid-template-columns: 1fr; margin-block: 25px; }
  .pipeline-insight { display: none; }
  .pipeline-funnel > div { grid-template-columns: 132px 1fr 23px; gap: 9px; }
  .pipeline-table-title > span { display: none; }
  .pipeline-row { grid-template-columns: 1fr 1.25fr; gap: 10px; }
  .pipeline-row > span:nth-child(2), .pipeline-row > span:nth-child(4) { display: none; }
  .pipeline-row.table-header { grid-template-columns: 1fr 1.25fr; }
  .pipeline-person strong, .pipeline-status { font-size: .875rem; }
  .pipeline-action { display: grid; gap: 12px; }
  .pipeline-action p { max-width: none; font-size: .875rem; }
  .pipeline-action button { font-size: .875rem; }
  .dashboard-takeaways { display: grid; justify-content: start; gap: 13px; }
  .design-studio, .industries { padding-block: var(--space); }
  .design-controls { grid-template-columns: 1fr; padding: 24px; gap: 21px; }
  .design-control { padding: 0; }
  .brand-preview { min-height: 540px; padding: 25px; }
  .preview-chat, .preview-chat.size-compact, .preview-chat.size-large { max-width: calc(100% - 36px); width: 335px; right: 18px; bottom: 85px; }
  .preview-chat.size-compact { width: 260px; }
  .preview-chat.size-large { width: 390px; }
  .brand-preview.side-left .preview-chat { left: 18px; }
  .preview-launcher { right: 18px; }
  .brand-preview.side-left .preview-launcher { left: 18px; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .industry-grid a { min-height: 151px; padding: 17px 13px; }
  .industry-grid strong { font-size: .9375rem; overflow-wrap: anywhere; padding-right: 7px; }
  .industry-grid span { font-size: .875rem; }
  .industry-grid a::after { top: 12px; right: 9px; font-size: .875rem; }
}
@media (max-width: 380px) {
  .hero-copy { font-size: 1rem; }
  .hero h1 { font-size: 2rem; }
  .pipeline-period { display: none; }
  .industry-grid { grid-template-columns: 1fr; }
  .industry-grid a { min-height: 105px; }
}
@media (prefers-reduced-motion: reduce) { .pipeline-funnel i, .industry-grid a { transition: none; } }

/* Brand customization explained as a schematic, without a partial editor. */
.brand-overview { display: grid; grid-template-columns: 1.05fr 1fr; gap: 62px; align-items: center; }
.brand-details { display: grid; gap: 30px; }
.brand-details article { display: flex; gap: 20px; align-items: start; }
.brand-key { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; font-size: .8125rem; font-weight: 700; line-height: 1; color: #3563aa; background: #edf3fc; border: 1px solid #cedcf1; border-radius: 9px; }
.brand-details h3 { font-size: 1.0625rem; margin-bottom: 9px; }
.brand-details p { font-size: 1rem; line-height: 1.65; max-width: 365px; color: #6d7d94; }
.brand-schematic { padding: 24px; border-radius: 22px; background: #f4f7fc; min-width: 0; }
.brand-wire-window { position: relative; border: 1px solid #d3deee; border-radius: 13px; background: #fff; overflow: hidden; padding-bottom: 18px; }
.brand-wire-top { display: flex; align-items: center; gap: 10px; height: 45px; padding: 0 18px; border-bottom: 1px solid #e4ebf5; color: #8290a6; font-size: .8125rem; }
.brand-wire-top .icon { width: 17px; height: 17px; }
.brand-wire-content { position: absolute; top: 79px; left: 23px; width: 34%; display: grid; gap: 10px; }
.brand-wire-content i { display: block; height: 7px; border-radius: 3px; background: #eaf0f8; }
.brand-wire-content i:nth-child(2) { width: 76%; }
.brand-wire-content i:nth-child(3) { width: 50%; }
.brand-wire-chat { position: relative; margin: 28px 22px 16px auto; width: min(310px, calc(100% - 44px)); border: 1px solid #aebfda; border-radius: 13px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px #2247770b; }
.brand-wire-chat header { display: flex; align-items: center; gap: 11px; padding: 15px; border-bottom: 1px solid #dae4f2; background: #fcfdff; }
.brand-wire-avatar { display: grid; place-items: center; width: 36px; height: 36px; border: 1px dashed #a4b6d0; border-radius: 50%; color: #7187a7; }
.brand-wire-avatar .icon { width: 19px; height: 19px; }
.brand-wire-chat header strong { display: block; font-size: .875rem; color: #516985; }
.brand-wire-chat header div > span { display: block; font-size: .75rem; color: #8796ac; margin-top: 3px; }
.brand-wire-chat header .brand-key { margin-left: auto; }
.brand-wire-thread { display: grid; gap: 14px; position: relative; padding: 22px 18px; background: #f9fbfe; }
.brand-wire-thread > div { display: grid; gap: 7px; width: 75%; padding: 15px; border: 1px solid #d8e2f0; border-radius: 10px 10px 10px 3px; background: #fff; }
.brand-wire-thread > .brand-wire-reply { justify-self: end; border-style: dashed; border-color: #b4c5dd; border-radius: 10px 10px 3px 10px; background: #f1f5fb; }
.brand-wire-thread i { display: block; height: 5px; border-radius: 3px; background: #dce5f2; }
.brand-wire-thread i:last-child { width: 62%; }
.brand-wire-thread > .brand-key { position: absolute; right: 15px; bottom: 32px; }
.brand-wire-input { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e0e7f2; padding: 14px 17px; font-size: .8125rem; color: #98a5b7; }
.brand-wire-input .icon { width: 17px; height: 17px; }
.brand-wire-position { display: flex; justify-content: end; align-items: center; gap: 14px; padding-right: 22px; }
.brand-wire-launcher { display: grid; place-items: center; width: 43px; height: 43px; border: 1px dashed #93aacb; border-radius: 50%; color: #7490b7; background: #f5f8fd; }
@media (max-width: 900px) {
  .brand-overview { gap: 32px; grid-template-columns: .95fr 1.05fr; }
  .brand-details article { gap: 14px; }
  .brand-schematic { padding: 15px; }
  .brand-wire-chat { width: calc(100% - 32px); margin-right: 16px; }
  .brand-wire-content { display: none; }
}
@media (max-width: 700px) {
  .brand-overview { grid-template-columns: 1fr; gap: 36px; }
  .brand-details { gap: 24px; }
  .brand-details p { max-width: none; }
  .brand-schematic { width: 100%; max-width: 480px; margin: auto; }
  .brand-wire-chat { width: min(310px, calc(100% - 32px)); margin-top: 23px; }
  .brand-wire-chat header { padding: 13px; gap: 9px; }
  .brand-wire-position { padding-right: 16px; }
}

/* Put the business outcomes directly before the domain entry. */
.hero-proof { margin: 24px auto 0; width: min(600px, 100%); gap: 46px; }
.hero-proof strong { font-size: 2.8rem; }
.hero-proof span { max-width: 250px; min-height: 0; margin: 7px auto 0; font-size: .9375rem; line-height: 1.4; }
.hero-proof small { margin-top: 6px; }
.hero .builder-form { margin-top: 27px; }
.benefit-heading { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 46px; margin-bottom: 52px; }
.benefit-heading h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.benefit-proof { display: flex; align-items: center; justify-content: end; gap: 23px; }
.benefit-proof > strong { font-size: clamp(2.8rem, 5.2vw, 4.6rem); line-height: 1; letter-spacing: -.065em; white-space: nowrap; color: #235ed8; }
.benefit-proof p { font-size: 1rem; color: #354865; line-height: 1.45; }
.benefit-proof a { color: #5c759a; padding: 3px; }
.benefit-proof a:hover { text-decoration: underline; text-underline-offset: 3px; }
.benefit-proof span { display: block; font-size: .875rem; color: #667c99; margin-top: 7px; }
.benefit-proof small { display: block; font-size: .75rem; color: #8090a5; margin-top: 5px; }
@media (min-width: 1000px) and (max-height: 800px) {
  .hero-proof { margin-top: 19px; }
  .hero-proof strong { font-size: 2.35rem; }
  .hero .builder-form { margin-top: 22px; }
}
@media (max-width: 850px) {
  .benefit-heading { grid-template-columns: 1fr; gap: 30px; }
  .benefit-proof { justify-content: start; }
  .benefit-proof > strong { font-size: 3.4rem; }
}
@media (max-width: 600px) {
  .hero-proof { gap: 18px; margin-top: 22px; }
  .hero-proof strong { font-size: 2.2rem; }
  .hero-proof span { font-size: .875rem; max-width: 175px; }
  .hero-proof small { font-size: .75rem; }
  .hero .builder-form { margin-top: 23px; }
  .benefit-proof { gap: 20px; }
  .benefit-proof > strong { font-size: 3rem; }
  .benefit-heading { margin-bottom: 35px; }
}

/* Compact, legible headings and a focused first screen. */
.heading-line { display: block; }
.dashboard-section-heading { display: block; max-width: none; }
.dashboard-section-heading h2 { font-size: clamp(2rem, 4.1vw, 3.65rem); letter-spacing: -.03em; line-height: 1.18; }
.dashboard-section-heading .heading-line + .heading-line { margin-top: .06em; }
.hero-proof { width: min(620px, 100%); gap: 24px; }
.hero-proof > div { border-radius: 16px; padding: 15px 16px 13px !important; }
.hero-proof .hero-outcome { background: #e8efff; }
.hero-proof .hero-speed { background: #edf3fb; }
.hero-proof strong { font-size: 3.4rem; letter-spacing: -.04em; color: #235fe3; }
.hero-proof strong .metric-unit { display: inline; font-size: .64em; color: inherit; margin: 0; line-height: inherit; letter-spacing: -.025em; }
.hero-proof > div > span { color: #263c62; font-weight: 700; margin-top: 5px; }
.hero-proof small { font-size: .6875rem; line-height: 1.4; margin-top: 6px; }
.builder-hint strong { font-weight: 700; }
.hint-break { display: none; }
.hero .builder-form { margin-top: 24px; }
.problem .section-heading { display: block; max-width: none; margin-bottom: 44px; }
.problem-grid { grid-template-columns: minmax(0, 1fr) 410px; gap: clamp(40px, 8vw, 120px); }
.answer-visual { width: 100%; max-width: 390px; justify-self: end; padding: 24px; border-radius: 20px; }
.answer-visual .visual-caption { gap: 8px; padding-bottom: 20px; }
.answer-visual .visual-caption img { filter: brightness(0) invert(1); }
.answer-visual .visual-caption strong { color: white; font-size: 1.2rem; letter-spacing: -.03em; }
.answer-visual .visual-caption > span { margin-left: auto; font-size: .8125rem; color: #b8ccec; }
.answer-visual .question-bubble { font-size: .9375rem; line-height: 1.5; max-width: 95%; margin-left: auto; padding: 14px 16px; }
.answer-visual .answer-bubble { margin: 16px 6px 0 0; padding: 17px; }
.answer-visual .answer-bubble p { font-size: .875rem; line-height: 1.55; }
.answer-visual .assistant-label { gap: 6px; margin-bottom: 12px; font-size: .75rem; }
.reply-indicator { display: inline-block; width: 6px; height: 6px; background: #8eefc2; border-radius: 50%; flex-shrink: 0; }
.answer-visual .answer-outcome { margin-top: 22px; padding-top: 20px; gap: 10px; }
.answer-visual .answer-outcome div > span { display: block; margin-top: 4px; font-size: .75rem; line-height: 1.45; }
.response-comparison { margin-top: 55px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 32px; background: white; border-radius: 16px; }
.response-comparison > div > span { display: block; font-size: .8125rem; color: #66778d; }
.response-comparison strong { display: block; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.03em; margin-top: 7px; }
.response-comparison p { font-size: .875rem; margin-top: 7px; color: #66778d; }
.response-comparison > div:last-child strong { color: #235fe3; }
.knowledge-layout { grid-template-columns: 1.2fr 1fr; gap: 60px; }
.knowledge-copy h2 { font-size: clamp(1.9rem, 3.25vw, 2.8rem); letter-spacing: -.025em; line-height: 1.22; }
.knowledge-copy > p { font-size: 1rem; margin-top: 23px; }
.brand-copy { min-width: 0; }
.design-studio .section-heading { margin-bottom: 29px; }
.design-studio .section-heading h2 { font-size: clamp(1.8rem, 3vw, 2.55rem); letter-spacing: -.025em; line-height: 1.24; }
.brand-details { gap: 23px; }
.brand-details h3 { margin-bottom: 5px; }
.brand-details p { font-size: .9375rem; line-height: 1.55; }
.setup .section-heading { margin-bottom: 30px; }
.setup .section-heading h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); letter-spacing: -.03em; }
.setup .section-heading p { margin-top: 16px; }
.platforms { margin-top: 0; padding-top: 0; }
.builder-workspace { width: min(460px, calc(100vw - 24px)); }
.build-result-head { position: relative; padding-top: 32px; }
.build-result-head .success-label { position: absolute; top: 0; left: 0; }
.industry-conversation { max-width: 405px; justify-self: end; width: 100%; }

/* Three setup steps, with a normally proportioned website chat. */
.start-tour { background: #fff; position: relative; padding-block: 90px; margin-block: 40px; }
.start-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.start-copy h2 { display: grid; gap: 14px; font-size: clamp(1.8rem, 3.1vw, 2.5rem); letter-spacing: -.025em; line-height: 1.15; }
.start-number { display: flex; align-items: baseline; gap: 16px; color: #235fe3; font-size: clamp(5rem, 8.5vw, 7rem); line-height: .9; letter-spacing: -.055em; }
.start-number > span { font-size: 1.15rem; letter-spacing: -.02em; }
.start-steps { display: grid; gap: 8px; margin-top: 28px; }
.start-step { display: flex; align-items: center; text-align: left; gap: 16px; padding: 13px 15px; background: transparent; border: 1px solid transparent; border-radius: 12px; color: #61748e; width: 100%; }
.start-step > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid #dce5f2; border-radius: 9px; font-size: .75rem; font-weight: 700; }
.start-step strong { display: block; font-size: 1rem; line-height: 1.4; }
.start-step p { font-size: .875rem; margin-top: 3px; color: #74839a; line-height: 1.45; }
.start-step.active { color: #1f59cd; background: #f0f5ff; border-color: #d7e4fc; }
.start-step.active > span { color: white; background: #2563eb; border-color: #2563eb; }
.start-step:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.start-stage { min-width: 0; }
.start-panel { min-width: 0; height: 440px; display: grid; place-items: center; }
.start-panel[hidden] { display: none; }
.start-panel:not([hidden]) > div { animation: startReveal .4s ease both; }
.start-domain-visual { width: min(450px, 100%); background: #f7f9fe; border: 1px solid #d6e2f5; border-radius: 20px; overflow: hidden; }
.start-browser-bar { display: flex; align-items: center; gap: 5px; padding: 16px 20px; border-bottom: 1px solid #dfe7f4; background: white; }
.start-browser-bar > i { width: 6px; height: 6px; border-radius: 50%; background: #ccdaee; }
.start-browser-bar > span { font-size: .75rem; color: #8491a5; margin-left: auto; }
.start-domain-body { padding: 32px; }
.start-domain-icon { display: grid; place-items: center; width: 46px; height: 46px; background: white; color: #2360da; border: 1px solid #dbe5f7; border-radius: 13px; margin-bottom: 21px; }
.start-domain-body h3 { font-size: 1.65rem; line-height: 1.25; letter-spacing: -.025em; }
.start-domain-address { display: flex; align-items: center; gap: 12px; margin-top: 28px; background: white; border: 1px solid #a7c0f3; border-radius: 10px; padding: 15px; box-shadow: 0 5px 20px #1d53bb09; }
.start-domain-address > .icon { color: #4c75b8; width: 19px; height: 19px; }
.start-domain-address > .icon:last-child { margin-left: auto; }
.start-domain-address > span { color: #25477c; font-size: 1rem; }
.start-source-tags { display: flex; gap: 7px; margin-top: 17px; flex-wrap: wrap; }
.start-source-tags span { padding: 6px 9px; border-radius: 6px; color: #6780a3; background: #eaf0fa; font-size: .75rem; }
.start-ai-visual { width: min(390px, 100%); text-align: center; }
.start-orbit { width: 170px; height: 170px; position: relative; display: grid; place-items: center; margin: 0 auto 25px; perspective: 500px; }
.start-orbit > i { position: absolute; inset: 5px; border: 1px solid #95b9ff; border-radius: 50%; transform: rotateX(64deg) rotate(-25deg); box-shadow: 0 0 25px #2563eb0a; }
.start-orbit > i:nth-child(2) { transform: rotateY(62deg) rotate(25deg); }
.start-orbit > i:nth-child(3) { inset: 25px; border-color: #d1e1ff; }
.start-orbit img { position: relative; filter: drop-shadow(0 10px 15px #2563eb21); }
.start-panel:not([hidden]) .start-orbit img { animation: startCore 2s ease-in-out both; }
.start-ai-visual h3 { font-size: 1.3rem; letter-spacing: -.025em; }
.start-checks { display: grid; gap: 10px; text-align: left; width: min(310px, 100%); margin: 25px auto 0; }
.start-checks > div { display: flex; align-items: center; gap: 11px; font-size: .9375rem; color: #315b91; background: #f1f6ff; border-radius: 8px; padding: 11px 14px; }
.start-checks .icon { color: #278262; width: 19px; height: 19px; }
.start-panel:not([hidden]) .start-checks > div { animation: startReveal .4s ease both; }
.start-checks > div:nth-child(2) { animation-delay: .45s !important; }
.start-checks > div:nth-child(3) { animation-delay: .9s !important; }
.start-chat { width: min(375px, 100%); height: 440px; display: flex; flex-direction: column; border: 1px solid #d3e0f6; border-radius: 18px; overflow: hidden; box-shadow: 0 25px 55px -30px #193b7755; background: #f7f9fe; }
.start-chat > header { display: flex; align-items: center; gap: 11px; background: #163d7b; color: white; padding: 15px 18px; flex-shrink: 0; }
.start-chat > header > img { background: white; border-radius: 50%; object-fit: contain; width: 34px; height: 34px; }
.start-chat > header strong { display: block; font-size: .875rem; letter-spacing: -.015em; }
.start-chat > header div > span { display: flex; align-items: center; gap: 5px; color: #bbd1f6; font-size: .6875rem; margin-top: 4px; }
.start-chat > header div > span i { width: 5px; height: 5px; border-radius: 50%; background: #82e5b5; }
.start-chat > header > .icon { width: 18px; height: 18px; margin-left: auto; color: #a9c9ff; }
.start-chat-thread { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; flex: 1; min-height: 0; overflow-y: auto; }
.start-chat-thread > div { max-width: 94%; padding: 10px 12px; font-size: .8125rem; line-height: 1.5; border-radius: 10px; }
.start-chat-visitor { align-self: end; background: #2563eb; color: white; border-bottom-right-radius: 3px !important; }
.start-chat-answer { align-self: start; border: 1px solid #dce5f3; background: white; color: #3b5478; border-bottom-left-radius: 3px !important; }
.start-panel:not([hidden]) .start-chat-thread > div { animation: startReveal .35s ease both; }
.start-panel:not([hidden]) .start-chat-answer { animation-delay: .7s; }
.start-panel:not([hidden]) .start-chat-followup { animation-delay: 1.3s; }
.start-panel:not([hidden]) .start-chat-last { animation-delay: 1.9s; }
.start-chat-composer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #dce5f3; padding: 15px 18px; background: white; color: #8c9cb5; font-size: .8125rem; flex-shrink: 0; }
.start-chat-composer > .icon { color: #3268c5; width: 18px; height: 18px; }
.start-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
.start-controls > span { font-size: .75rem; color: #7c8ba2; font-variant-numeric: tabular-nums; min-width: 50px; text-align: center; }
.start-controls .icon-button { width: 36px; height: 36px; }
.start-controls button:disabled { opacity: .3; }
@keyframes startReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes startCore { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (min-width: 900px) and (min-height: 660px) and (prefers-reduced-motion: no-preference) {
  .start-tour.is-enhanced:not(.start-unpinned) { height: 290svh; padding: 0; }
  .start-tour.is-enhanced:not(.start-unpinned) .start-pin { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); display: grid; align-items: center; padding-block: 24px; }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .hero { padding-block: 25px; }
  .hero h1 { font-size: clamp(3.1rem, 5.3vw, 4.6rem); }
  .hero-proof { margin-top: 20px; }
  .hero-proof strong { font-size: 2.8rem; }
  .hero-proof > div { padding-block: 12px !important; }
  .hero .builder-form { margin-top: 20px; }
}
@media (max-width: 1050px) {
  .start-layout { gap: 35px; }
  .problem-grid { grid-template-columns: minmax(0, 1fr) 375px; gap: 45px; }
  .knowledge-layout { gap: 35px; grid-template-columns: 1.15fr 1fr; }
  .knowledge-flow { padding: 22px; }
  .brand-overview { gap: 35px; }
}
@media (max-width: 899px) {
  .start-layout { grid-template-columns: 1fr; max-width: 650px; gap: 30px; }
  .start-copy h2 { display: flex; align-items: center; gap: 30px; }
  .start-number { display: grid; gap: 9px; font-size: 5rem; }
  .start-number > span { font-size: .9375rem; }
  .start-steps { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 25px; }
  .start-step { display: block; padding: 12px; }
  .start-step > span { width: 25px; height: 25px; margin-bottom: 8px; }
  .start-step strong { font-size: .875rem; }
  .start-step p { font-size: .8125rem; line-height: 1.4; margin-top: 7px; }
  .problem-grid { grid-template-columns: 1fr; gap: 40px; }
  .answer-visual { justify-self: center; }
  .knowledge-layout { grid-template-columns: 1fr; gap: 40px; }
  .knowledge-copy h2 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
  .knowledge-flow { max-width: 620px; width: 100%; }
  .brand-overview { grid-template-columns: 1fr 1fr; }
  .design-studio .section-heading h2 { font-size: 1.9rem; }
}
@media (max-width: 700px) {
  .brand-overview { grid-template-columns: 1fr; gap: 35px; }
  .brand-copy .section-heading h2 { font-size: clamp(1.65rem, 5.4vw, 2.4rem); }
  .industry-conversation { justify-self: center; }
}
@media (max-width: 600px) {
  .hero { padding-block: 28px; }
  .hero h1 br { display: none; }
  .hero h1 .blue-text { display: block; }
  .hero-copy { font-size: .9375rem; margin-top: 18px; }
  .hero-proof { gap: 10px; margin-top: 22px; }
  .hero-proof > div { padding: 14px 8px !important; border-radius: 12px; }
  .hero-proof strong { font-size: 2.7rem; }
  .hero-proof > div > span { font-size: .8125rem; min-height: 2.8em; }
  .hero-proof small { font-size: .625rem; }
  .hero .builder-form { margin-top: 21px; }
  .builder-hint { font-size: .75rem; max-width: none; line-height: 1.65; margin-top: 12px; }
  .hint-break { display: block; }
  .dashboard-section-heading h2 { font-size: clamp(1.6rem, 6.1vw, 2.2rem); }
  .knowledge-copy h2 { font-size: clamp(1.6rem, 5.8vw, 2.2rem); }
  .response-comparison { margin-top: 32px; padding: 24px 18px; gap: 20px; }
  .response-comparison strong { font-size: 1.15rem; line-height: 1.4; }
  .response-comparison p { font-size: .8125rem; }
  .start-tour { padding-block: 64px; margin-block: 0; }
  .start-layout { gap: 22px; }
  .start-copy h2 { font-size: 1.45rem; gap: 23px; }
  .start-number { font-size: 4.8rem; gap: 8px; }
  .start-number > span { font-size: .8125rem; }
  .start-steps { margin-top: 24px; gap: 5px; }
  .start-step { padding: 10px 8px; min-height: 124px; }
  .start-step strong { font-size: .75rem; }
  .start-step p { font-size: .6875rem; }
  .start-panel { height: 400px; }
  .start-domain-body { padding: 25px; }
  .start-domain-body h3 { font-size: 1.5rem; }
  .start-chat { height: 400px; }
  .start-chat-thread { padding: 12px; gap: 8px; }
  .start-chat-thread > div { font-size: .75rem; padding: 9px 11px; }
  .start-controls { margin-top: 15px; }
  .builder-workspace { width: min(430px, calc(100vw - 20px)); }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 1.95rem; }
  .hero-proof strong { font-size: 2.35rem; }
  .hero-proof small { font-size: .625rem; }
  .hero-copy { font-size: .875rem; }
  .response-comparison { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .start-panel *, .start-panel:not([hidden]) > div, .start-panel:not([hidden]) .start-orbit img, .start-panel:not([hidden]) .start-checks > div, .start-panel:not([hidden]) .start-chat-thread > div { animation: none !important; transition: none !important; }
}

/* Put the domain action first, followed by two clear outcome figures. */
.hero .builder-form { margin-top: 25px; }
.hero-proof { margin-top: 25px; }
.hero-proof > div { padding-block: 15px !important; }
.hero-proof > div > span { min-height: 0; }
.customer-outcomes { background: #fff; padding-block: clamp(72px, 9svh, 110px); }
.outcome-heading { text-align: center; max-width: 940px; margin: 0 auto 42px; }
.outcome-heading h2 { font-size: clamp(2rem, 4.15vw, 3.6rem); line-height: 1.16; letter-spacing: -.035em; }
.outcome-heading p { font-size: 1rem; line-height: 1.7; margin-top: 18px; color: #66778f; }
.outcome-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; position: relative; isolation: isolate; }
.outcome-stop { min-width: 0; text-align: center; }
.outcome-visual { position: relative; height: 210px; display: grid; place-items: center; background: #fff; }  /* deckt die Verbindungslinie ab: sie erscheint nur zwischen den Stationen, nie hinter einer Kachel, die noch nicht eingeblendet ist */
.outcome-stop h3 { font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.015em; margin-top: 27px; }
.outcome-stop p { font-size: .875rem; line-height: 1.6; margin-top: 9px; color: #6f8099; }
.outcome-track { position: absolute; z-index: -1; top: 106px; left: 11%; right: 11%; height: 2px; background: #e1e9f5; }
.outcome-track i { display: block; height: 100%; background: #2864e8; transform: scaleX(0); transform-origin: left; }
.outcome-browser { background: #f7f9fd; border: 1px solid #cad8ee; border-radius: 12px; width: 154px; height: 147px; padding: 0 14px 14px; box-shadow: 0 13px 30px -20px #183d7855; }
.outcome-browser > div { display: flex; align-items: center; gap: 4px; height: 26px; border-bottom: 1px solid #e0e8f5; margin-bottom: 15px; }
.outcome-browser > div > i { width: 4px; height: 4px; border-radius: 50%; background: #a9bbd5; }
.outcome-browser > .icon { display: block; width: 32px; height: 32px; margin: 0 auto 13px; color: #547399; }
.outcome-browser > span { display: block; width: 83%; height: 5px; border-radius: 3px; background: #d8e2f1; margin: 7px auto 0; }
.outcome-browser > span:last-child { width: 58%; }
.outcome-signal { position: absolute; top: 118px; left: calc(50% + 37px); background: white; color: #235ee3; border: 1px solid #c6d8f8; border-radius: 50%; width: 39px; height: 39px; display: grid; place-items: center; box-shadow: 0 5px 18px #1b4a9614; }
.outcome-signal .icon { width: 19px; height: 19px; }
.outcome-contact { width: 202px; height: 186px; background: #245fe5; color: #fff; border-radius: 16px; text-align: left; padding: 20px; box-shadow: 0 20px 42px -18px #245fe54a; }
.outcome-contact > img { background: #fff; border-radius: 9px; padding: 3px; width: 34px; height: 34px; object-fit: contain; }
.outcome-contact > strong { display: block; font-size: 1rem; margin: 12px 0 12px; letter-spacing: -.02em; }
.outcome-contact > span { display: flex; align-items: center; gap: 6px; font-size: .6875rem; margin-top: 7px; color: #dbe8ff; }
.outcome-contact .icon { width: 14px; height: 14px; }
.outcome-calendar { width: 160px; height: 164px; border: 1px solid #baceef; border-radius: 13px; background: #fff; position: relative; box-shadow: 0 14px 30px -22px #183d7855; overflow: visible; }
.outcome-calendar > span { display: block; padding: 12px 0; border-radius: 12px 12px 0 0; background: #edf3fe; font-size: .6875rem; color: #607ca8; }
.outcome-calendar > .icon { display: block; width: 40px; height: 40px; color: #3567c0; margin: 15px auto 10px; }
.outcome-calendar > strong { font-size: .9375rem; color: #224578; }
.outcome-calendar > i { position: absolute; bottom: -12px; right: -12px; display: grid; place-items: center; width: 32px; height: 32px; border: 3px solid #fff; background: #e0f4e9; color: #278363; border-radius: 50%; }
.outcome-calendar > i .icon { width: 17px; height: 17px; }
.outcome-order { width: 184px; height: 155px; background: #22825d; color: #fff; border-radius: 14px; box-shadow: 0 18px 40px -25px #0e254d70; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.outcome-order > .icon { width: 37px; height: 37px; color: #22825d; background: #fff; padding: 8px; border-radius: 50%; margin-bottom: 14px; }
.outcome-order > span { font-size: .6875rem; color: #bfe6d3; }
.outcome-order > strong { display: block; font-size: .875rem; margin-top: 7px; }
.outcome-flow.is-visible .outcome-track i { animation: outcomeTravel 4.8s linear forwards; }
.outcome-flow.is-visible .outcome-stop .outcome-visual > div { animation: outcomeFocus .6s ease both; }
.outcome-flow.is-visible .outcome-inquiry .outcome-visual > div { animation-delay: 1.4s; }
.outcome-flow.is-visible .outcome-meeting .outcome-visual > div { animation-delay: 2.6s; }
.outcome-flow.is-visible .outcome-customer .outcome-visual > div { animation-delay: 3.8s; }
@keyframes outcomeTravel {
  0%, 16.7%    { transform: scaleX(0); }      /* Station 1 steht */
  29.2%, 41.7% { transform: scaleX(.3333); }  /* Balken 1 -> Station 2 steht */
  54.2%, 66.7% { transform: scaleX(.6667); }  /* Balken 2 -> Station 3 steht */
  79.2%, 100%  { transform: scaleX(1); }      /* Balken 3 -> Station 4 steht */
}
@keyframes outcomeFocus { from { opacity: .4; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Complete conversations: confirmation follows the visitor's request. */
.answer-visual.completed-conversation { padding: 0; max-width: 390px; background: #f3f7ff; border: 1px solid #ccdcef; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 50px -35px #133c7f60; }
.completed-conversation .visual-caption { background: #153969; padding: 18px; margin: 0; border: 0; }
.answer-visual .visual-caption strong { font-size: .875rem; }
.complete-thread { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; }
.complete-thread > p { font-size: .8125rem; line-height: 1.55; padding: 11px 13px; max-width: 94%; margin: 0; border-radius: 11px; text-align: left; }
.complete-thread strong { display: block; font-size: inherit; color: inherit; margin-top: 6px; }
.message-from-visitor { background: #2563eb; color: white; align-self: end; border-bottom-right-radius: 3px !important; }
.message-from-bot { background: white; color: #425b7b; border: 1px solid #d8e3f3; align-self: start; border-bottom-left-radius: 3px !important; }
.conversation-result { display: flex; align-items: start; gap: 10px; background: #e9f6ef; border-top: 1px solid #d2e9dd; padding: 17px; text-align: left; }
.conversation-result > span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: #22825d; color: white; }
.conversation-result .icon { width: 15px; height: 15px; }
.conversation-result strong { display: block; color: #225d46; font-size: .8125rem; line-height: 1.45; }
.conversation-result p { color: #5e7e71; font-size: .6875rem; margin-top: 5px; line-height: 1.5; }
.completed-conversation.is-visible .complete-thread > p { animation: conversationLine .3s ease both; }
.completed-conversation.is-visible .complete-thread > p:nth-child(2) { animation-delay: .25s; }
.completed-conversation.is-visible .complete-thread > p:nth-child(3) { animation-delay: .65s; }
.completed-conversation.is-visible .complete-thread > p:nth-child(4) { animation-delay: 1.1s; }
.completed-conversation.is-visible .complete-thread > p:nth-child(5) { animation-delay: 1.55s; }
.completed-conversation.is-visible .conversation-result, .completed-conversation.is-visible .industry-fields { animation: conversationLine .4s 2s ease both; }
@keyframes conversationLine { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.response-comparison > div > span { font-weight: 700; font-size: 1.35rem; color: #223c65; letter-spacing: -.025em; }
.response-comparison > div:last-child > span { color: #235fe3; }
.response-comparison strong { font-size: 1.65rem; }
.customization-feature { padding-top: 20px; border-top: 1px solid #dce6f6; }
.customization-feature strong { color: #235ac7; }
.case-tabs button { display: flex; align-items: center; justify-content: center; gap: 9px; }
.case-tab-icon { display: flex; color: inherit; }
.case-tab-icon .icon { width: 20px; height: 20px; }
.case-sector-heading { display: flex; align-items: center; gap: 17px; margin-bottom: 20px; }
.case-sector-symbol { display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 62px; color: #245dd2; background: #eaf1ff; border: 1px solid #d4e3fc; border-radius: 16px; }
.case-sector-symbol .icon { width: 34px; height: 34px; }
.case-sector-heading .case-name { margin: 0; font-size: 1.1rem; color: #254776; }
.case-sector-heading p { font-size: .8125rem; color: #7d8ba2; margin-top: 6px; }
.industry-conversation.completed-conversation { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 28px 28px 28px 0; border: 1px solid #d1def1; border-radius: 18px; overflow: hidden; background: #f4f7fd; width: min(390px, calc(100% - 28px)); align-self: start; }
.industry-chat-title { display: flex; align-items: center; gap: 12px; padding: 17px; background: #173b6f; color: white; margin: 0; border-bottom: 0; }
.industry-chat-title > span { display: grid; place-items: center; width: 33px; height: 33px; background: #2c5188; border-radius: 9px; }
.industry-chat-title .icon { width: 21px; height: 21px; color: #b8d2ff; }
.industry-chat-title strong { display: block; font-size: .8125rem; color: white; }
.industry-chat-title small { display: block; font-size: .6875rem; color: #bdd1ec; margin-top: 4px; }
.industry-conversation .complete-thread { gap: 8px; padding: 16px; }
.industry-conversation .complete-thread > p { font-size: .8125rem; }
.industry-conversation .industry-fields { padding: 0 16px 16px; margin: 0; }
.industry-conversation .industry-fields > span { font-size: .625rem; padding: 5px 7px; }
.industry-grid a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 7px 13px; align-content: start; min-height: 145px; }
.industry-grid .sector-icon { display: grid; place-items: center; width: 38px; height: 38px; background: #edf3ff; color: #3267bc; border: 1px solid #dce7fa; border-radius: 10px; grid-row: 1 / 3; padding: 0; margin: 0; }
.industry-grid .sector-icon .icon { width: 22px; height: 22px; transition: transform .25s ease; }
.industry-grid a > strong { padding: 0 12px 0 0; grid-column: 2; align-self: center; }
.industry-grid a > span:not(.sector-icon) { grid-column: 2; font-size: .8125rem; }
.industry-grid a:hover .sector-icon .icon, .industry-grid a:focus-visible .sector-icon .icon { transform: translateY(-2px) rotate(-6deg); }
.case-tabs button[aria-selected=true] .sector-glyph { animation: sectorPop .4s ease both; }
@keyframes sectorPop { 50% { transform: translateY(-3px) rotate(-7deg); } }
@media (max-width: 1000px) {
  .outcome-flow { gap: 12px; }
  .outcome-contact { width: 180px; padding-inline: 16px; }
  .outcome-order { width: 164px; }
  .outcome-stop h3 { font-size: .9375rem; }
}
@media (max-width: 800px) {
  .outcome-flow { grid-template-columns: 1fr 1fr; gap: 42px 25px; max-width: 580px; margin-inline: auto; }
  .industry-conversation.completed-conversation { margin: 0 auto 28px; width: min(390px, calc(100% - 32px)); }
  .outcome-track { display: none; }
  .outcome-heading h2 br { display: none; }
  .outcome-stop h3 { font-size: 1rem; margin-top: 13px; }
  .outcome-stop p { font-size: .8125rem; }
  .outcome-visual { height: 185px; }
  .outcome-contact { width: 188px; height: 176px; }
}
@media (max-width: 600px) {
  .hero .builder-form { margin-top: 22px; }
  .hero-proof { margin-top: 23px; }
  .outcome-heading { margin-bottom: 35px; }
  .outcome-heading h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .outcome-heading p { font-size: .9375rem; }
  .outcome-heading p br { display: none; }
  .outcome-flow { gap: 27px 10px; }
  .outcome-visual { height: 162px; }
  .outcome-browser { width: 125px; height: 133px; padding-inline: 11px; }
  .outcome-contact { width: 145px; height: 160px; padding: 14px 12px; }
  .outcome-contact > img { width: 29px; height: 29px; }
  .outcome-contact > strong { font-size: .875rem; margin-block: 10px; }
  .outcome-contact > span { font-size: .575rem; gap: 4px; }
  .outcome-calendar { width: 132px; height: 143px; }
  .outcome-calendar > .icon { width: 32px; height: 32px; margin: 13px auto 8px; }
  .outcome-order { width: 142px; height: 139px; }
  .outcome-order > strong { font-size: .75rem; }
  .outcome-signal { left: calc(50% + 25px); top: 110px; width: 30px; height: 30px; }
  .outcome-signal .icon { width: 16px; height: 16px; }
  .outcome-stop h3 { font-size: .875rem; }
  .outcome-stop p { font-size: .75rem; }
  .response-comparison > div > span { font-size: 1.0625rem; }
  .response-comparison strong { font-size: 1.25rem; }
  .case-sector-heading { gap: 12px; }
  .case-sector-symbol { width: 47px; height: 47px; flex-basis: 47px; border-radius: 12px; }
  .case-sector-symbol .icon { width: 28px; height: 28px; }
  .case-sector-heading .case-name { font-size: 1rem; }
  .industry-grid a { grid-template-columns: 1fr; gap: 10px; min-height: 179px; }
  .industry-grid .sector-icon { grid-row: auto; }
  .industry-grid a > strong, .industry-grid a > span:not(.sector-icon) { grid-column: 1; }
  .industry-grid a > strong { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .outcome-flow *, .completed-conversation.is-visible *, .case-tabs .sector-glyph { animation: none !important; }
  .outcome-track i { transform: scaleX(1); }
  .industry-grid .sector-glyph { transition: none !important; }
}

/* Hero: Kategorie-Zeile ueber dem Versprechen + Offer-Zeile unter dem Formular */
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:#fff3e8;color:#9c4329;border:1px solid #f7d9c4;border-radius:999px;padding:8px 16px 8px 9px;font-size:.9375rem;font-weight:700;margin-bottom:22px;line-height:1.3}
.hero-badge > span{background:#d9534f;color:#fff;border-radius:999px;padding:3px 10px;font-size:.8125rem;letter-spacing:.02em}
.hero-offer{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:20px}
.hero-offer span{display:inline-flex;align-items:center;gap:8px;background:#e9f6ef;color:#225d46;border:1px solid #d2e9dd;border-radius:999px;padding:9px 15px;font-size:.875rem;font-weight:700;line-height:1.2}
.hero-offer .icon{width:15px;height:15px;color:#22825d;flex:0 0 15px}
@media(max-width:760px){.hero-badge{font-size:.8125rem;margin-bottom:17px;padding:6px 13px 6px 7px}.hero-badge > span{font-size:.75rem;padding:2px 8px}.hero-offer{gap:7px;margin-top:17px}.hero-offer span{padding:8px 12px;font-size:.8125rem}}

/* Versprechen unter der Kundenreise */
.outcome-promise{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:46px;padding-top:28px;border-top:1px solid #e7edf7;font-size:1.0625rem;font-weight:700;color:#1f3350;text-align:center;line-height:1.55}
.outcome-promise .icon{width:20px;height:20px;flex:0 0 20px;color:#22825d}
@media(max-width:760px){.outcome-promise{margin-top:34px;padding-top:22px;font-size:.9375rem;align-items:start;text-align:left}.outcome-promise .icon{margin-top:3px}}

/* Ueberschriften: das enge letter-spacing zieht auch die Wortabstaende zusammen,
   dadurch verschmelzen zwei Woerter optisch zu einem. Wortabstand gegensteuern. */
h1, h2, h3, .hero h1, .price-copy h2, .outcome-heading h2 { word-spacing: .14em; }
.hero h1 { word-spacing: .1em; }

/* Preis-Sektion: das Angebot ist die Botschaft, nicht eine Einstiegs-Floskel */
.price-tag.offer{background:#d9534f;color:#fff;font-weight:700;font-size:.8125rem;padding:6px 12px;border-radius:6px;letter-spacing:.01em}
.trial-text{font-weight:700;color:#9c4329}

/* ---------------------------------------------------------------
   Angebots-Sektion am Seitenende: das Versprechen noch einmal
   ungeteilt, direkt vor dem letzten Aufruf zur Handlung.
   --------------------------------------------------------------- */
.offer-block{background:#fff;padding-bottom:0}
.offer-panel{background:linear-gradient(160deg,#122a52,#1d4ed8 78%);color:#fff;border-radius:28px;
  padding:64px 60px;text-align:center;box-shadow:0 34px 80px -46px rgba(18,42,82,.75)}
.offer-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 16px 7px 8px;
  font-size:.875rem;font-weight:700;color:#e8effc;margin:0}
.offer-eyebrow > span{background:#d9534f;color:#fff;border-radius:999px;padding:3px 11px;font-size:.8125rem}
.offer-panel h2{color:#fff;margin-top:24px;font-size:clamp(2.1rem,4.3vw,3.5rem);line-height:1.15;word-spacing:.12em}
.offer-panel h2 .offer-hl{color:#4ade80}
.offer-lead{color:#d9e4fa;font-size:1.125rem;line-height:1.7;max-width:640px;margin:24px auto 0}
.offer-points{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:42px auto 0;max-width:860px;text-align:left}
.offer-points li{display:flex;gap:13px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:20px}
.offer-points .icon{width:20px;height:20px;color:#4ade80;flex:none;margin-top:3px}
.offer-points strong{display:block;font-size:1rem;color:#fff;line-height:1.4}
.offer-points span{display:block;font-size:.875rem;color:#cbdaf5;margin-top:5px;line-height:1.6}
.offer-panel > .button{margin-top:40px}
.offer-fine{font-size:.8125rem;color:#b9cdf0;margin-top:16px}
@media(max-width:900px){
  .offer-points{grid-template-columns:1fr;max-width:520px}
}
@media(max-width:760px){
  .offer-panel{padding:44px 24px;border-radius:22px}
  .offer-lead{font-size:1.0625rem}
  .offer-eyebrow{font-size:.8125rem}
}
/* Blau auf Blau geht unter – der Knopf im Angebot ist weiss */
.offer-panel > .button.blue{background:#fff;color:#12295c}
.offer-panel > .button.blue:hover{background:#22c55e;color:#06210f}
.offer-panel > .button.blue .icon{color:currentColor}
@media(max-width:440px){
  /* Auf schmalen Schirmen bricht die Pille sonst mitten im Wort um */
  .offer-eyebrow{flex-direction:column;gap:7px;border-radius:18px;padding:11px 18px;text-align:center}
}

/* ============================================================
   Startseite: Hero, Kennzahlenband, Preis
   ============================================================ */

/* "#1 Chatbot" hellblau hinterlegt, der Rest der Zeile dunkelblau. */
.hero h1{color:#12295c}
.hero h1 .h1-mark{background:#d6e4ff;color:#1746b0;border-radius:.16em;
  padding:0 .14em;margin:0 -.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Ohne die Tabellenzahlen ist der Hero kuerzer, sonst klafft unten eine Luecke. */
.hero{min-height:auto;padding-block:clamp(56px,9svh,104px)}
.hero-copy{max-width:660px}
.hero-copy strong{color:#12295c;font-weight:700}

/* Die drei Zusagen sitzen direkt unter dem Eingabefeld. */
.hero-offer{margin-top:14px}

/* Abschnitt nach dem Hero: heller Grauton, damit er sich oben und unten absetzt. */
.customer-outcomes{background:#f4f6fa}

/* Kennzahlen, die der Hero nicht mehr trägt. */
.outcome-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  width:min(940px,100%);margin:0 auto 54px;padding:26px 0 0;border-top:1px solid #dde4ef;text-align:center}
.outcome-stats>div{padding:0 18px;border-left:1px solid #dde4ef}
.outcome-stats>div:first-child{border-left:0}
.outcome-stats strong{display:block;color:#174dbb;font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1.05;letter-spacing:-.05em}
.outcome-stats .metric-unit{display:inline;font-size:.62em;margin:0;line-height:inherit;letter-spacing:-.02em}
.outcome-stats>div>span{display:block;color:#34445f;font-size:.9375rem;line-height:1.45;margin-top:7px}
.outcome-stats small{display:block;margin-top:7px;font-size:.75rem}
.outcome-stats small a{color:#61738f;text-underline-offset:3px}
.outcome-stats small a:hover{text-decoration:underline}
@media(max-width:860px){
  .outcome-stats{grid-template-columns:1fr;gap:22px;margin-bottom:40px}
  .outcome-stats>div,.outcome-stats>div:first-child{border-left:0;padding:0}
}

/* Preis: die 0 trägt die Aussage, die 99 steht klein daneben. */
.price-amount{align-items:baseline;flex-wrap:wrap}
.price-amount .price-then{display:block;flex-basis:100%;margin-top:6px;
  font-size:.9375rem;font-weight:500;color:#61738f}
.price-zero{font-weight:800}

/* ============================================================
   Handy: Hero fuellt den Bildschirm, Ueberschriften atmen
   ============================================================ */

/* Der Hero soll allein im Bild stehen. Vorher lugte die zweite Sektion schon
   mit Ueberschrift darunter hervor, was den Blick vom Eingabefeld wegzieht.
   min-height statt height: auf sehr kleinen Geraeten darf er wachsen. */
.hero{
  min-height:calc(100svh - var(--header-height,64px));
  display:flex;align-items:center;
  padding-block:clamp(40px,7svh,96px);
}

@media(max-width:899px){
  /* -.052em Laufweite ist auf dem Telefon zu eng: die Woerter kleben.
     Ueberschriften bekommen Luft, und text-wrap:balance verteilt die Zeilen
     gleichmaessig, statt ein einzelnes Wort allein umbrechen zu lassen. */
  .hero h1{letter-spacing:-.022em;line-height:1.16;text-wrap:balance}
  .hero h1 .h1-mark{padding:0 .1em;margin:0 -.02em}
  h2{letter-spacing:-.02em;text-wrap:balance}
  .section-heading h2,.outcome-heading h2,.price-copy h2,.offer-panel h2,
  .knowledge-copy h2,.faq-layout h2,.final-cta h2{letter-spacing:-.018em;line-height:1.2}
  .hero-copy{line-height:1.6;letter-spacing:0;text-wrap:pretty;max-width:34ch;margin-inline:auto}
  .section-heading p,.outcome-heading p,.price-copy p{line-height:1.62;text-wrap:pretty}
  /* Wortabstand minimal anheben, damit dichte Zeilen nicht verschmelzen */
  .hero-copy,.section-heading p,.outcome-heading p{word-spacing:.02em}
  .outcome-stats>div>span{text-wrap:balance}
}
@media(max-width:420px){
  .hero h1{letter-spacing:-.015em;line-height:1.18}
  .hero-copy{font-size:1rem;max-width:32ch}
}


/* 2026-09 offer clarity */
.hero-copy>span{display:block}
.hero-offer{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:7px;max-width:690px;margin-inline:auto}
.hero-offer span{padding:7px 10px;font-size:.75rem;white-space:nowrap}
.hero-offer .icon{width:13px;height:13px;flex-basis:13px}
.price-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:23px;padding:4px;background:#edf3ff;border-radius:10px}
.price-switch button{padding:10px 12px;border-radius:8px;font-weight:700;font-size:.875rem;color:#61738f}
.price-switch button[aria-pressed="true"]{background:#fff;color:#174dbb;box-shadow:0 2px 9px rgba(18,42,82,.1)}
.price-after{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:18px}
.price-after strong{font-size:1.2rem;color:#12295c}
.price-after span{font-size:.8125rem;color:#61738f}
.price-saving{margin-top:7px;color:#16834f;font-size:.875rem;font-weight:750}
.price-card>.button{margin-top:30px}
@media(max-width:760px){.hero-offer{gap:4px}.hero-offer span{padding:6px 7px;font-size:.66rem}.hero-offer .icon{display:none}}
@media(max-width:440px){.hero-offer{overflow-x:auto;justify-content:flex-start;padding-bottom:3px}.hero-offer span{flex:none}}

/* 2026-09 hero hierarchy */
.hero h1 .hero-line{display:block}
.hero h1 .hero-line.h1-mark{display:table;width:auto;max-width:100%;margin:.1em auto 0;padding:0 .14em}
.hero-copy{font-size:1.25rem}
.offer-points li{align-items:center;justify-content:flex-start}
@media(max-width:760px){.hero-copy{font-size:1.0625rem}}


/* ============================================================
   2026-09 mobile visual system — screenshot QA
   One final cascade layer for the public homepage and industry pages.
   ============================================================ */
@media (max-width: 600px) {
  :root { --space: 88px; }
  body { overflow-x: clip; font-size: 1rem; }
  .container { width: min(100% - 32px, 1180px); }

  /* Hero: exactly two headline lines, compact input, no clipped promises. */
  .hero {
    min-height: auto;
    padding: 32px 0 38px;
    align-items: start;
  }
  .hero-inner { width: min(100% - 28px, 430px); }
  .hero h1 {
    font-size: clamp(1.85rem, 8.25vw, 2.15rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    text-wrap: nowrap;
  }
  .hero h1 .hero-line { white-space: nowrap; }
  .hero h1 .hero-line.h1-mark {
    display: block;
    width: fit-content;
    margin: .13em auto 0;
    padding: .03em .15em .06em;
  }
  .hero-copy {
    max-width: 34ch;
    margin-top: 17px;
    font-size: .98rem;
    line-height: 1.55;
  }
  .hero-copy > span + span { margin-top: 4px; }
  .hero .builder-form { width: min(100%, 350px); margin: 20px auto 0; }
  .domain-entry {
    display: grid;
    gap: 7px;
    padding: 7px;
    border-radius: 14px;
    background: #fff;
  }
  .domain-entry input {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    text-align: left;
  }
  .domain-entry .button {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .9rem;
  }
  .hero-offer {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    margin: 11px auto 0;
    overflow: visible;
    padding: 0;
  }
  .hero-offer span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    font-size: .72rem;
    line-height: 1.4;
  }
  .hero-offer .icon {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: #178259;
  }

  /* The outcome section reads as one story, not four clipped tiles. */
  .customer-outcomes { padding-block: 76px; }
  .outcome-heading { margin-bottom: 30px; }
  .outcome-heading h2 { font-size: 2rem; line-height: 1.16; }
  .outcome-heading h2 br { display: none; }
  .outcome-heading p { margin-top: 15px; font-size: 1rem; }
  .outcome-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 46px;
    padding-top: 21px;
  }
  .outcome-stats > div,
  .outcome-stats > div:first-child {
    padding: 0 8px;
    border-left: 1px solid #d7e0ed;
  }
  .outcome-stats > div:first-child { border-left: 0; }
  .outcome-stats strong { font-size: clamp(1.55rem, 7vw, 1.9rem); }
  .outcome-stats > div > span { font-size: .72rem; line-height: 1.35; margin-top: 6px; }
  .outcome-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .outcome-track { display: none; }
  .outcome-stop {
    display: grid;
    grid-template-columns: 132px 1fr;
    column-gap: 20px;
    align-items: center;
    text-align: left;
    padding: 18px;
    border: 1px solid #d8e3f2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 38px -32px #173b715c;
  }
  .outcome-visual {
    grid-row: 1 / span 2;
    height: 132px;
    background: transparent;
  }
  .outcome-stop h3 { margin: 0; font-size: 1.05rem; }
  .outcome-stop p { margin-top: 7px; font-size: .84rem; }
  .outcome-browser,
  .outcome-request,
  .outcome-calendar,
  .outcome-order { transform: scale(.78); }
  .outcome-signal { transform: scale(.85); }
  .outcome-flow.is-visible .outcome-stop .outcome-visual > div {
    animation-duration: .45s;
  }

  /* Setup tour: readable hierarchy and obvious touch targets. */
  .start-tour { padding-block: 82px; margin-block: 0; }
  .start-layout { grid-template-columns: 1fr; gap: 31px; }
  .start-copy h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px 10px;
    font-size: 1.9rem;
    line-height: 1.12;
    text-align: left;
  }
  .start-number {
    display: inline-flex;
    gap: 6px;
    font-size: 2.35rem;
    line-height: 1;
  }
  .start-number > span { font-size: .92rem; }
  .start-steps { gap: 8px; margin-top: 23px; }
  .start-step {
    min-height: 68px;
    padding: 12px 13px;
    border-color: #dbe5f3;
    background: #fff;
    color: #4f6482;
  }
  .start-step.active {
    border-color: #8eb2f4;
    background: #edf4ff;
    box-shadow: 0 9px 25px -20px #1553c7;
  }
  .start-step > span { width: 34px; height: 34px; flex-basis: 34px; }
  .start-stage { width: 100%; min-width: 0; }
  .start-panel { border-radius: 18px; }
  .start-controls { margin-top: 16px; gap: 15px; }
  .start-controls .icon-button {
    width: 46px;
    height: 46px;
    border: 0;
    background: #123c80;
    color: #fff;
    box-shadow: 0 8px 20px -12px #102e63;
  }
  .start-controls button:disabled { background: #dce4f0; color: #718099; opacity: 1; }

  /* Product proof: keep the three promises visible and substantial. */
  .product-dashboard { padding-block: 88px; }
  .dashboard-takeaways {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }
  .dashboard-takeaways > span {
    display: flex;
    gap: 11px;
    align-items: center;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #d4e1f3;
    border-radius: 11px;
    background: #fff;
    color: #344c70;
    font-size: .9rem;
  }
  .dashboard-takeaways .icon { width: 19px; height: 19px; flex: 0 0 19px; }

  /* Comparison remains a true three-column table.
     DOM: feature / without / chattastic. Visual: feature / chattastic / without. */
  .difference { padding-block: 88px; }
  .difference .section-heading { margin-bottom: 34px; }
  .comparison {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 18px 45px -38px #102f6455;
  }
  .compare-head,
  .compare-row {
    grid-template-columns: 30% 37% 33%;
  }
  .compare-head > *,
  .compare-row > * {
    min-width: 0;
    padding: 12px 8px;
    font-size: .72rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
  }
  .compare-head > :first-child,
  .compare-row > :first-child { grid-column: 1; grid-row: 1; }
  .compare-head > :last-child,
  .compare-row > :last-child {
    grid-column: 2;
    grid-row: 1;
    background: #123c80;
    color: #fff;
    border-color: #315992;
  }
  .compare-head > :nth-child(2),
  .compare-row > :nth-child(2) {
    grid-column: 3;
    grid-row: 1;
    background: #f3f5f8;
    color: #69778a;
  }
  .compare-head > :last-child { font-size: .75rem; gap: 5px; }
  .compare-head > :last-child img { width: 19px; height: 19px; }
  .compare-row > :last-child { gap: 5px; }
  .compare-row > :last-child .icon { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: #b9d1ff; }

  /* Industry conversation is visibly a phone mockup, separate from the page. */
  .case-card { gap: 30px; }
  .industry-conversation {
    position: relative;
    width: min(100%, 365px);
    margin-inline: auto;
    padding: 40px 14px 20px;
    border: 8px solid #15233b;
    border-radius: 34px;
    background: #f3f7ff;
    box-shadow: 0 28px 60px -35px #07162f99;
    overflow: hidden;
  }
  .industry-conversation::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 50%;
    width: 88px;
    height: 20px;
    border-radius: 14px;
    background: #15233b;
    transform: translateX(-50%);
  }
  .industry-chat-title {
    margin: -40px -14px 10px;
    padding: 40px 16px 14px;
    background: #123c80;
    color: #fff;
  }
  .industry-conversation .chat-message { font-size: .88rem; line-height: 1.52; }
  .industry-fields > span { font-size: .7rem; }

  /* Integrations: balanced type and equal cards, including custom code. */
  .setup { min-height: 92svh; padding-block: 88px; display: flex; align-items: center; }
  .setup .section-heading { margin-bottom: 32px; }
  .setup .section-heading h2 { font-size: 2.15rem; line-height: 1.14; }
  .setup .section-heading p { margin-top: 14px; font-size: 1rem; }
  .platforms { padding: 0; }
  .platforms > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 0;
  }
  .platforms > div > span {
    justify-content: flex-start;
    min-height: 62px;
    padding: 12px;
    font-size: .84rem;
    box-shadow: 0 12px 28px -25px #12376c66;
  }
  .platforms > div > span:last-child { grid-column: 1 / -1; }
  .platform-wordmark { min-width: 28px; font-size: .7rem; }
}

@media (max-width: 370px) {
  .hero h1 { font-size: 1.72rem; }
  .outcome-stop { grid-template-columns: 112px 1fr; gap: 14px; padding: 14px; }
  .outcome-visual { height: 116px; }
  .compare-head > *, .compare-row > * { padding-inline: 6px; font-size: .67rem; }
}

/* Mobile polish: compact glass navigation, stronger first viewport and
   touch-first controls while retaining chattastic's own visual language. */
@media (max-width: 600px) {
  html { scroll-padding-top: 92px; }
  .site-header { top:0;height:84px;padding-top:10px;border:0;background:linear-gradient(#ffffffed 0 72%,#ffffff00);-webkit-backdrop-filter:none;backdrop-filter:none }
  .site-header.scrolled { border:0 }
  .site-header .nav { width:calc(100% - 24px);height:64px;padding:0 12px 0 15px;border:1px solid #d9e3f2;border-radius:20px;background:#fffffff2;box-shadow:0 14px 38px -28px #102f6466,inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25) }
  .site-header .brand { font-size:1.25rem;gap:8px }
  .site-header .brand img { width:32px;height:32px }
  .nav-actions .button.small,.nav-actions .login { display:none }
  .menu-toggle { display:grid;place-content:center;width:46px;height:46px;padding:9px;border-radius:14px }
  .menu-toggle:hover,.menu-toggle[aria-expanded=true] { background:#edf3ff }
  .menu-toggle span { width:23px;margin:4px 0 }
  .mobile-nav { top:78px;left:12px;right:12px;padding:8px 14px 14px;border:1px solid #d9e3f2;border-radius:18px;background:#fffffff5;box-shadow:0 24px 56px -28px #102f6480;-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2) }
  .mobile-nav a { min-height:48px;display:flex;align-items:center;padding:11px 7px }
  .hero { padding:34px 0 64px }
  .hero-inner { width:calc(100% - 28px) }
  .hero h1 { font-size:clamp(1.98rem,9.75vw,2.62rem);line-height:1.08;letter-spacing:-.036em }
  .hero h1 .hero-line.h1-mark { margin-top:.16em;padding:.05em .14em .08em;border-radius:.18em }
  .hero-copy { margin-top:22px;font-size:1.05rem;line-height:1.58;max-width:35ch }
  .hero-copy strong { color:#12295c }
  .hero .builder-form { width:100%;max-width:380px;margin-top:25px }
  .domain-entry { gap:8px;padding:8px;border-radius:20px;box-shadow:0 18px 45px -31px #174b9d80 }
  .domain-entry input { min-height:48px;padding:10px 12px;font-size:16px }
  .domain-entry .button { min-height:54px;border-radius:14px;font-size:1rem }
  .hero-offer { display:flex;flex-wrap:nowrap;justify-content:flex-start;width:100%;margin-top:14px;padding:2px 1px 7px;gap:13px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none }
  .hero-offer::-webkit-scrollbar { display:none }
  .hero-offer span { flex:0 0 auto;scroll-snap-align:start;font-size:.72rem;white-space:nowrap }
  .section-heading h2,.outcome-heading h2,.benefit-heading h2,.dashboard-section-heading h2,.price-copy h2,.faq-layout>h2 { font-size:clamp(2rem,9.2vw,2.55rem);line-height:1.11;text-wrap:balance }
  .section-heading p,.outcome-heading p { line-height:1.65 }
  .button { min-height:52px;border-radius:14px }
  .price-card,.comparison,.design-lab,.settings-preview,.pipeline-app { border-radius:20px }
  .final-cta .button { width:min(100%,380px) }
  .footer-bottom { align-items:flex-start }
}