/* KI-Entwicklung (ai-development.php) - the page's own stylesheet, loaded after site.min.css via $pageCss.
   Ported from the approved prototype V3.1 round 10 (_scratch/ki-service/v3/r10-build, DECISIONS.md #ki-seite):
   the rules of the owner's pick per section, scoped under .ki so nothing reaches the site header or footer.
   Buttons are the site's CTA system B1 (cta.css), the FAQ is components/faqs.php.
   Colours: the brand tokens below (master: C:\Users\accou\Claude\vitec\branding\tokens\tokens.json) or alphas of
   them - no other hex. Classes on <html>: anim (entrances may start hidden), gl (the particle object may run),
   gl-ok (WebGL is running: steps wait for the particles), nogl (static final state), ki-page (this page). */
:root { --vitec-primary: #003996; --vitec-coral: #e2694b; --vitec-coral-alt: #e55a37; --vitec-blue-accent: #64aaff; --vitec-coral-ink: #c2411f; --vitec-sky: #c5e1f9; --vitec-orange-light: #ffbf9d; --vitec-dark-bg: #070d13; --vitec-text: #14213d; --vitec-muted: #7d8594; --vitec-sub-text: #aeb3bf; --vitec-white: #ffffff; --vitec-font-display: "Oswald", "Oswald Fallback", "Impact", "Arial Narrow", sans-serif; --vitec-font-body: "OverusedGrotesk", "Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --vitec-font-mono: "PT Mono", "Courier New", monospace; --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.22); --glass: rgba(197,225,249,.06); --glass-2: rgba(197,225,249,.10); --card-solid: linear-gradient(160deg, var(--vitec-text), var(--vitec-dark-bg) 70%); --grad-dark: linear-gradient(91deg, var(--vitec-coral-alt) -10%, var(--vitec-orange-light) 30%, var(--vitec-blue-accent) 85%); --page-max: 1240px; --gutter: clamp(16px, 4vw, 48px); --head: 74px; --band: clamp(170px, 30vh, 280px); }
html, body { overflow-x: clip; }
body { background: radial-gradient(1200px 800px at 85% -10%, rgba(0,57,150,.55), transparent 60%), radial-gradient(900px 700px at -10% 40%, rgba(0,57,150,.30), transparent 60%), var(--vitec-dark-bg); }
.ki { color: var(--vitec-white); font-family: var(--vitec-font-body); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.ki a { color: inherit; }
.ki img { max-width: 100%; }
.ki h1, .ki h2, .ki h3 { font-family: var(--vitec-font-display); font-weight: 600; margin: 0; line-height: 1.06; }
.ki h2 { font-size: clamp(34px, 4.2vw, 64px); }
.ki h3 { font-size: clamp(22px, 1.7vw, 27px); font-weight: 500; line-height: 1.15; }
.ki p { margin: 0; }
.ki .wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.ki .grad { background: var(--grad-dark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--vitec-orange-light); }
.ki .mono { font-family: var(--vitec-font-mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
/* dot to text: 16px gap - the dot's 4px halo ate most of the old 10px (owner 2026-10-21: "Mehr Abstand zwischen Punkt und Text") */
.ki .eyebrow { display: inline-flex; align-items: center; gap: 16px; padding: 8px 16px 8px 14px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--vitec-sky); }
.ki .eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vitec-coral-alt); box-shadow: 0 0 0 4px rgba(229,90,55,.25); }
.ki .sec { position: relative; padding: clamp(80px, 11vh, 132px) 0; }
.ki .sec-head { display: grid; gap: 16px; }
.ki .sec-head .lead { color: var(--vitec-sub-text); font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.5; }
.anim .ki .rise { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.anim .ki .rise.in { opacity: 1; transform: none; }
.ki .icon-tile { --tile-a: .24; --tile-b: .18; position: relative; display: inline-grid; flex-shrink: 0; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, rgba(229,90,55,var(--tile-a)), rgba(100,170,255,var(--tile-b))); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: background .3s ease; }
.ki .icon-tile > img { width: 28px; height: 28px; margin: 0; filter: brightness(0) invert(1); }
.ki .icon-tile-sm { width: 40px; height: 40px; border-radius: 12px; }
.ki .icon-tile-sm > img { width: 20px; height: 20px; }
.ki .by-block { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; color: var(--vitec-white); background: linear-gradient(160deg, rgba(197,225,249,.09), rgba(197,225,249,.03) 60%); box-shadow: inset 0 0 0 1px var(--line), 0 24px 70px rgba(0,0,0,.3); }
.ki .by-block::before { content: ""; position: absolute; bottom: -25px; right: -28px; width: 32px; height: 32px; border-radius: 50%; z-index: -1; background: linear-gradient(244.54deg, var(--vitec-primary) 0%, var(--vitec-dark-bg) 100%); opacity: .9; transform: scale(1); transform-origin: 50% 50%; transition: transform 1s ease-out, opacity 1.5s ease; }
@media (hover: hover) {
  .ki .by-block:hover::before { transform: scale(80); opacity: 1; }
  .ki .by-block:hover h3 { color: var(--vitec-white); }
  .ki .by-block:hover .icon-tile { --tile-a: .34; --tile-b: .26; }
}
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.ki > section { position: relative; z-index: 1; }
.ki .slot { position: relative; pointer-events: none; }
.ki .slot .fb { position: absolute; inset: 0; display: none; place-items: center; }
.ki .slot .fb svg { width: min(100%, 520px); height: 100%; display: block; }
html:not(.gl) .ki .slot { display: none; }
html:not(.gl) .ki .slot.slot-keep { display: block; }
html:not(.gl) .ki .slot.slot-keep .fb { display: grid; }
html.gl-ok .ki .slot .fb { display: none !important; }
/* the hero still (ai-development.php): sized like the engine's sphere (it is the engine's own first frame, captured
   square around the slot centre on black, alpha = brightest channel so it lies on the page like the canvas's additive
   particles), shown while WebGL starts, gone once the engine has drawn (owner 2026-10-20) */
.ki .slot .still { position: absolute; inset: 0; display: none; pointer-events: none; transition: opacity .35s ease; }
.ki .slot .still img { width: 100%; height: 100%; object-fit: contain; display: block; }
html.gl .ki .slot .still { display: block; }
html.gl-live .ki .slot .still { opacity: 0; }
.ki .split { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); }
.ki .split > .split-main { flex: 1 1 0; min-width: 0; }
.ki .split > .slot { flex: 0 0 40%; height: 340px; }
.ki .duo { display: flex; gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.ki .duo > .duo-body { flex: 1 1 0; min-width: 0; display: grid; gap: 28px; align-content: start; }
.ki .duo > .duo-stage { flex: 0 0 40%; }
.ki .duo-stage > .slot { position: sticky; top: 12vh; height: 76vh; max-height: 640px; }
.ki .slot-m { display: none; }
.ki .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 110px 0 70px; }
.ki .hero .split > .slot { height: min(72vh, 620px); flex-basis: 46%; }
.ki .hero h1 { margin-top: 22px !important; font-size: clamp(44px, 5.6vw, 88px); line-height: .98; }
/* !important on paragraph and heading margins: style.css sets p and h1 { margin: 0 !important } site-wide, which silently voided the
   hero-sub, trust-line and butterfly-label spacing of the approved prototype (owner 2026-10-15: more room CTA -> trust line) */
