/* chattastic — unified homepage art direction, loaded after the legacy styles. */
:root {
  --navy: #081726;
  --navy-soft: #102b40;
  --ink: #102438;
  --blue: #2764e8;
  --blue-dark: #1852ce;
  --accent-light: #94b0e8;
  --brand-strong: #19397a;
  --paper: #f5f8f9;
  --line: #dce5e9;
  --space: clamp(88px, 9vw, 132px);
  --h2: clamp(2.35rem, 4.2vw, 4rem);
}
html { scroll-padding-top: 98px; }
body { color: var(--ink); background: #fff; font-family: 'Plus Jakarta Sans', Jakarta, Arial, sans-serif; }
main { overflow: clip; }
h1, h2, h3 { letter-spacing: -.037em; word-spacing: .09em; }
h2 { line-height: 1.13; }
p { color: #5d7080; }
.container { width: min(1160px, calc(100% - 72px)); }
.section { padding-block: var(--space); }
.section-heading h2, .outcome-heading h2, .benefit-heading h2, .price-copy h2, .faq-layout h2 { font-size: var(--h2); line-height: 1.14; }
.section-heading p, .outcome-heading p { max-width: 660px; line-height: 1.65; }
.blue-text { color: #2562de; }
.section-kicker { margin: 0 0 19px !important; color: #334871 !important; font-size: .72rem !important; line-height: 1.3 !important; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.button { border-radius: 13px; font-weight: 700; }
.button.blue { background: #2866eb; box-shadow: 0 12px 26px #164ab72b; }
.button.blue:hover { background: #1856d8; box-shadow: 0 16px 32px #164ab745; }

/* A floating glass navigation belongs to the hero and stays legible on every section. */
.site-header, .site-header.scrolled { position: fixed; z-index: 90; inset: 0 0 auto; height: auto; padding: 18px 0 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header .nav { width: min(1120px, calc(100% - 48px)); height: 68px; padding: 0 15px 0 23px; border: 1px solid #ffffff25; border-radius: 22px; background: #10283acb; box-shadow: 0 15px 42px #030e1d40, inset 0 1px #ffffff1b; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.site-header.scrolled { padding-top: 10px; }
.site-header.scrolled .nav { background: #091c2be8; }
.site-header .brand, .site-header .brand .brand-ending, .site-header .desktop-nav a, .site-header .login { color: #f5fbff; }
.site-header .brand { font-size: 1.35rem; gap: 10px; }
.site-header .brand img { filter: brightness(0) invert(1); }
.site-header .desktop-nav { gap: clamp(16px, 2vw, 29px); }
.site-header .desktop-nav a { font-size: .84rem; opacity: .86; }
.site-header .desktop-nav a:hover, .site-header .login:hover { color: #a5bdec; opacity: 1; }
.site-header .login { font-size: .84rem; }
.site-header .button.blue.small { color: #0d2538; background: #fff; border-color: #fff; border-radius: 13px; box-shadow: none; }
.site-header .button.blue.small:hover { color: #0d2538; background: #d8e3f9; }

/* The claim owns the first screen. The product view supports it below the CTA. */
.hero { position: relative; display: block; min-height: 0; padding: 164px 0 0; color: #fff; text-align: center; isolation: isolate; background: radial-gradient(ellipse 75% 42% at 50% 0%, #254f67 0%, transparent 72%), radial-gradient(ellipse 45% 48% at 96% 70%, #101b3b 0%, transparent 80%), linear-gradient(164deg, #071521 16%, #06111d 67%, #0b1b2d); }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(#e2ecff 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, #000, transparent 68%); }
.hero-inner, .hero-message { width: 100%; max-width: 1100px; }
.hero-message { margin: 0 auto; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 24px; padding: 7px 14px; border: 1px solid #ffffff26; border-radius: 999px; background: #ffffff13; color: #dae7ee; font-size: .82rem; font-weight: 600; }
.eyebrow-spark { color: var(--accent-light); font-size: 1.05rem; line-height: 1; }
.hero h1 { max-width: 1030px; margin-inline: auto; color: #fff; font-size: clamp(3.75rem, 6.15vw, 5.85rem); font-weight: 600; line-height: 1.075; letter-spacing: -.055em; word-spacing: .04em; text-wrap: balance; }
.hero .desktop-claim { display: block; }
.hero .mobile-claim { display: none; }
.hero h1 em { color: #a9c0ef; font-style: normal; font-weight: 700; }
.hero-copy { max-width: 640px; margin: 25px auto 0; color: #ccdbe5; font-size: clamp(1.08rem, 1.5vw, 1.26rem); line-height: 1.56; text-wrap: balance; }
.hero .builder-form { width: min(690px, 100%); max-width: none; margin: 32px auto 0; }
.hero .domain-entry { display: flex; align-items: center; gap: 12px; padding: 7px; border: 1px solid #fff; border-radius: 18px; background: #fff; box-shadow: 0 22px 60px #010b1b54; }
.hero .domain-entry > .icon { flex: 0 0 20px; margin-left: 13px; color: #6a8292; }
.hero .domain-entry input { flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 8px 3px; color: #173047; font-size: 1.05rem; }
.hero .domain-entry .button { flex: 0 0 auto; min-height: 56px; padding: 11px 24px; border-radius: 12px; font-size: 1.02rem; }
.hero-offer { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; width: 100%; max-width: none; margin: 17px auto 0; padding: 0; overflow: visible; }
.hero-offer span { gap: 7px; padding: 0; border: 0; background: none; color: #d9e2f3; font-size: .81rem; font-weight: 600; white-space: nowrap; }
.hero-offer .icon { display: block; color: #779adf; width: 16px; height: 16px; flex-basis: 16px; }
.hero-social-proof { display: flex; align-items: center; justify-content: center; gap: 19px; margin: 31px auto 0; color: #fff; }
.social-logos { display: flex; align-items: center; padding-left: 11px; }
.social-logos > span { display: grid; place-items: center; width: 65px; height: 50px; margin-left: -11px; border: 2px solid #0b1c2d; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 9px 22px #0004; }
.social-logos img { display: block; width: 100%; height: 100%; object-fit: contain; }
.social-logos img[alt="Younite Agency"] { transform: scale(1.65); }
.social-logos img[alt="Institut Makelloos Kosmetik"] { transform: scale(1.55); }
.social-logos img[alt="Media + Druck Hahn"] { transform: scale(1.15); }
.social-logos img[alt="San Pepetone"] { transform: scale(.83); border-radius: 50%; }
.social-count { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 4px 16px 4px 4px; border: 1px solid #ffffff25; border-radius: 999px; background: #ffffff12; color: #eff2f9; font-size: .85rem; line-height: 1.35; }
.social-count strong { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: #fff; color: #0a2233; font-size: .86rem; }
/* A concise four-step story, followed by a single proof band. */
.customer-outcomes { background: #fff; }
.outcome-heading { max-width: 850px; margin-bottom: 38px; }
.outcome-heading h2 { color: #102438; }
.outcome-heading p:not(.section-kicker) { margin-top: 20px; }
.outcome-flow { gap: 14px; }
.outcome-track { display: none; }
.outcome-stop { position: relative; padding: 22px 18px 25px; border: 1px solid #e0e3ea; border-radius: 18px; background: #fff; text-align: left; box-shadow: 0 16px 40px -36px #0f263b55; }
.outcome-visual { height: 190px; background: transparent; }
.outcome-stop h3 { margin-top: 19px; color: #163044; font-size: 1.02rem; }
.outcome-stop p { margin-top: 7px; color: #647887; font-size: .85rem; }
.outcome-contact { background: #215fdd; }
.outcome-order { background: #183b80; }
.mobile-flow-icon { display: none; }
.outcome-promise { border-color: #e4e7ec; color: #2f3d59; font-size: .95rem; }
.outcome-promise .icon { color: #173c86; }

/* Dark section with strong contrast and quiet geometry. */
.business-benefits { background: radial-gradient(ellipse at 85% 10%, #19465a 0, transparent 46%), #0b2031; color: #fff; }
.benefit-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 70px; margin-bottom: 42px; }
.benefit-heading h2, .business-benefits .blue-text { color: #fff; }
.business-benefits .blue-text { color: #a0b8e8; }
.business-benefits .section-kicker { color: #97aedb !important; }
.benefit-proof { justify-content: flex-end; gap: 20px; }
.benefit-proof > strong { color: #a6bdeb; font-size: clamp(3.2rem, 6vw, 5.4rem); }
.benefit-proof p { color: #f1f3f8; }
.benefit-proof span, .benefit-proof small, .benefit-proof a { color: #b6cbd2; }
.benefit-grid { gap: 14px; }
.benefit-grid article { min-height: 240px; padding: 25px; border: 1px solid #ffffff22; border-radius: 18px; background: #ffffff0a; }
.benefit-icon { width: 46px; height: 46px; margin-bottom: 34px; border: 1px solid #abc1ed37; border-radius: 13px; background: #a6bce813; color: #a6bce8; }
.benefit-grid h3 { color: #fff; font-size: 1.08rem; }
.benefit-grid p { color: #b8cbd5; font-size: .9rem; }

/* Three steps without scroll trapping or hidden text. */
.start-tour, .start-tour.is-enhanced:not(.start-unpinned) { height: auto; min-height: 0; margin: 0; padding: var(--space) 0; background: #f5f6f8; color: #142a3b; }
.start-tour .start-pin, .start-tour.is-enhanced:not(.start-unpinned) .start-pin { position: static; height: auto; display: block; padding: 0; background: transparent; }
.start-layout { gap: clamp(36px, 6vw, 85px); }
.start-copy h2 { gap: 13px; color: #102438; font-size: clamp(2rem, 3.1vw, 2.75rem); }
.start-copy h2 .blue-text { color: #1d3b76; }
.start-number { color: #24417b; }
.start-step { border: 1px solid transparent; border-radius: 14px; }
.start-step.active { border-color: #c5cdde; background: #e7ebf3; color: #182f5d; }
.start-step.active > span { background: #183b81; border-color: #183b81; }
.start-stage { min-width: 0; }
.start-panel { height: 390px; }
.start-domain-visual, .start-ai-visual, .start-chat { box-shadow: 0 24px 55px -39px #17354a55; }
.start-ai-visual { width: min(430px, 100%); padding: 30px 22px; border: 1px solid #dbdfe7; border-radius: 18px; background: #fff; color: #142a3b; }
.start-ai-visual h3 { color: #142a3b !important; }
.start-checks > div { color: #31405d; background: #f0f3f8; }
.start-controls > span { color: #687182; }

/* Product UI: generous container and four readable metrics on every screen. */
.product-dashboard { background: #fff; }
.dashboard-section-heading { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .5fr); gap: 50px; align-items: end; }
.dashboard-section-heading > div { max-width: 720px; }
.dashboard-section-heading h2 { font-size: clamp(2.5rem, 3.6vw, 3.3rem); }
.dashboard-section-heading p:not(.section-kicker) { max-width: 350px; }
.pipeline-app { border-color: #dce0e9; border-radius: 22px; box-shadow: 0 34px 70px -50px #19384c70; }
.pipeline-sidebar { background: #f8f9fb; border-color: #e2e5eb; }
.pipeline-nav .selected { color: #173063; background: #e9edf4; }
.pipeline-kpis > div { border-color: #e1e9ed; border-radius: 12px; }
.pipeline-kpis .emphasized { background: #1c3b78; border-color: #1c3b78; }
.pipeline-insight { background: #eef1f7; }
.pipeline-insight > strong, .pipeline-insight .icon { color: #18397b; }
.pipeline-funnel i { background: #23407a; }
.pipeline-funnel > div:nth-of-type(2) i { background: #536ea4; }
.pipeline-funnel > div:nth-of-type(3) i { background: #a8b5cf; }
.dashboard-takeaways .icon { color: #143880; }

.difference { background: #f3f7ff; }
.knowledge { background: #fff; }

/* Results, then integrations. Each logo gets its own tile. */
.cases { background: radial-gradient(ellipse at 8% 3%, #1b4659, transparent 43%), #0b2132; color: #fff; }
.cases .section-heading { max-width: 800px; }
.cases .section-heading h2 { color: #fff; }
.cases .section-heading .blue-text { color: #a4bbe9; }
.cases .section-heading p:not(.section-kicker) { color: #bfced6; }
.cases .section-kicker { color: #a5bce9 !important; }
.case-toolbar { max-width: 100%; margin-bottom: 22px; }
.case-tabs { justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.case-tabs button { min-height: 45px; border: 1px solid #ffffff28; border-radius: 12px; color: #d1d8e5; background: #ffffff0e; }
.case-tabs button[aria-selected="true"] { border-color: #a8bee9; color: #17233b; background: #b5c9f1; }
.case-card { max-width: none; border: 1px solid #e1e4e9; border-radius: 22px; background: #fff; color: #123047; box-shadow: 0 30px 60px -45px #0008; }
.case-narrative { padding: clamp(28px, 5vw, 58px); }
.case-sector-heading { margin-bottom: 22px; }
.case-sector-symbol { background: #edf0f7; color: #1e3f82; }
.case-mode { color: #586681; }
.case-funnel { gap: 12px; }
.case-funnel > div { border-radius: 13px; background: #f4f5f8; }
.case-funnel > div.won { background: #dfe6f3; }
.case-funnel strong { color: #16233d; }
.case-funnel > div.won strong { color: #16387b; }
.case-conversion { padding: 17px 20px; border-radius: 12px; background: #edf0f7; color: #38445c; }
.case-conversion strong { color: #163a82; }
.case-narrative h3 { margin-top: 28px; max-width: 620px; color: #163047; font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.23; }
.case-result { color: #5d7180; }
.industry-cta { margin-top: 26px; color: #17346e; }
.setup { background: #fff; }
.setup .section-heading { margin-bottom: 43px; }
.platforms { margin: 0; padding: 0; border: 0; }
.platforms > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; margin-top: 0; }
.platforms > div > .platform-tile { min-width: 0; min-height: 125px; padding: 20px; border: 1px solid #dde1e9; border-radius: 17px; background: #f8f9fb; box-shadow: none; }
.platforms .platform-tile img { width: 58px; height: 58px; }
.platforms .platform-tile img[alt="Jimdo"] { width: 105px; height: 55px; }
.platforms > div > .platform-code { grid-column: 1 / -1; min-height: 62px; border: 1px dashed #c9ced8; border-radius: 14px; background: #f8f9fb; color: #455066; }

/* Calm purchase decision and a compact end to the page. */
.pricing { background: #f2f3f6; }
.price-layout { align-items: center; gap: clamp(40px, 7vw, 110px); }
.price-copy .section-kicker { margin-bottom: 23px !important; }
.price-copy h2 { color: #10283a; }
.price-copy .blue-text { color: #163779; }
.price-copy > p:not(.section-kicker) { max-width: 480px; margin-top: 25px; }
.price-card { border: 1px solid #d9dde5; border-radius: 22px; box-shadow: 0 30px 75px -50px #102f425e; }
.price-tag.offer { background: #dfe6f5; color: #163677; border-radius: 999px; }
.price-amount strong { color: #0f244d; }
.price-switch button[aria-pressed="true"] { color: #17346e; }
.price-features .icon { color: #163b84; }
.faq { background: #fff; }
.faq-layout { gap: clamp(40px, 7vw, 100px); }
.faq-list details { border-color: #dfe2e8; }
.faq-list summary { color: #1b3548; }
.industries { padding: 40px 0 80px; background: #fff; }
.industries .container { padding-top: 36px; border-top: 1px solid #e1e4e9; }
.industries .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 0; }
.industries .section-heading h2 { font-size: clamp(1.65rem, 2.7vw, 2.45rem); }
.industries .section-heading h2 br { display: none; }
.industries .section-heading p { max-width: 330px; margin: 0; font-size: .9rem; }
.industry-disclosure { margin-top: 23px; }
.industry-disclosure summary { display: inline-flex; align-items: center; gap: 14px; padding: 11px 17px; border: 1px solid #d5dae4; border-radius: 12px; background: #f3f5f8; color: #182f5d; font-size: .85rem; font-weight: 700; list-style: none; cursor: pointer; }
.industry-disclosure summary::-webkit-details-marker { display: none; }
.industry-disclosure summary span { transition: transform .2s; }
.industry-disclosure[open] summary span { transform: rotate(90deg); }
.industry-disclosure .industry-grid { margin-top: 26px; }
.industry-grid a { min-height: 126px; border-color: #e1e4e9; border-radius: 14px; background: #f9fafb; }
.final-cta { margin: 0; padding: clamp(90px, 10vw, 140px) 0; background: radial-gradient(ellipse at 75% 0%, #1f3560, transparent 48%), #081b2b; color: #fff; }
.final-cta h2 { color: #fff; }
.final-cta h2 span { color: #a8bfee; }
.final-cta p { color: #c5d7df; }
.footer { background: #071827; color: #d8e5eb; }
.footer p, .footer a, .footer-bottom { color: #adbfca; }
.footer .brand, .footer .brand-ending { color: #fff; }
.footer .brand img { filter: brightness(0) invert(1); }

@media (max-width: 999px) {
  .site-header .desktop-nav { display: none; }
  .menu-toggle span { background: #fff; }
  .mobile-nav { top: 92px; border-color: #ffffff25; background: #0d2637f5; }
  .mobile-nav a { color: #fff; }
  .benefit-heading { grid-template-columns: 1fr; gap: 26px; }
  .benefit-proof { justify-content: flex-start; }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platforms > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-section-heading { display: block; }
  .dashboard-section-heading p:not(.section-kicker) { max-width: 650px; margin-top: 19px; }
}
@media (max-width: 760px) {
  :root { --space: 74px; --h2: clamp(2rem, 8.4vw, 2.7rem); }
  html { overflow-x: clip; overflow-y: auto; scroll-behavior: auto; scroll-padding-top: 86px; }
  body { overflow: visible; }
  main { overflow: clip; }
  .container, .hero-inner { width: auto; max-width: none; margin-inline: 19px; }
  .section, .customer-outcomes, .product-dashboard, .difference, .knowledge, .cases, .setup, .pricing, .faq { padding-block: var(--space); }
  .site-header, .site-header.scrolled { position: fixed; height: auto; padding: 10px 0 0; background: transparent; }
  .site-header .nav { width: calc(100% - 24px); height: 62px; margin-inline: auto; padding: 0 12px 0 17px; border-radius: 18px; background: #10283be9; }
  .site-header .brand { font-size: 1.22rem; }
  .site-header .brand img { width: 32px; height: 32px; }
  .menu-toggle, .menu-toggle:hover, .menu-toggle[aria-expanded="true"] { display: grid; place-content: center; background: transparent; }
  .menu-toggle span { background: #fff; }
  .mobile-nav { top: 78px; left: 12px; right: 12px; border-color: #ffffff25; border-radius: 18px; background: #0d2637f5; }
  .mobile-nav a { color: #fff; }
  .hero { display: block; min-height: 100svh; padding: clamp(110px, 14svh, 140px) 0 55px; background: radial-gradient(ellipse at 52% -8%, #23506b, transparent 65%), linear-gradient(160deg, #071521, #0b2637 78%, #081a2a); }
  .hero::before { background-size: 37px 37px; opacity: .15; }
  .hero-eyebrow { display: none; }
  .hero .desktop-claim { display: none; }
  .hero .mobile-claim { display: block; }
  .hero h1 { width: 100%; max-width: 570px; color: #fff; font-size: clamp(2.24rem, 9.6vw, 3.25rem); line-height: 1.09; letter-spacing: -.045em; word-spacing: .02em; text-wrap: balance; overflow-wrap: normal; }
  .hero h1 .mobile-claim em { display: block; margin: .07em 0; color: #a8c0ef; font-weight: 700; }
  .hero-copy { max-width: 38ch; margin: 19px auto 0; color: #d7e5ec; font-size: clamp(1.05rem, 4.3vw, 1.22rem); line-height: 1.5; }
  .hero .builder-form { width: 100%; max-width: 430px; margin: 25px auto 0; }
  .hero .domain-entry { display: grid; gap: 5px; padding: 7px; border-radius: 17px; }
  .hero .domain-entry > .icon { display: none; }
  .hero .domain-entry input { width: 100%; min-height: 45px; padding: 8px 12px; font-size: 16px; }
  .hero .domain-entry .button { width: 100%; min-height: 56px; padding: 8px 14px; justify-content: center; font-size: clamp(1.2rem, 5.2vw, 1.45rem); }
  .hero-offer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 13px; max-width: 380px; margin-top: 15px; }
  .hero-offer span { display: inline-flex; flex: 0 0 auto; padding: 0; color: #dbe4f5; border: 0; background: none; font-size: .76rem; }
  .hero-offer .icon { display: block; color: #80a3e8; width: 14px; height: 14px; flex-basis: 14px; }
  .hero-social-proof { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
  .social-logos > span { width: 55px; height: 43px; border-radius: 12px; }
  .social-count { min-height: 42px; padding: 3px 13px 3px 3px; font-size: .75rem; }
  .social-count strong { width: 34px; height: 34px; flex-basis: 34px; font-size: .8rem; }
  .hero-product-preview { display: none; }
  .section-heading, .outcome-heading, .benefit-heading, .dashboard-section-heading { margin-bottom: 28px; }
  .section-heading h2, .outcome-heading h2, .benefit-heading h2, .dashboard-section-heading h2, .knowledge-copy h2, .price-copy h2, .faq-layout h2 { font-size: var(--h2); letter-spacing: -.03em; line-height: 1.16; word-spacing: .1em; hyphens: none; text-wrap: balance; }
  .section-kicker { margin-bottom: 14px !important; font-size: .66rem !important; }
  .outcome-heading p:not(.section-kicker) { margin-top: 16px; }
  .outcome-flow { grid-template-columns: 1fr; gap: 12px; padding-left: 39px; }
  .outcome-flow::before { left: 15px; background: linear-gradient(#9eaecd, #284888); }
  .outcome-stop { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; min-height: 97px; padding: 17px; border-radius: 15px; }
  .outcome-stop::before { top: 30px; left: -39px; width: 32px; height: 32px; border-color: #fff; background: #17346d; }
  .outcome-inquiry::before { content: '✓'; background: #1745a2; }
  .outcome-meeting::before { content: '3'; }
  .outcome-customer::before { content: '4'; }
  .outcome-visual { display: none; }
  .mobile-flow-icon { display: grid; grid-row: 1 / 3; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #eef1f6; color: #213f7b; }
  .outcome-inquiry .mobile-flow-icon { background: #dfe6f5; color: #143983; }
  .mobile-flow-icon .icon { width: 21px; height: 21px; }
  .outcome-stop h3 { grid-column: 2; margin: 0; font-size: 1rem; }
  .outcome-stop p { grid-column: 2; margin-top: 2px; font-size: .82rem; }
  .outcome-promise { margin-top: 28px; font-size: .86rem; }
  .business-benefits { background: radial-gradient(ellipse at 90% 0%, #1b4b5c, transparent 50%), #0b2031; }
  .benefit-heading { display: block; }
  .benefit-proof { margin-top: 30px; justify-content: flex-start; }
  .benefit-proof > strong { font-size: 3.6rem; }
  .benefit-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .benefit-grid article { display: block; min-height: 0; padding: 18px; border-color: #ffffff24; background: #ffffff0b; }
  .benefit-icon { width: 38px; height: 38px; margin-bottom: 17px; }
  .benefit-grid h3 { font-size: .94rem; }
  .benefit-grid p { margin-top: 7px; color: #c6d6dd; font-size: .8rem; line-height: 1.52; }
  .start-tour, .start-tour.is-enhanced:not(.start-unpinned) { padding: 76px 0; color: #142a3b; background: #f5f6f8; }
  .start-layout { grid-template-columns: 1fr; gap: 22px; }
  .start-copy h2 { display: block; color: #102438; text-align: center; font-size: 1.85rem; }
  .start-copy h2 .blue-text { color: #19397a; }
  .start-number { display: flex; justify-content: center; align-items: baseline; margin-bottom: 12px; color: #19397a; font-size: 4.3rem; }
  .start-number > span { color: #49556e; }
  .start-steps { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 25px; }
  .start-step { display: flex; align-items: center; gap: 12px; min-height: 65px; padding: 10px 13px; color: #404a5d; border: 1px solid #d9dde6; background: #fff; }
  .start-step > span { flex: 0 0 31px; width: 31px; height: 31px; margin: 0; }
  .start-step strong { color: #16223b; font-size: .92rem; }
  .start-step p { color: #616979; font-size: .76rem; margin-top: 2px; }
  .start-step.active { border-color: #9aabcd; background: #e8ecf5; }
  .start-step.active strong { color: #122a5b; }
  .start-stage { padding: 8px; border-color: #dce0e8; background: #eef0f5; }
  .start-panel { height: auto; min-height: 315px; }
  .start-domain-visual, .start-ai-visual, .start-chat { color: #142a3b; }
  .start-ai-visual { padding: 24px 18px; background: #fff; }
  .start-checks > div { color: #303e5a; }
  .start-controls > span { color: #535b6c; }
  .product-dashboard { background: #fff; }
  .dashboard-section-heading { display: block; }
  .dashboard-section-heading p:not(.section-kicker) { margin-top: 17px; }
  .pipeline-app { width: 100%; border-radius: 17px; }
  .pipeline-sidebar { display: none; }
  .pipeline-main { padding: 18px 15px; }
  .pipeline-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pipeline-kpis > div { padding: 13px; }
  .pipeline-kpis strong { font-size: 1.75rem; }
  .pipeline-kpis span { font-size: .75rem; }
  .pipeline-middle { grid-template-columns: 1fr; margin: 19px 0; }
  .pipeline-funnel > div { grid-template-columns: minmax(98px, 1fr) minmax(35px, 1fr) 20px; gap: 7px; }
  .pipeline-funnel > div > span { font-size: .73rem; }
  .pipeline-insight { display: none; }
  .pipeline-table-title, .pipeline-table, .pipeline-action { display: none; }
  .dashboard-takeaways { gap: 11px; justify-content: flex-start; }
  .dashboard-takeaways > span { color: #36435d; font-size: .81rem; }
  .knowledge-flow { width: 100%; }
  .cases .section-heading h2, .cases .section-heading .blue-text { color: #fff; }
  .cases .section-heading .blue-text { color: #a4bbe9; }
  .case-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .case-tabs button { width: 100%; min-height: 50px; color: #e4edf1; border-color: #ffffff25; background: #ffffff12; }
  .case-tabs button[aria-selected="true"] { color: #162647; border-color: #a4bbe9; background: #b5c9f1; }
  .case-card { display: block; overflow: hidden; border-radius: 17px; }
  .case-narrative { padding: 23px 18px; }
  .case-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .case-funnel > div { min-width: 0; }
  .case-narrative h3 { margin-top: 22px; font-size: 1.42rem; }
  .case-conversion { padding: 14px; }
  .setup { background: #fff; }
  .platforms > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .platforms > div > .platform-tile { min-height: 108px; padding: 15px; background: #f8f9fb; }
  .platforms > div > .platform-code { grid-column: 1 / -1; min-height: 66px; }
  .price-layout, .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .price-card { padding: 25px 20px; }
  .faq-layout h2 { max-width: 14ch; }
  .industries { padding: 30px 0 65px; }
  .industries .container { padding-top: 28px; }
  .industries .section-heading { display: block; }
  .industries .section-heading h2 { font-size: 1.75rem; }
  .industries .section-heading p { max-width: 40ch; margin-top: 12px; }
  .industry-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .industry-grid a { min-height: 140px; padding: 15px; }
  .final-cta { padding: 85px 0; }
  .footer { background: #071827; }
}
@media (max-width: 380px) {
  .container, .hero-inner { margin-inline: 15px; }
  .hero { padding-top: 105px; }
  .hero h1 { font-size: clamp(2.12rem, 9.2vw, 2.35rem); }
  .hero-copy { font-size: 1rem; }
  .social-logos > span { width: 50px; height: 40px; }
  .social-count { font-size: .7rem; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-grid article { min-height: 0; }
  .industry-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-product-preview *, .start-panel * { animation: none !important; transition: none !important; }
}
/* Brand blue, a complete first screen, and separated customer marks. */
:root { --blue: #2563eb; --blue-dark: #1d4ed8; --accent-light: #a8c7ff; --brand-strong: #2563eb; }
.button.blue { background: #2563eb; }
.blue-text, .section-kicker { color: #2563eb; }
.section-kicker { color: #2563eb !important; }
.site-header .nav { background: #0b2257da; }
.site-header.scrolled .nav { background: #0b2257ed; }
.site-header .desktop-nav a:hover, .site-header .login:hover { color: #bdd5ff; }
.site-header .button.blue.small:hover { background: #e8f0ff; }
.hero { display: flex; align-items: center; min-height: 100svh; padding: clamp(108px, 13svh, 138px) 0 clamp(24px, 4svh, 46px); background: radial-gradient(ellipse at 50% -20%, #5085ff 0, transparent 64%), linear-gradient(130deg, #1d4ed8, #2563eb 50%, #163ca9); }
.hero-inner { width: min(1100px, calc(100% - 64px)); margin-inline: auto; }
.hero-eyebrow { display: inline-flex; margin-bottom: clamp(12px, 2svh, 22px); padding: 6px 12px; color: #fff; font-size: .8rem; background: #ffffff0f; }
.eyebrow-spark { color: #c8ddff; }
.hero h1 { font-size: clamp(3rem, min(6.1vw, 8.5svh), 5.5rem); line-height: 1.07; font-weight: 600; }
.hero h1 em { color: #b7d5ff; font-weight: 800; }
.hero-copy { max-width: 650px; margin-top: clamp(14px, 2.5svh, 24px); color: #f0f5ff; font-size: clamp(1.1rem, 2.5svh, 1.3rem); line-height: 1.5; }
.hero .builder-form { margin-top: clamp(20px, 3svh, 30px); }
.hero .domain-entry { box-shadow: 0 16px 44px #061b5a30; }
.hero .domain-entry .button { min-height: 58px; padding-inline: 24px; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.hero-offer { gap: 20px; margin-top: 14px; }
.hero-offer span { color: #f2f6ff; }
.hero-offer .icon { color: #b9d5ff; }
.hero-social-proof { flex-direction: column-reverse; width: min(660px, 100%); gap: 12px; margin-top: clamp(22px, 3.5svh, 34px); padding: 14px 24px; border: 1px solid #ffffff90; border-radius: 18px; background: #f4f7ff; box-shadow: none; }
.social-count { display: block; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #3b527b; font-size: .82rem; line-height: 1.4; }
.social-count strong { display: inline; width: auto; height: auto; margin-right: 4px; border-radius: 0; background: none; color: #173e97; font-size: inherit; font-weight: 800; }
.social-logos { display: grid; grid-template-columns: 1.35fr 1.35fr .8fr .65fr 1.1fr; align-items: center; gap: 22px; width: 100%; padding: 0; }
.social-logos > span { display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.social-logos img, .social-logos img[alt] { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; transform: none; border-radius: 0; }

/* Familiar moments, expressed as short, readable scenes. */
.everyday { background: #f7f9fe; }
.everyday .section-heading { max-width: 800px; margin-inline: auto; margin-bottom: 40px; }
.everyday .section-heading p { margin-inline: auto; }
.everyday-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.everyday-card { min-width: 0; padding: 13px 13px 24px; border: 1px solid #dce5f3; border-radius: 19px; background: #fff; }
.everyday-scene { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 13px 10px; min-height: 124px; padding: 19px 15px; border-radius: 12px; background: linear-gradient(135deg, #eaf1ff, #f4f7ff); }
.everyday-scene > .icon { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: #fff; color: #2563eb; box-shadow: 0 3px 8px #1b4c9d08; }
.everyday-scene > span { color: #4e6792; font-size: .68rem; font-weight: 600; }
.everyday-scene strong { grid-column: 1 / -1; color: #234b8d; font-size: .85rem; letter-spacing: -.02em; }
.everyday-card h3 { margin: 22px 8px 11px; color: #142d51; font-size: 1.12rem; line-height: 1.35; }
.everyday-card > p { margin-inline: 8px; font-size: .85rem; line-height: 1.65; }
.everyday-answer { display: flex; align-items: center; gap: 18px; margin-top: 25px; padding: 23px 26px; border: 1px solid #d0dffd; border-radius: 17px; background: #eaf1ff; }
.everyday-answer-mark { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 12px; color: #fff; background: #2563eb; }
.everyday-answer p { max-width: 740px; color: #536c91; font-size: .9rem; }
.everyday-answer p strong { display: block; margin-bottom: 3px; color: #1a3e7c; }
.everyday-answer .text-link { margin-left: auto; flex-shrink: 0; color: #1d4ed8; font-size: .82rem; }

/* Automatic tour: a fixed stage avoids layout jumps between panels. */
.start-tour, .start-tour.is-enhanced:not(.start-unpinned) { background: #f2f6ff; }
.start-copy h2 .blue-text, .start-number { color: #2563eb; }
.start-number > span { color: #4a6798; }
.start-step.active { border-color: #aac5ff; background: #e3edff; color: #174bb4; }
.start-step.active > span { border-color: #2563eb; background: #2563eb; color: #fff; }
.start-panel { height: 470px; }
.start-ai-visual { border-color: #d8e4f9; background: #fff; }
.start-ai-visual h3, .start-domain-body h3 { color: #142d51 !important; }
.start-checks > div { color: #2a4f85; background: #eff5ff; }
.start-checks .icon { color: #2563eb; }
.start-chat { height: 440px; }
.start-chat-thread { overflow: visible; }
.start-chat > header div > span i { background: #a9c9ff; }
.start-controls { gap: 12px; margin-top: 16px; }
.start-controls > span { color: #496185; }
.start-autoplay { margin-right: auto; padding: 9px 12px; border: 1px solid #cbdaf4; border-radius: 9px; background: #fff; color: #335785; font-size: .72rem; font-weight: 700; }
.start-autoplay:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.start-progress { height: 3px; margin-top: 14px; overflow: hidden; border-radius: 3px; background: #dbe7fb; }
.start-progress > span { display: block; width: 0; height: 100%; background: #2563eb; }
.start-tour.is-playing .start-progress > span { animation: tourProgress 6s linear forwards; }
@keyframes tourProgress { to { width: 100%; } }

/* A direct channel comparison with all four options visible on mobile. */
.difference { background: #f1f5ff; }
.difference .section-heading { max-width: 820px; margin-bottom: 40px; }
.channel-comparison { overflow: hidden; border: 1px solid #d6e1f6; border-radius: 20px; background: #fff; }
.channel-head, .channel-row { display: grid; grid-template-columns: 2.25fr repeat(4, 1fr); }
.channel-head { min-height: 82px; border-bottom: 1px solid #d6e1f6; background: #f9fbff; }
.channel-head > *, .channel-row > * { min-width: 0; display: flex; align-items: center; justify-content: center; padding: 19px 14px; text-align: center; }
.channel-head > * { color: #52698b; font-size: .83rem; font-weight: 700; }
.channel-head > :first-child, .channel-row > :first-child { justify-content: flex-start; padding-left: 26px; text-align: left; }
.channel-head .channel-best { gap: 7px; color: #fff; background: #2563eb; font-size: .9rem; }
.channel-head img { filter: brightness(0) invert(1); }
.channel-row + .channel-row { border-top: 1px solid #e4ebf7; }
.channel-row > strong { color: #2b4265; font-size: .86rem; line-height: 1.5; font-weight: 600; }
.channel-cell.channel-best { background: #edf3ff; }
.channel-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; color: #647895; font-size: 1.12rem; }
.channel-cell.yes .channel-mark { color: #2563eb; font-weight: 800; }
.channel-cell.channel-best .channel-mark { border-radius: 50%; background: #2563eb; color: #fff; font-size: 1rem; }
.channel-cell.no .channel-mark { color: #8b99af; }
.channel-mobile-label { display: none; }
.comparison-legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; color: #526887; font-size: .77rem; }
.comparison-legend b { margin-right: 4px; color: #2563eb; }
.comparison-note { max-width: 940px; margin-top: 11px; color: #607291; font-size: .73rem; line-height: 1.65; }
.comparison-summary { display: flex; align-items: center; gap: 14px; margin-top: 28px; color: #4c658c; font-size: .9rem; }
.comparison-summary > .icon { flex: 0 0 30px; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #2563eb; color: #fff; }
.comparison-summary strong { display: block; margin-bottom: 2px; color: #214d95; }

/* Website sources flow into one context-aware answer. */
.knowledge-copy h2 { font-size: clamp(2.2rem, 3.65vw, 3.3rem); }
.knowledge-copy > p:not(.section-kicker) { color: #5d708a; line-height: 1.75; }
.knowledge-layout { align-items: center; }
.website-knowledge { width: 100%; padding: 25px; border: 1px solid #dbe5f7; border-radius: 22px; background: #f4f7ff; }
.knowledge-browser { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid #dce6f8; }
.knowledge-browser > span:first-child { display: flex; align-items: center; gap: 8px; color: #294771; font-size: .82rem; font-weight: 700; }
.knowledge-browser .icon { width: 18px; height: 18px; color: #2563eb; }
.knowledge-badge { color: #7184a4; font-size: .65rem; }
.website-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 22px; }
.website-pages > span { display: flex; align-items: center; gap: 9px; padding: 13px; border: 1px solid #dae5f8; border-radius: 9px; background: #fff; color: #44628f; font-size: .8rem; }
.website-pages .icon { color: #2563eb; width: 16px; height: 16px; }
.knowledge-connection { display: flex; align-items: center; gap: 12px; width: 60%; margin: 18px auto; color: #6391e8; }
.knowledge-connection i { flex: 1; height: 1px; background: #c6d8fa; }
.knowledge-connection .icon { width: 19px; height: 19px; transform: rotate(90deg); }
.knowledge-assistant { display: flex; align-items: center; justify-content: center; gap: 11px; }
.knowledge-assistant img { border-radius: 11px; background: #fff; padding: 6px; }
.knowledge-assistant strong, .knowledge-assistant span { display: block; }
.knowledge-assistant strong { color: #1e4381; font-size: .85rem; }
.knowledge-assistant span { margin-top: 4px; color: #647b9d; font-size: .72rem; }
.knowledge-dialog { display: grid; gap: 13px; margin-top: 23px; }
.knowledge-question { max-width: 90%; margin-left: auto; padding: 15px 17px; border-radius: 12px 12px 3px 12px; background: #2563eb; color: #fff; font-size: .85rem; line-height: 1.55; }
.knowledge-answer { padding: 18px; border: 1px solid #d9e4f6; border-radius: 12px 12px 12px 3px; background: #fff; }
.knowledge-answer > span { color: #2563eb; font-size: .7rem; font-weight: 800; }
.knowledge-answer p { margin-top: 7px; color: #4d6485; font-size: .83rem; line-height: 1.65; }
.knowledge-answer > div { display: flex; gap: 7px; margin-top: 12px; }
.knowledge-answer > div span { padding: 5px 8px; border-radius: 5px; background: #edf3ff; color: #5675a4; font-size: .65rem; }
.business-benefits { background: radial-gradient(ellipse at 85% 0%, #153d84, transparent 50%), #0b1d40; }
.cases { background: radial-gradient(ellipse at 8% 0%, #173c82, transparent 48%), #0b1d40; }
.business-benefits .blue-text, .cases .section-heading .blue-text, .final-cta h2 span { color: #a8c7ff; }
.business-benefits .section-kicker, .cases .section-kicker { color: #a8c7ff !important; }
.benefit-proof > strong { color: #a8c7ff; }
.benefit-icon { color: #a8c7ff; border-color: #a8c7ff38; background: #a8c7ff12; }
.pipeline-connected span, .outcome-calendar i { background: #2563eb; }
.pipeline-kpis .emphasized, .outcome-order { background: #2563eb; border-color: #2563eb; }
.pipeline-funnel i { background: #2563eb; }
.pipeline-funnel > div:nth-of-type(2) i { background: #6395ff; }
.pipeline-funnel > div:nth-of-type(3) i { background: #a9c8ff; }
.pipeline-status { color: #1d4ed8; background: #eaf1ff; }
.pipeline-status.won { color: #1d4ed8; background: #dce9ff; }
.outcome-signal, .outcome-calendar > i { background: #2563eb; }
.outcome-calendar > i { color: #fff; }
.outcome-order > .icon, .price-saving { color: #2563eb; }
.final-cta { background: radial-gradient(ellipse at 75% 0%, #164caa, transparent 50%), #0b1d40; }

@media (max-width: 999px) {
  .everyday-grid { grid-template-columns: 1fr 1fr; }
  .channel-head, .channel-row { grid-template-columns: 1.8fr repeat(4, 1fr); }
  .channel-head > *, .channel-row > * { padding-inline: 10px; }
  .channel-head > :first-child, .channel-row > :first-child { padding-left: 17px; }
  .channel-head > * { font-size: .72rem; }
  .channel-head .channel-best { flex-direction: column; font-size: .8rem; }
  .everyday-answer { flex-wrap: wrap; }
  .everyday-answer p { flex: 1; }
}
@media (max-width: 760px) {
  .site-header .nav { background: #0b2257e8; }
  .mobile-nav { background: #0b2257f5; }
  .hero { display: flex; min-height: 100svh; padding: clamp(86px, 11.5svh, 112px) 0 clamp(12px, 2.5svh, 26px); background: radial-gradient(ellipse at 50% -20%, #5085ff, transparent 68%), linear-gradient(150deg, #2158dc, #2563eb 50%, #1841b0); }
  .hero-inner { width: calc(100% - 38px); margin-inline: auto; }
  .hero-eyebrow { display: inline-flex; padding: 4px 10px; margin-bottom: clamp(8px, 1.5svh, 15px); font-size: .7rem; line-height: 1.4; }
  .hero h1 { font-size: clamp(2rem, min(10.4vw, 5.4svh), 3.2rem); line-height: 1.065; letter-spacing: -.045em; }
  .hero h1 .mobile-claim em { display: inline; margin: 0; color: #b7d5ff; font-weight: 800; }
  .hero-copy { max-width: 37ch; margin-top: clamp(10px, 1.8svh, 18px); font-size: clamp(1rem, min(4.6vw, 2.2svh), 1.22rem); line-height: 1.4; color: #f0f5ff; }
  .hero .builder-form { max-width: 450px; margin-top: clamp(12px, 2svh, 21px); }
  .hero .domain-entry { gap: 4px; padding: 6px; }
  .hero .domain-entry input { min-height: 40px; padding: 7px 12px; }
  .hero .domain-entry .button { min-height: clamp(48px, 6.5svh, 58px); padding: 7px 12px; font-size: clamp(1.3rem, 5.5vw, 1.55rem); }
  .hero-offer { gap: 5px 10px; margin-top: 11px; max-width: none; }
  .hero-offer span { gap: 4px; color: #f2f6ff; font-size: clamp(.6rem, 2.75vw, .76rem); }
  .hero-offer .icon { color: #c5ddff; width: 12px; height: 12px; flex-basis: 12px; }
  .hero-social-proof { flex-direction: column-reverse; gap: 8px; margin-top: clamp(12px, 2svh, 21px); padding: 10px 12px; border-radius: 13px; }
  .social-count { min-height: 0; padding: 0; font-size: .67rem; color: #3b527b; }
  .social-count strong { width: auto; height: auto; font-size: inherit; }
  .social-logos { gap: 12px; }
  .social-logos > span { width: 100%; height: clamp(32px, 4.3svh, 40px); border: 0; border-radius: 0; }
  .everyday .section-heading { margin-bottom: 27px; }
  .everyday-grid { gap: 12px; }
  .everyday-card { padding: 10px 10px 19px; border-radius: 15px; }
  .everyday-scene { grid-template-columns: 1fr; gap: 9px; min-height: 151px; padding: 14px; }
  .everyday-scene > span { min-height: 29px; font-size: .65rem; line-height: 1.5; }
  .everyday-scene strong { font-size: .75rem; line-height: 1.4; }
  .everyday-card h3 { margin: 17px 4px 9px; font-size: .95rem; }
  .everyday-card > p { margin-inline: 4px; font-size: .78rem; line-height: 1.6; }
  .everyday-answer { align-items: flex-start; gap: 12px; margin-top: 18px; padding: 20px 17px; }
  .everyday-answer-mark { flex-basis: 35px; height: 35px; border-radius: 9px; }
  .everyday-answer-mark .icon { width: 19px; height: 19px; }
  .everyday-answer p { font-size: .82rem; }
  .everyday-answer .text-link { width: 100%; margin: 2px 0 0 47px; }
  .start-copy > .section-kicker { text-align: center; }
  .start-copy h2 .blue-text, .start-number { color: #2563eb; }
  .start-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 24px; }
  .start-step { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 12px 10px; border-color: #d9e5f9; background: #fff; min-height: 116px; }
  .start-step > span { flex: 0 0 27px; width: 27px; height: 27px; font-size: .65rem; }
  .start-step strong { color: #2b466e; font-size: .73rem; line-height: 1.4; }
  .start-step p { display: none; }
  .start-step.active { border-color: #a8c5ff; background: #e3edff; }
  .start-step.active strong { color: #194caa; }
  .start-stage { padding: 0; border: 0; background: transparent; }
  .start-panel { height: 450px; min-height: 450px; }
  .start-chat { height: 440px; min-height: 0; }
  .start-ai-visual { padding: 25px 18px; }
  .start-orbit { width: 150px; height: 150px; margin-bottom: 20px; }
  .start-controls { gap: 9px; }
  .start-autoplay { padding-inline: 10px; font-size: .68rem; }
  .start-controls .icon-button { width: 35px; height: 35px; }
  .start-controls > span { min-width: 42px; font-size: .7rem; }
  .channel-comparison { border: 0; border-radius: 0; overflow: visible; background: transparent; }
  .channel-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .channel-row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; border: 1px solid #d6e1f6; border-radius: 14px; overflow: hidden; background: #fff; }
  .channel-row + .channel-row { border-top: 1px solid #d6e1f6; }
  .channel-row > strong { grid-column: 1 / -1; padding: 17px; font-size: .9rem; line-height: 1.45; }
  .channel-row > .channel-cell { display: flex; flex-direction: column; gap: 9px; padding: 12px 2px 15px; border-top: 1px solid #e4ebf7; }
  .channel-mobile-label { display: block; color: #5b6f8e; font-size: .62rem; font-weight: 700; }
  .channel-best .channel-mobile-label { color: #1d4ed8; }
  .channel-mark { width: 25px; height: 25px; }
  .comparison-legend { gap: 15px; font-size: .68rem; }
  .comparison-note { font-size: .68rem; }
  .comparison-summary { align-items: flex-start; font-size: .83rem; }
  .knowledge-layout { gap: 32px; }
  .knowledge-copy h2 { font-size: var(--h2); }
  .website-knowledge { padding: 20px 16px; border-radius: 17px; }
  .website-pages { gap: 8px; }
  .website-pages > span { padding: 11px; font-size: .74rem; }
  .knowledge-badge { font-size: .6rem; }
  .knowledge-question { font-size: .82rem; }
  .cases .section-heading .blue-text { color: #a8c7ff; }
}
@media (max-width: 380px) {
  .hero-inner { width: calc(100% - 30px); }
  .social-logos { gap: 9px; }
  .social-count { font-size: .64rem; }
  .everyday-grid { grid-template-columns: 1fr; }
  .everyday-scene { grid-template-columns: 34px 1fr; min-height: 100px; }
  .everyday-scene > span { min-height: 0; }
  .everyday-card h3 { font-size: 1.05rem; }
  .everyday-card > p { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .start-tour.is-playing .start-progress > span { animation: none; }
}