.ki .hero .hero-sub { margin-top: 22px !important; color: var(--vitec-sub-text); font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; }
.ki .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ki .trust { margin-top: 40px !important; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--vitec-sub-text); font-size: 15px; font-weight: 500; }
.ki .trust .stars { color: var(--vitec-orange-light); letter-spacing: 2px; }
.ki .svc-track { display: flex; flex-direction: row-reverse; gap: clamp(28px, 4vw, 64px); align-items: stretch; margin-top: 48px; }
.ki .svc-stagecol { flex: 0 0 42%; }
.ki .svc-stagecol > .slot { position: sticky; top: 12vh; height: 76vh; max-height: 660px; }
.ki .svc-cards { flex: 1 1 0; min-width: 0; padding-bottom: 6vh; }
.ki .mk { display: block; height: 0; }
.ki .svc { position: sticky; top: calc(20vh + var(--i) * 16px); margin-bottom: 30vh; padding: 28px 28px 30px; display: grid; gap: 14px; background: var(--card-solid); }
.ki .svc:last-child { margin-bottom: 8vh; }
.ki .svc h3 { font-size: clamp(25px, 2vw, 31px); font-weight: 600; }
.ki .svc p { color: var(--vitec-sub-text); font-size: 17px; font-weight: 500; }
.ki .svc .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ki .fig { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line-strong); }
.ki .fig b { font-family: var(--vitec-font-display); font-size: clamp(40px, 3.4vw, 56px); line-height: .95; font-weight: 600; white-space: nowrap; }
.ki .fig > span { color: var(--vitec-sub-text); font-size: 17px; font-weight: 500; }
.ki .stations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.ki .stations li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.ki .stations b { display: block; font-family: var(--vitec-font-display); font-weight: 500; font-size: 22px; line-height: 1.1; }
.ki .stations .t { display: block; margin-top: 2px; color: var(--vitec-sub-text); font-size: 16px; font-weight: 500; line-height: 1.4; }
.ki .checks { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.ki .checks li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-strong); font-size: 18px; font-weight: 600; line-height: 1.35; }
.ki .checks img { flex: none; width: 26px; height: 26px; }
.ki .fit { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.ki .fit > .slot { min-height: 300px; align-self: stretch; }
html:not(.gl) .ki .fit { grid-template-columns: 1fr 1fr; }
/* FAQ: the site's V1 list (components/faqs.php, style.css "FAQ V1") on the dark ground - white type,
   light hairlines, the open cross coral like on the light pages; questions keep this page's 20px. */
.ki .faq-v1 { --faq-lh: 28px; }
.ki .faq-v1 .accordion { display: grid; border-top: 1px solid var(--line-strong); }
.ki .faq-v1 .accordion-item { border-bottom: 1px solid var(--line-strong); }
.ki .faq-v1 .accordion-header { margin: 0; font-family: var(--vitec-font-body); font-size: inherit; line-height: inherit; }
.ki .faq-v1 .accordion-button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; width: 100%; padding: 22px 0; cursor: pointer; font-family: var(--vitec-font-body); font-size: 20px; line-height: var(--faq-lh); font-weight: 600; color: var(--vitec-white); }
.ki .faq-v1 .accordion-button::after { display: none; }
.ki .faq-v1 .accordion-button:focus-visible { outline: 2px solid var(--vitec-coral-alt); outline-offset: 4px; border-radius: 10px; }
.ki .faq-v1 .faq-ic { border-color: rgba(255, 255, 255, .22); color: var(--vitec-white); }
@media (hover: hover) {
  .ki .faq-v1 .accordion-button:hover .faq-q { color: var(--vitec-orange-light); }
  .ki .faq-v1 .accordion-button:hover .faq-ic { border-color: var(--vitec-coral-alt); }
}
.ki .faq-v1 .accordion-button:not(.collapsed) .faq-ic { background: var(--vitec-coral-alt); border-color: var(--vitec-coral-alt); color: var(--vitec-white); }
.ki .faq-v1 .accordion-body { max-width: none; margin: 0; padding: 0 56px 26px 0; color: var(--vitec-sub-text); font-size: 18px; line-height: 1.6; font-weight: 500; }
.ki .closing { padding: clamp(60px, 9vh, 110px) 0 120px; }
.ki .closing > .wrap > .slot { height: clamp(220px, 34vh, 380px); }
.ki .chat { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.ki .profile-card { display: flex; align-items: center; gap: 12px; }
.ki .profile-avatar { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; padding: 2px; background: linear-gradient(135deg, var(--vitec-coral-alt), var(--vitec-primary)); display: block; }
.ki .profile-name { display: block; font-weight: 600; font-size: 18px; }
.ki .profile-title { margin: 0; font-size: 16px; color: var(--vitec-sub-text); }
.ki .messages { display: flex; flex-direction: column; gap: 12px; }
.ki .bubble { background: var(--vitec-white); color: var(--vitec-text); border-radius: 4px 18px 18px 18px; padding: 18px 20px; width: fit-content; max-width: 100%; }
.ki .bubble p { font-size: 18px; font-weight: 600; line-height: 1.45; }
.anim .ki .chat .bubble, .anim .ki .chat .namebox { opacity: 0; transform: translateY(20px); }
.anim .ki .chat.in .bubble, .anim .ki .chat.in .namebox { animation: kiFadeUp .8s ease-out forwards; }
.anim .ki .chat.in .bubble:nth-child(1) { animation-delay: .2s; }
.anim .ki .chat.in .bubble:nth-child(2) { animation-delay: .6s; }
.anim .ki .chat.in .namebox { animation-delay: 1s; }
@keyframes kiFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.ki .namebox { border-radius: 12px; padding: 26px; background: var(--vitec-white) url("../../../assets/img/input-bg.webp") center / cover no-repeat; }
.ki .namebox form { position: relative; margin: 0; }
.ki .namebox input { width: 100%; min-height: 56px; padding: 14px 60px 14px 18px; font: 600 18px/1.3 var(--vitec-font-body); color: var(--vitec-text); border: 2px solid transparent; border-radius: 10px; outline: none; background: linear-gradient(var(--vitec-white), var(--vitec-white)) padding-box, linear-gradient(91deg, var(--vitec-coral-alt) -20.73%, var(--vitec-primary) 80.56%) border-box; }
.ki .namebox input::placeholder { color: var(--vitec-muted); opacity: 1; }
.ki .namebox input:focus-visible { box-shadow: 0 0 0 3px rgba(100,170,255,.55); }
.ki .namebox button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 10px; opacity: .5; transition: opacity .2s ease; }
.ki .namebox button:not([disabled]) { opacity: 1; }
.ki .namebox button[disabled] { cursor: default; }
.ki .namebox button:focus-visible { outline: 2px solid var(--vitec-primary); outline-offset: 1px; }
.ki .namebox button img { width: 27px; height: 27px; display: block; }
@media (max-width: 1100px) {
  .ki .stations { grid-template-columns: minmax(0, 1fr); }
  .ki .checks { grid-template-columns: minmax(0, 1fr); }
  .ki .fit { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .ki { font-size: 17px; }
  .ki .split, .ki .duo { flex-direction: column; align-items: stretch; }
  .ki .split > .slot, .ki .duo > .duo-stage { order: -1; flex-basis: auto; }
  .ki .split > .slot, .ki .duo-stage > .slot { position: relative; top: auto; height: var(--band); max-height: none; width: 100%; }
  .ki .slot-m { display: block; height: var(--band); }
  .ki .hero { min-height: 0; padding: 92px 0 56px; }
  .ki .hero .split { gap: 8px; }
  .ki .hero .split > .slot { height: clamp(210px, 36vh, 340px); flex-basis: auto; }
  .ki .svc-track { display: block; margin-top: 28px; }
  .ki .svc-stagecol, .ki .svc-cards { display: contents; }
  .ki .svc-stagecol > .slot { position: sticky; top: var(--head); height: var(--band); max-height: none; z-index: 0; }
  .ki .svc { top: calc(var(--head) + var(--band) + 10px + var(--i) * 10px); margin-bottom: 22vh; padding: 22px 20px 24px; }
  .ki .svc:last-child { margin-bottom: 10vh; }
  .ki .fig { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ki .checks { margin-top: 28px; }
  .ki .fit { grid-template-columns: minmax(0, 1fr); margin-top: 28px; gap: 28px; }
  .ki .fit > .slot { order: -1; min-height: 0; height: var(--band); }
  html:not(.gl) .ki .fit { grid-template-columns: minmax(0, 1fr); }
  .ki .faq-v1 { --faq-ic: 36px; --faq-lh: 25px; }
  .ki .faq-v1 .accordion-button { gap: 12px; font-size: 18px; padding: 18px 0; }
  .ki .faq-v1 .accordion-body { padding-right: 0; font-size: 17px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  :root { --band: clamp(120px, 22vh, 190px); }
}
@media (max-width: 899px) and (max-height: 520px) {
  .ki .svc-stagecol > .slot, .ki .svc { position: relative; top: auto; }
  .ki .svc { margin-bottom: 16px; }
}
@media (max-width: 560px) {
  .ki .hero-ctas .fill-btn, .ki .hero-ctas .outline-btn { width: 100%; justify-content: space-between; font-size: 17px; }
  .ki .namebox { padding: 18px; }
}
html:not(.gl) .ki .svc-stagecol { display: none; }
html:not(.gl) .ki .svc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; padding: 0; }
html:not(.gl) .ki .svc { position: relative; top: auto; margin: 0; }
html:not(.gl) .ki .duo-stage { display: none; }
html.lenis, html.lenis .ki body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ki .by-block::before, .ki .faq-v1 .faq-ic { transition: none !important; }
}
.ki .vs { position: relative; }
.ki .closing { padding-top: clamp(80px, 11vh, 132px); }
.ki .card { padding: 26px 26px 28px; display: grid; gap: 14px; align-content: start; background: var(--card-solid); }
.ki .card h3 { font-size: clamp(23px, 1.9vw, 29px); font-weight: 600; }
.ki .card p { color: var(--vitec-sub-text); font-size: 17px; font-weight: 500; }
/* "Womit wir KI-Lösungen bauen" (2026-10-26; 2026-10-28 six boxes in a swipe row beside the particle object): the
   service cards' surface (.by-block), the references' .clutch-link - no new colour. The row is the site's swipe row
   (style.css [data-swipe-row]: snap, drag, no bar; custom.js [data-swipe-auto]: one box every 3.2 s); the box in
   front (.is-on, set by ki-particles.js) is the one the object beside the row shows. From 900px: object left, two
   boxes and the cut-off third right; phones: the object as a band above one box and the next one peeking in. */
.ki .ts-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(24px, 3vw, 48px); align-items: center; margin-top: clamp(28px, 4vh, 48px); }
.ki .ts-slot { height: clamp(300px, 40vh, 420px); }
html:not(.gl) .ki .ts-stage { grid-template-columns: minmax(0, 1fr); }
html:not(.gl) .ki .ts-obj { display: none; }
.ki .ts-row { --ts-gap: 18px; --ts-peek: 56px; display: flex; gap: var(--ts-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 4px 30px; margin: -6px -4px -30px; }
.ki .ts-row::-webkit-scrollbar { display: none; }
.ki .ts-row:focus-visible { outline: 2px solid var(--vitec-coral-alt); outline-offset: 4px; border-radius: 22px; }
/* the site's .by-block sets width: 100% !important and a flex share on small screens - the row's boxes keep their own width */
.ki .ts-row > .ts-card { --ts-w: calc((100% - var(--ts-gap) - var(--ts-peek)) / 2); flex: 0 0 var(--ts-w) !important; width: var(--ts-w) !important; min-width: 0; scroll-snap-align: start; padding: 26px 26px 22px; display: grid; gap: 12px; align-content: start; background: var(--card-solid); transition: box-shadow .4s ease; }
html:not(.gl) .ki .ts-row > .ts-card { --ts-w: calc((100% - 2 * var(--ts-gap) - var(--ts-peek)) / 3); }
/* room after the last box, so every box - the last one too - can come to the front (and give the object its picture) */
html.gl .ki .ts-row::after { content: ""; flex: 0 0 calc(100% - (100% - var(--ts-gap) - var(--ts-peek)) / 2 - var(--ts-gap)); }
.ki .ts-card.is-on { box-shadow: inset 0 0 0 1px rgba(229,90,55,.6), 0 24px 70px rgba(0,0,0,.3); }
.ki .ts-n { font-family: var(--vitec-font-mono); font-size: 14px; color: var(--vitec-sub-text); }
.ki .ts-card.is-on .ts-n { color: var(--vitec-orange-light); }
.ki .ts-card h3 { font-size: clamp(23px, 1.9vw, 29px); font-weight: 600; }
.ki .ts-tech { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ki .ts-tech li { padding: 4px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--vitec-sky); }
.ki .ts-card p { color: var(--vitec-sub-text); font-size: 17px; font-weight: 500; }
@media (max-width: 899.98px) {
  .ki .ts-stage { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ki .ts-slot { height: var(--band); }
  .ki .ts-row { --ts-gap: 12px; --ts-peek: 44px; }
  .ki .ts-row > .ts-card, html:not(.gl) .ki .ts-row > .ts-card { --ts-w: calc(100% - var(--ts-gap) - var(--ts-peek)); padding: 22px 20px 20px; }
  html.gl .ki .ts-row::after { flex-basis: calc(var(--ts-peek) - var(--ts-gap)); }
}
.ki .lead + .lead { margin-top: -4px; }
.ki .faq-b-head { margin-bottom: 28px; }
.ki .faq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); align-items: start; }
.ki .faq-cols > .accordion + .accordion { border-top-color: var(--line-strong); }
.ki .km-txt { display: grid; gap: 16px; align-content: start; }
.ki .km-txt h2 { font-size: clamp(34px, 3.6vw, 56px); }
.ki .km-txt p { color: var(--vitec-sky); font-size: 18px; font-weight: 500; }
.ki .km-txt .fill-btn { justify-self: start; margin-top: 6px; }
.ki .km-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.05fr); gap: 32px clamp(24px, 3vw, 48px); align-items: center; }
.ki .km-c > .slot { height: clamp(260px, 40vh, 420px); }
@media (max-width: 1100px) {
  .ki .km-c { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ki .km-c > .slot { grid-column: 1 / -1; order: -1; height: var(--band); }
}
@media (max-width: 899px) {
  .ki .faq-cols { grid-template-columns: minmax(0, 1fr); }
  .ki .faq-cols > .accordion + .accordion { border-top: 0; }
  .ki .km-c { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
  .ki .km-txt .fill-btn { width: 100%; justify-content: space-between; }
}
.ki .svc-cards { --stack-top: 20vh; --stack-step: 16px; padding-bottom: 0; }
.ki .svc { top: var(--stack-top); margin-bottom: 0; transform: translate3d(0, calc(var(--i) * var(--stack-step)), 0); }
.ki .svc:last-child { margin-bottom: 0; }
.ki .svc-cards > .mk { height: 30vh; }
.ki .svc-cards > .mk:first-child { height: 0; }
.ki .svc-cards > .mk.end { height: 42vh; }
.ki .band { height: clamp(200px, 32vh, 330px); }
.ki .floor { height: clamp(220px, 34vh, 360px); }
.ki .lane { display: inline-block; margin-right: 8px; font-family: var(--vitec-font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--vitec-coral); }
.ki .lane.h { color: var(--vitec-blue-accent); }
.ki .sec-head .lead { overflow-wrap: break-word; }
.ki .rating { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ki .rating img { width: 18px; height: 17px; display: block; }
.ki .rating b { margin-left: 8px; font-size: 16px; font-weight: 700; }
.ki .ref-ki { display: grid; gap: 4px; }
.ki .ref-ki .mono { color: var(--vitec-coral); font-size: 13px; }
.ki .ref-ki > span:last-child { font-size: 17px; font-weight: 600; line-height: 1.4; }
.ki .q-title { font-size: 18px; font-weight: 700; line-height: 1.4; }
.ki .q { color: var(--vitec-sub-text); font-size: 17px; font-weight: 500; line-height: 1.55; }
.ki .person { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ki .person .pic { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, var(--vitec-coral-alt), var(--vitec-primary)); font-weight: 700; font-size: 16px; }
.ki .person .who { min-width: 0; flex: 1 1 160px; }
.ki .person .who b { display: block; font-weight: 600; font-size: 17px; }
.ki .person .who > span { display: block; color: var(--vitec-sub-text); font-size: 15px; font-weight: 500; }
.ki .clutch-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--vitec-sky); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ki .clutch-link:focus-visible { outline: 2px solid var(--vitec-blue-accent); outline-offset: 2px; border-radius: 4px; }
/* owner 2026-10-15: every link has a hover - the site's link hover (footer .fo-link-hover: the coral secondary colour),
   plus the underline thickening so it also reads without colour */
.ki .clutch-link { transition: color .2s ease, text-decoration-color .2s ease, text-decoration-thickness .2s ease; }
.ki .clutch-link:hover { color: var(--secondary-color); text-decoration-color: var(--secondary-color); text-decoration-thickness: 2px; }
.ki blockquote { margin: 0; }
 .ki .c4c-fig b { font-family: var(--vitec-font-display); font-weight: 600; line-height: .9; white-space: nowrap; }
 .ki .c4c-fig span { color: var(--vitec-sub-text); font-size: 16px; font-weight: 500; line-height: 1.4; }
 .ki .c5 blockquote { display: grid; gap: 10px; }
.ki .c4c-top { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.ki .c4c-head { justify-items: end; text-align: right; }
.ki .c4c-fig { display: grid; gap: 10px; align-content: end; }
.ki .c4c-fig b { font-size: clamp(72px, 9vw, 150px); line-height: .82; font-weight: 700; }
.ki .cascade { list-style: none; margin: clamp(40px, 7vh, 72px) 0 0; padding: 0; display: grid; }
.ki .cascade > li { justify-self: end; width: min(560px, 62%); margin-right: calc(var(--k) * 9%); display: grid; gap: 4px; text-align: right; padding: 18px 22px 18px 0; border-right: 2px solid var(--vitec-coral-alt); }
.ki .cascade > li:nth-child(2) { border-right-color: var(--vitec-coral); }
.ki .cascade > li:nth-child(3) { border-right-color: var(--vitec-orange-light); }
.ki .cascade > li:nth-child(4) { border-right-color: var(--vitec-sky); }
.ki .cascade > li:nth-child(5) { border-right-color: var(--vitec-blue-accent); }
.ki .cascade .n { color: var(--vitec-coral); }
.ki .cascade h3 { font-size: clamp(30px, 3vw, 46px); font-weight: 600; }
.ki .cascade .t { color: var(--vitec-sub-text); font-size: 16px; font-weight: 500; line-height: 1.45; }
.ki .cascade .lane { margin: 0 0 0 8px; }
.ki .c4c .floor { margin-top: clamp(12px, 3vh, 32px); }
 .ki .c5-name h3 { font-weight: 600; }
.ki .c5 > .duo-body { gap: 0; }
.ki .c5 > .duo-body > .sec-head { margin-bottom: 28px; }
.ki .c5-ref { display: grid; align-content: center; min-height: clamp(440px, 72vh, 660px); padding: 36px 0; border-top: 1px solid var(--line-strong); }
.ki .c5-ref:last-child { border-bottom: 1px solid var(--line-strong); }
.ki .c5-row { display: grid; gap: 14px; }
.ki .c5-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.ki .c5-name h3 { font-size: clamp(34px, 3.6vw, 56px); }
html:not(.gl) .ki .c5-ref { min-height: 0; }
.ki .s6a > .sec-head { margin-bottom: clamp(32px, 6vh, 56px); }
.ki .stair { --rise: clamp(44px, 8vh, 80px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.ki .stair > li { --c: var(--vitec-coral-alt); position: relative; margin-top: calc((3 - var(--k)) * var(--rise)); padding: 22px clamp(14px, 2vw, 28px) 0 24px; border-top: 2px solid var(--c); display: grid; gap: 8px; align-content: start; }
.ki .stair > li:nth-child(2) { --c: var(--vitec-orange-light); }
.ki .stair > li:nth-child(3) { --c: var(--vitec-sky); }
.ki .stair > li:nth-child(4) { --c: var(--vitec-blue-accent); }
.ki .stair > li::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: var(--rise); background: var(--c); }
.ki .stair > li:first-child::before { display: none; }
.ki .stair > li::after { content: ""; position: absolute; left: -7px; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--vitec-dark-bg); box-shadow: inset 0 0 0 2px var(--c); }
.ki .stair .n { font-family: var(--vitec-font-display); font-size: clamp(64px, 6.4vw, 104px); line-height: .85; font-weight: 600; }
.ki .stair h3 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 600; }
.ki .stair p { color: var(--vitec-sub-text); font-size: 17px; font-weight: 500; }
.ki .s6a .floor { margin-top: clamp(24px, 4vh, 48px); }
.ki .s7a-head, .ki .s8a-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; }
.ki .s7a-obj { margin-top: clamp(16px, 3vh, 32px); }
.ki .s7a-obj > .band { height: clamp(220px, 34vh, 340px); }
.ki .spine { --cg: clamp(56px, 8vw, 120px); position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--cg); }
.ki .spine::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--vitec-blue-accent), var(--vitec-orange-light) 55%, var(--vitec-coral-alt)); }
.ki .spine > li { position: relative; display: grid; gap: 8px; align-content: start; padding: 0 0 clamp(28px, 5vh, 48px); }
.ki .spine > li:nth-child(odd) { grid-column: 1; text-align: right; justify-items: end; }
.ki .spine > li:nth-child(even) { grid-column: 2; margin-top: clamp(70px, 13vh, 130px); }
.ki .spine > li::after { content: ""; position: absolute; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--vitec-dark-bg); box-shadow: inset 0 0 0 2px var(--vitec-orange-light); }
.ki .spine > li:nth-child(odd)::after { right: calc(var(--cg) / -2 - 7px); }
.ki .spine > li:nth-child(even)::after { left: calc(var(--cg) / -2 - 7px); }
.ki .spine .n { font-family: var(--vitec-font-display); font-size: clamp(52px, 5vw, 80px); line-height: .85; font-weight: 600; }
.ki .spine h3 { font-size: clamp(24px, 2.2vw, 34px); font-weight: 600; }
.ki .spine p { color: var(--vitec-sub-text); font-size: 17px; font-weight: 500; }
html:not(.gl) .ki .spine { margin-top: 40px; }
.ki .s8a .band { margin-top: clamp(20px, 4vh, 40px); height: clamp(220px, 32vh, 320px); }
.ki .bfly { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-auto-flow: row dense; column-gap: clamp(16px, 2.4vw, 36px); }
.ki .bf-c.l { grid-column: 1; }
.ki .bf-l { grid-column: 2; }
.ki .bf-c.r { grid-column: 3; }
.ki .bfly::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.ki .bf-h { display: grid; gap: 6px; align-content: end; padding-bottom: 22px; }
.ki .bf-h.l, .ki .bf-c.l { text-align: right; }
.ki .bf-h h3 { font-size: clamp(28px, 3vw, 46px); font-weight: 600; }
.ki .bf-h p { color: var(--vitec-sky); font-size: 17px; font-weight: 600; }
.ki .bf-c { padding: 18px 0; border-top: 1px solid var(--line-strong); font-size: 18px; font-weight: 600; line-height: 1.4; }
.ki .bf-l { align-self: center; position: relative; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--vitec-dark-bg); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--vitec-coral); font-size: 13px; text-align: center; }
.ki .bf-c .tag { display: none; }
.ki .fork { display: block; width: 100%; height: clamp(70px, 12vh, 130px); margin-top: clamp(20px, 4vh, 36px); overflow: visible; }
@media (max-width: 899px) {
  .ki .svc-cards { --stack-top: calc(var(--head) + var(--band) + 10px); --stack-step: 10px; }
  .ki .svc-cards > .mk { height: 22vh; }
  .ki .svc-cards > .mk.end { height: 30vh; }
   .ki .c4c-top, .ki .s7a-head, .ki .s8a-head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ki .band, .ki .floor, .ki .s7a-obj > .band, .ki .s8a .band { height: var(--band); }
  .ki .c4c-head { justify-items: start; text-align: left; }
  .ki .c4c-fig { order: 2; }
  .ki .cascade { margin-top: 28px; }
  .ki .cascade > li { width: calc(100% - var(--k) * 16px); margin-right: calc(var(--k) * 16px); padding-right: 16px; }
  .ki .c5-ref { min-height: 0; padding: 24px 0; }
  .ki .stair { grid-template-columns: minmax(0, 1fr); }
  .ki .stair > li { margin-top: 0; border-top: 0; border-left: 2px solid var(--c); padding: 0 0 30px 26px; }
  .ki .stair > li:last-child { padding-bottom: 6px; }
  .ki .stair > li::before { display: none; }
  .ki .stair > li::after { top: 0; }
  .ki .stair .n { font-size: 56px; }
  .ki .spine { grid-template-columns: minmax(0, 1fr); }
  .ki .spine::before { left: 6px; }
  .ki .spine > li, .ki .spine > li:nth-child(odd), .ki .spine > li:nth-child(even) { grid-column: 1; text-align: left; justify-items: start; margin-top: 0; padding: 0 0 28px 34px; }
  .ki .spine > li:nth-child(odd)::after, .ki .spine > li:nth-child(even)::after { left: 0; right: auto; top: 10px; }
  .ki .bfly { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .ki .bfly::before { display: none; }
  .ki .bf-sp { display: none; }
  .ki .bf-h h3 { font-size: 24px; }
  .ki .bf-h p { font-size: 15px; }
  .ki .bf-l { grid-column: 1 / -1; justify-self: center; margin-top: 18px !important; }
  .ki .bf-c.r { grid-column: 2; }
  .ki .bf-c { font-size: 16px; padding: 10px 0 14px; border-top: 0; }
  .ki .fork { display: none; }
}
@media (max-width: 899px) and (max-height: 520px) {
  .ki .svc { transform: none; }
  .ki .svc-cards > .mk, .ki .svc-cards > .mk.end { height: 16px; }
}
html:not(.gl) .ki .svc { transform: none; }
html:not(.gl) .ki .svc-cards > .mk { display: none; }
.ki .grad { padding-block: .4em; margin-block: -.4em; }
.ki [data-build] { position: relative; }
.ki .bl-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
html.gl-ok .ki [data-build] [data-step] { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
html.gl-ok .ki [data-build] [data-step]:not(.on) { opacity: 0; transform: translate3d(0, 14px, 0); }
@media (prefers-reduced-motion: reduce) {
  html.gl-ok .ki [data-build] [data-step] { transition: none; }
}
.ki .c4c-fig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(20px, 3vw, 40px); align-content: end; }
.ki .c4c-f { display: grid; gap: 10px; align-content: start; margin: 0; }
.ki .c4c-f b { font-family: var(--vitec-font-display); font-size: clamp(56px, 5.4vw, 92px); line-height: .9; font-weight: 700; white-space: nowrap; }
.ki .c4c-f span { color: var(--vitec-sub-text); font-size: 16px; font-weight: 500; line-height: 1.4; }
.ki .cascade { --rise: clamp(36px, 6vh, 64px); grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; margin-top: clamp(56px, 9vh, 96px); }
.ki .cascade > li { position: relative; justify-self: stretch; width: auto; margin: calc(var(--k) * var(--rise)) 0 0; padding: 24px clamp(10px, 1.4vw, 22px) 0 20px; border: 0; text-align: left; gap: 6px; align-content: start; }
.ki .cascade > li::after { content: ""; position: absolute; left: -7px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--vitec-dark-bg); box-shadow: inset 0 0 0 2px var(--vitec-coral); }
.ki .cascade h3 { font-size: clamp(24px, 2.3vw, 38px); }
.ki .cascade .t { font-size: 15px; }
.ki .cascade .lane { margin: 0 8px 0 0; }
.ki .c4c .land-w, .ki .s6a .land-w { width: 40%; margin-left: auto; }
.ki .stair > li { border-top-color: transparent; }
.ki .stair > li::before { display: none; }
.ki .stair > li::after { top: -6px; }
.ki .spine::before { display: none; }
.ki .km-c .bubble { background: var(--vitec-primary); color: var(--vitec-white); border: 1px solid rgba(100,170,255,.28); }
.ki .km-c .bubble p { color: var(--vitec-white); }
.ki .km-c .namebox { background: none; padding: 0; border-radius: 0; }
.ki .km-c .namebox input { background: transparent; color: var(--vitec-white); -webkit-text-fill-color: var(--vitec-white); border: 0; border-bottom: 2px solid var(--vitec-sub-text); border-radius: 0; min-height: 60px; padding: 14px 64px 14px 2px; transition: border-color .2s ease; }
.ki .km-c .namebox input::placeholder { color: var(--vitec-sub-text); -webkit-text-fill-color: var(--vitec-sub-text); }
.ki .km-c .namebox input:hover { border-bottom-color: var(--vitec-sky); }
.ki .km-c .namebox input:focus-visible { box-shadow: none; border-bottom-color: var(--vitec-blue-accent); }
.ki .km-c .namebox button { right: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--vitec-coral-alt); opacity: .4; }
.ki .km-c .namebox button:not([disabled]) { opacity: 1; }
.ki .km-c .namebox button:not([disabled]):hover { background: var(--vitec-coral); }
.ki .km-c .namebox button img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.ki .km-c .namebox button:focus-visible { outline: 2px solid var(--vitec-blue-accent); outline-offset: 2px; }
@media (max-width: 899px) {
  .ki .cascade { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .ki .cascade > li { margin: 0; padding: 0 0 28px 26px; }
  .ki .cascade > li:last-child { padding-bottom: 6px; }
  .ki .cascade > li::after { top: 0; }
  .ki .c4c .land-w, .ki .s6a .land-w { width: auto; margin-left: 0; }
  .ki .stair > li { border-left-color: transparent; }
  .ki .stair > li::after { top: 0; }
}
@media (max-width: 560px) {
  .ki .c4c-fig { gap: 14px; }
  .ki .c4c-f b { font-size: 52px; }
}
.ki .c4c-fig { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-left: 26px; align-content: end; }
.ki .c4c-f { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 22px; padding: 22px 24px; border-radius: 20px; background: linear-gradient(160deg, rgba(197,225,249,.09), rgba(197,225,249,.03) 60%); box-shadow: inset 0 0 0 1px var(--line), 0 24px 70px rgba(0,0,0,.3); }
.ki .c4c-f b { font-size: clamp(48px, 4.4vw, 76px); }
.ki .c4c-f span { font-size: 17px; }
html.gl-ok .ki .c4c-f { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .8s ease; }
html.gl-ok .ki .c4c-f:not(.on) { opacity: 0; transform: translate3d(0, 14px, 0); }
html.gl-ok .ki .c4c-f.on { box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 70px rgba(0,0,0,.3); }
.ki .c4c .land-w, .ki .s6a .land-w { width: 40%; margin-left: auto; margin-right: auto; }
.ki .stair > li { margin-top: calc(var(--k) * var(--rise)); }
.ki .bl-svg .br { fill: none; stroke-width: 2; stroke-linecap: round; }
.ki .km-c .bubble { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); color: var(--vitec-white); border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ki .km-c .bubble p { color: var(--vitec-white); }
.ki .km-c .namebox form { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--line-strong); padding: 8px 0; transition: border-color .2s ease; }
.ki .km-c .namebox form:hover { border-bottom-color: var(--vitec-sky); }
.ki .km-c .namebox form:focus-within { border-bottom-color: var(--vitec-blue-accent); }
.ki .km-c .namebox input { flex: 1 1 auto; min-width: 0; border: 0; min-height: 48px; padding: 10px 2px; }
.ki .km-c .namebox input:hover, .ki .km-c .namebox input:focus-visible { border: 0; box-shadow: none; }
.ki .km-c .namebox button.nb-send { position: static; transform: none; flex: none; width: 48px; height: 48px; border-radius: 14px; padding: 0; --tile-a: .34; --tile-b: .26; background: linear-gradient(135deg, rgba(229,90,55,var(--tile-a)), rgba(100,170,255,var(--tile-b))); opacity: .45; cursor: default; }
.ki .km-c .namebox button.nb-send:not([disabled]) { opacity: 1; cursor: pointer; }
.ki .km-c .namebox button.nb-send:not([disabled]):hover { --tile-a: .5; --tile-b: .38; background: linear-gradient(135deg, rgba(229,90,55,var(--tile-a)), rgba(100,170,255,var(--tile-b))); }
.ki .km-c .namebox button.nb-send img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.ki .km-c .namebox button.nb-send:focus-visible { outline: 2px solid var(--vitec-blue-accent); outline-offset: 2px; }
@media (max-width: 899px) {
  .ki .c4c-fig { order: 2; }
  .ki .c4c .land-w, .ki .s6a .land-w { width: auto; margin: 0; }
  .ki .stair > li { margin-top: 0; }
}
@media (max-width: 560px) {
  .ki .c4c-f { padding: 18px 18px; gap: 6px 16px; }
  .ki .c4c-f b { font-size: 44px; }
  .ki .c4c-f span { font-size: 16px; }
}
footer.footer-main { position: relative; z-index: 1; }
@media (max-width: 899px) {
  .ki .bfly::before { display: block; }
  .ki .bf-c { padding-left: 0; padding-right: 0; }
}
@media (max-width: 899px) {
  .ki .closing.vs { padding-bottom: 48px; }
  footer { padding-top: 56px !important; }
}
@media (max-width: 899px) {
  .ki .hero { min-height: 100vh; min-height: 100svh; padding: 84px 0 14px; align-items: stretch; }
  .ki .hero .split { display: flex; flex-direction: column; width: 100%; min-height: calc(100vh - 98px); min-height: calc(100svh - 98px); gap: 6px; }
  .ki .hero .split > .slot { flex: 1 1 0; height: auto; min-height: 110px; max-height: 300px; }
  .ki .hero .split-main { flex: none; }
  .ki .hero .eyebrow { font-size: 11px; line-height: 1.45; padding-top: 6px; padding-bottom: 6px; }
  .ki .hero h1 { margin-top: 12px !important; font-size: clamp(34px, 9.6vw, 44px); }
  .ki .hero .hero-sub { margin-top: 10px !important; font-size: 16px; line-height: 1.5; }
  .ki .hero-ctas { margin-top: 16px; gap: 10px; }
  .ki .hero-ctas .fill-btn, .ki .hero-ctas .outline-btn { min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
  .ki .trust { margin-top: 22px !important; font-size: 14px; gap: 2px 14px; }
}
/* short phone screens: the trust line keeps a smaller gap so the whole hero still ends above the sticky CTA bar */
@media (max-width: 899px) and (max-height: 700px) {
  .ki .hero h1 { margin-top: 8px !important; }
  .ki .hero .hero-sub { margin-top: 6px !important; }
  .ki .hero-ctas { margin-top: 12px; gap: 8px; }
  .ki .hero-ctas .fill-btn, .ki .hero-ctas .outline-btn { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .ki .trust { margin-top: 14px !important; }
}
@media (max-width: 899px) and (max-height: 600px) {
  .ki .hero .split > .slot { min-height: 64px; }
  .ki .hero h1 { font-size: 32px; margin-top: 10px !important; }
  .ki .hero .hero-sub { font-size: 15px; margin-top: 4px !important; }
  .ki .trust { margin-top: 10px !important; }
}
/* 320 px phones: the sphere would be a 44 px dot and pushes the trust line under the sticky bar */
@media (max-width: 359px) and (max-height: 600px) {
  .ki .hero .split > .slot { display: none; }
}

/* ---------- site integration (2026-10-15) - not in the prototype ---------- */
/* style.css gives <html> height 100%: the page background (on body, painted on the root) would then repeat every
   screen height and show hard edges on the phone - here the root is as tall as the page, as in the prototype */
html { height: auto; }
/* bootstrap's reboot makes every programmatic scroll smooth; here the engine owns the scroll (Lenis on desktop,
   anchor links scroll smoothly by script) - a native smooth jump would let the scroll-driven lines lag behind */
:root { scroll-behavior: auto; }
.ki-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the FAQ is components/faqs.php (bootstrap collapse): its accordion takes the look of the prototype's list */
.ki .faq-cols > .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-border-radius: 0; }
.ki .faq-cols .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; color: inherit; }
.ki .faq-cols .accordion-body a { color: var(--vitec-orange-light); text-underline-offset: 3px; }
/* the page ends in its own Kontakt section: the site's "Bereit, über Dein Projekt zu sprechen?" card is not shown,
   and the footer's 200px top padding (room for that overlapping card) shrinks - on the phone as in the r10 fix */
.ki-page .ready-to-transform { display: none; }
.ki-page footer.footer-main { padding-top: 96px; }
@media (max-width: 899px) {
  .ki-page footer.footer-main { padding-top: 56px; }
  /* the site's sticky contact bar (footer.php, 68px + safe area, below 992px) covers the bottom of the screen: the
     hero fits its text, both buttons and the rating line above it (DECISIONS #ki-seite "Hero auf dem Handy") */
  .ki .hero { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .ki .hero .split { min-height: calc(100vh - 166px - env(safe-area-inset-bottom, 0px)); min-height: calc(100svh - 166px - env(safe-area-inset-bottom, 0px)); }
}
/* with the bar, short phones give the sphere less room still (the sphere shrinks, never the content) */
@media (max-width: 899px) and (max-height: 700px) {
  .ki .hero .split > .slot { min-height: 90px; }
}
@media (max-width: 899px) and (max-height: 600px) {
  .ki .hero .split > .slot { min-height: 44px; }
}

/* owner 2026-10-19 (responsive): phones - the next section starts closer under the hero (the hero already keeps 82px
   for the sticky bar, plus the section's 80-93px top padding made ~210px of empty space under the rating line);
   tablets 768-899px - the hero is not stretched to the full screen height (550px of empty space at 820x1180) */
@media (max-width: 899px) {
  .ki .hero + .sec { padding-top: 32px; }
}
/* phones: the hero ends where the sticky bar begins (was: full screen with 82px reserved under the rating line, which
   stayed as empty space once scrolled). The split keeps its height, so the rating line ends at the same spot above
   the bar; the next section starts behind the bar at load and 46px under the rating line once scrolled */
@media (max-width: 899px) {
  .ki .hero { min-height: 0; padding-bottom: 14px; }
}
/* short phones: the now working heading gap costs 8-10px - taken from the space above the sphere, so the rating line
   still ends above the sticky bar */
@media (max-width: 899px) and (max-height: 700px) {
  .ki .hero { padding-top: 76px; }
}
@media (max-width: 899px) and (max-height: 600px) {
  .ki .hero { padding-top: 72px; }
}
@media (min-width: 768px) and (max-width: 899px) {
  .ki .hero { min-height: 0; }
  .ki .hero .split { min-height: 0; }
}