/* Kontext page. Shared tokens, chrome and components live in styles.css. */
/* The firm's base: follows the site theme. Paper in light, night in dark; hairlines, one accent, acid used sparingly. */

/* Tokens: the paper page (light theme) … */
.kx{--kx-ground:var(--bg);--kx-text:var(--ink);--kx-muted:var(--muted);--kx-accent:var(--blue-ink);--kx-line:#d6d6d1;--kx-rule:#e6e5e0;--kx-deep:#efeee9;--kx-cell:#ffffff;--kx-current:#171923;--kx-check:var(--blue-ink);--kx-dim-h:#62656f;--kx-dim-p:#6d707a;--kx-node:#9aa3bd;--kx-bar:#b7bdcd;--kx-bar-short:#d8dae0;--kx-open:var(--blue-ink);--kx-em:var(--blue-ink);--kx-hero-em:var(--blue-ink);--kx-scrim:248,247,243;--kx-inset:max(var(--gutter),calc((100vw - var(--page)) / 2 + var(--gutter)));background:var(--kx-ground);color:var(--kx-text)}
/* … and night: the dark theme, or a night stage inside the paper page. */
html[data-theme=dark] .kx{--kx-ground:var(--night);--kx-text:#f1f2f6;--kx-muted:var(--night-muted);--kx-accent:#a6b8ff;--kx-line:#394257;--kx-rule:#262d3f;--kx-deep:color-mix(in srgb,var(--night) 70%,#000);--kx-cell:#1a2030;--kx-current:var(--acid);--kx-check:var(--acid);--kx-dim-h:#aab2c5;--kx-dim-p:#8e97ad;--kx-node:#6b7aa8;--kx-bar:#4c5c7d;--kx-bar-short:#394257;--kx-open:var(--acid);--kx-em:#a6b8ff;--kx-hero-em:var(--acid);--kx-scrim:12,14,21}

/* Night chrome for the dark theme only; in light the shared paper header and footer stay. */
html[data-theme=dark]:has(body[data-product=kontext]){color-scheme:dark;background:var(--night)}
html[data-theme=dark] body[data-product=kontext]{--bg:var(--night);--surface:#1d2230;--ink:#f1f2f6;--muted:#aab2c5;--line:#262d3f;--wash:#1e2434;--blue-ink:#a6b8ff;background:var(--night);color:#f1f2f6}
html[data-theme=dark] body[data-product=kontext] .site-header{background:var(--night);border-bottom-color:#262d3f}
html[data-theme=dark] body[data-product=kontext] .desktop-nav a{color:#c9d0e2}
html[data-theme=dark] body[data-product=kontext] .desktop-nav a:hover,html[data-theme=dark] body[data-product=kontext] .desktop-nav a[aria-current=page]{color:#f1f2f6}
html[data-theme=dark] body[data-product=kontext] .header-cta{background:#f1f2f6;color:#141722}
html[data-theme=dark] body[data-product=kontext] .header-cta:hover{background:var(--acid);color:#141722}
html[data-theme=dark] body[data-product=kontext] .reading-progress{background:#a6b8ff;height:1px;bottom:-1px}
html[data-theme=dark] body[data-product=kontext] .mobile-nav{border-top-color:#262d3f}
html[data-theme=dark] body[data-product=kontext] .mobile-nav a{border-bottom-color:#262d3f;color:#dfe5f5}
html[data-theme=dark] body[data-product=kontext] .site-footer{color:#dfe5f5}
html[data-theme=dark] body[data-product=kontext] .footer-bottom{border-top-color:#262d3f}

.kx h1,.kx h2,.kx h3{color:var(--kx-text);font-weight:450}
.kx em{letter-spacing:-.04em}
.kx h2{font-size:clamp(44px,4.3vw,60px);line-height:1.06;letter-spacing:-.045em}
.kx h2 em{color:var(--kx-em)}
.kx .text-link{color:var(--kx-text)}
.kx .text-link>span{font-size:18px}
.kx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:36px}

/* Hero: the field canvas is the stage; the heading sits in front of it, on the left. */
.kx-hero{position:relative;overflow:clip;background:var(--kx-ground);color:var(--kx-text)}
.kx .knowledge-field{background:var(--kx-ground)}
.kx .knowledge-field::before,.kx .knowledge-field::after{background:var(--kx-line)}
.kx-hero .import-stage{height:760px}
.kx-hero .import-head{left:0;width:calc(var(--kx-inset) + 640px);max-width:58%;padding:64px 40px 64px var(--kx-inset)}
.kx-hero .import-head::before{background:linear-gradient(90deg,rgba(var(--kx-scrim),.97) 0%,rgba(var(--kx-scrim),.97) 64%,rgba(var(--kx-scrim),.72) 80%,rgba(var(--kx-scrim),0) 100%)}
.kx-hero .product-name{color:var(--kx-accent);font-size:17px;font-weight:450;line-height:1.5}
.kx-hero h1{margin-top:18px;font-size:clamp(50px,4.6vw,66px);line-height:1.03;letter-spacing:-.05em}
.kx-hero h1 em{color:var(--kx-hero-em)}
.kx-hero .kx-lead{max-width:450px;margin-top:28px;font-size:17px;line-height:1.8;font-weight:350;color:var(--kx-muted)}
.kx-hero .text-link{color:var(--kx-text)}
.kx-hero .product-status{max-width:440px}
.kx-query{position:absolute;z-index:3;left:76%;top:50%;transform:translate(-50%,-50%);width:320px;max-width:calc(100% - 40px);padding:17px 12px;text-align:center;background:rgba(var(--kx-scrim),.94);box-shadow:0 0 35px 20px rgba(var(--kx-scrim),.8);pointer-events:none}
.kx-query span{display:block;font-size:11px;font-weight:450;letter-spacing:.12em;text-transform:uppercase;color:var(--kx-muted)}
.kx-query p{min-height:2.5em;margin-top:9px;font-size:23px;line-height:1.25;letter-spacing:-.025em;color:var(--kx-accent)}
.kx-query p::after{content:'';display:inline-block;width:1px;height:.95em;margin-left:3px;vertical-align:-.08em;background:currentColor;opacity:0}
.kx-query.is-typing p::after{opacity:1;animation:kx-caret .8s steps(1,end) infinite}
@keyframes kx-caret{50%{opacity:0}}
html[data-motion=paused] .kx-query p::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.kx-query p::after{animation:none;opacity:0}}
@media(max-width:959px){.kx-hero .import-stage{min-height:740px}.kx-query p{font-size:20px}}
@media(max-width:719px){.kx-hero .import-stage{min-height:0}.kx-query{left:50%;top:auto;bottom:110px;transform:translateX(-50%)}.kx-query p{font-size:21px}}

/* The journey: a full-bleed stage with its captions on one hairline below. */
.kx-journey{padding:104px 0 112px;border-top:1px solid var(--kx-rule)}
.kx-journey-head h2{font-size:clamp(44px,4.6vw,64px)}
.kx-journey-head p{max-width:540px;margin-top:26px;font-size:17px;line-height:1.8;font-weight:350;color:var(--kx-muted)}
.kx-journey-stage{position:relative;height:400px;margin-top:20px;user-select:none;-webkit-user-select:none}
.kx-journey-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.kx-journey-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:0;margin-bottom:0;list-style:none}
.kx-journey-steps li{position:relative;padding:26px 28px 0 0;border-top:1px solid var(--kx-line);min-width:0}
.kx-journey-steps li::before{content:"";position:absolute;top:-1px;left:0;right:28px;height:1px;background:var(--kx-accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.kx-journey-steps li.is-active::before{transform:scaleX(1)}
.kx-journey-steps h3{font-size:21px;line-height:1.25;letter-spacing:-.02em;transition:color .4s}
.kx-journey-steps p{margin-top:12px;font-size:15px;line-height:1.75;font-weight:350;color:var(--kx-muted);transition:color .4s}
.kx-journey-steps.is-playing li:not(.is-active) h3{color:var(--kx-dim-h)}
.kx-journey-steps.is-playing li:not(.is-active) p{color:var(--kx-dim-p)}

/* In the application: the member journey, filmed in the real product. */
.kx-app{padding:104px 0 112px;border-top:1px solid var(--kx-rule)}
.kx-app-head{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:end}
.kx-app-head h2{font-size:clamp(44px,4.6vw,64px)}
.kx-app-head p{max-width:470px;padding-bottom:6px;font-size:17px;line-height:1.8;font-weight:350;color:var(--kx-muted)}
.kx-film{max-width:1120px;margin:48px auto 0}
.kx-film-frame{overflow:hidden;background:#f5f6f8;border:1px solid var(--kx-line);border-radius:6px;box-shadow:0 24px 60px -30px rgba(12,14,21,.35);user-select:none;-webkit-user-select:none}
.kx-film video{display:block;width:100%;height:auto;aspect-ratio:16/10}
.kx-film figcaption{margin-top:18px;font-size:14px;line-height:1.7;color:var(--kx-muted);max-width:640px}
.kx-film-controls{display:flex;align-items:center;gap:24px;margin-top:16px;font-size:14px;color:var(--kx-muted)}
.kx-film-controls[hidden]{display:none}
.kx-film-controls button{font:inherit;background:none;border:0;cursor:pointer;padding:5px 0;color:var(--kx-text)}
html[data-theme=dark] .kx-film-frame{border-color:#394257;box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}

/* The core: two questions face each other. */
.kx-confront{padding:124px 0 120px;background:var(--kx-deep);border-top:1px solid var(--kx-rule);border-bottom:1px solid var(--kx-rule)}
.kx-confront-head{max-width:760px;margin:0 auto;text-align:center}
.kx-confront-head h2{font-size:clamp(48px,5vw,72px)}
.kx-confront-head p{max-width:600px;margin:30px auto 0;font-size:17px;line-height:1.8;font-weight:350;color:var(--kx-muted)}
.kx-confront-log{margin-top:30px;text-align:center;font-size:15px;line-height:1.7;font-weight:350;color:var(--kx-muted)}

/* The rules as a ledger, anchored by the log they leave. */
.kx-ledger{padding:116px 0 112px}
.kx-ledger-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:96px;align-items:start}
.kx-ledger-side h2{font-size:clamp(36px,3.4vw,48px)}
.kx-ledger-list{margin:0;border-top:1px solid var(--kx-line)}
.kx-ledger-list>div{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:19px 0 20px;border-bottom:1px solid var(--kx-rule)}
.kx-ledger-list dt{font-size:16px;line-height:1.55;font-weight:450;color:var(--kx-text)}
.kx-ledger-list dd{margin:0;font-size:15px;line-height:1.7;font-weight:350;color:var(--kx-muted)}

/* Closing: an honest way in, no form. */
.kx-cta{padding:100px 0 108px;border-top:1px solid var(--kx-rule)}
.kx-cta-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px}
.kx-cta p{max-width:520px;margin-top:24px;font-size:16px;line-height:1.8;font-weight:350;color:var(--kx-muted)}
.kx-integrations{width:100%;max-width:600px;justify-self:end}
.kx-integrations svg{display:block;width:100%;height:auto;overflow:visible}
.kx-block{--block-color:#41836a;transform-box:fill-box;transform-origin:center}
.kx-block rect,.kx-block path{fill:var(--kx-ground);stroke:var(--block-color);stroke-width:2.5}
.kx-block-saml{--block-color:#4549d8}.kx-block-scim{--block-color:#41836a}.kx-block-smtp{--block-color:#cc7a38}.kx-block-oidc{--block-color:#9760a7}
.kx-block text{fill:var(--block-color);text-anchor:middle;font-family:inherit}
.kx-block-name{font-size:30px;font-weight:450;letter-spacing:-.03em}
.kx-block-name-entra{font-size:25px}.kx-block-name-oidc{font-size:23px}
.kx-block-detail{font-size:14px;font-weight:400;letter-spacing:0}
.kx-integrations.is-ready:not(.is-visible) .kx-block{opacity:0;transform:translateY(-100px) rotate(-8deg)}
.kx-integrations.is-ready.is-visible .kx-block{animation:kx-block-drop .95s var(--ease) var(--drop-delay) both}
@keyframes kx-block-drop{0%{opacity:0;transform:translateY(-100px) rotate(-8deg)}35%{opacity:1}76%{transform:translateY(5px) rotate(1.5deg)}100%{opacity:1;transform:none}}
html[data-theme=dark] .kx-block{--block-color:#8ec5a9}
html[data-theme=dark] .kx-block-saml{--block-color:#a6b8ff}html[data-theme=dark] .kx-block-smtp{--block-color:#e7b17e}html[data-theme=dark] .kx-block-oidc{--block-color:#cca3da}
html[data-motion=paused] .kx-integrations.is-ready .kx-block{opacity:1;transform:none;animation:none}
@media(prefers-reduced-motion:reduce){.kx-integrations.is-ready .kx-block.kx-block{opacity:1;transform:none;animation:none}}
@media(max-width:959px){.kx-cta-inner{grid-template-columns:1fr}.kx-integrations{justify-self:center;max-width:540px}}
@media(max-width:719px){.kx-integrations{width:calc(100% + 16px);max-width:440px;margin-inline:-8px}}

@media(max-width:1199px){.kx-app-head{gap:40px}.kx-hero .import-stage{height:740px}.kx-hero .import-head{width:calc(var(--kx-inset) + 520px);max-width:60%}.kx-journey-stage{height:340px}.kx-journey-steps li{padding-right:20px}.kx-journey-steps li::before{right:20px}.kx-journey-steps h3{font-size:19px}.kx-ledger-grid{gap:60px}.kx-ledger-list>div{grid-template-columns:170px 1fr;gap:24px}}
@media(max-width:959px){.kx-app{padding:88px 0}.kx-app-head{grid-template-columns:1fr;gap:22px}.kx-app-head p{padding-bottom:0}.kx-film{margin-top:34px}.kx-hero .import-stage{height:580px}.kx-hero .import-head{width:calc(var(--kx-inset) + 400px);max-width:66%}.kx-hero h1{font-size:50px}.kx-journey{padding:88px 0}.kx-journey-stage{height:500px}.kx-journey-steps{grid-template-columns:1fr 1fr;gap:34px 0}.kx-journey-steps li:nth-child(even){padding-right:0}.kx-journey-steps li:nth-child(even)::before{right:0}.kx-journey-steps p{font-size:14px}.kx-confront{padding:92px 0}.kx-ledger{padding:88px 0}.kx-ledger-grid{grid-template-columns:1fr;gap:40px}.kx-cta-inner{flex-direction:column;align-items:flex-start;gap:36px}}
@media(max-width:719px){.kx-app{padding:68px 0 64px}.kx-app-head h2{font-size:38px}.kx-app-head p{font-size:15px}.kx-film{margin-top:26px}.kx-film figcaption{font-size:13px}.kx-hero .import-stage{height:auto;margin:0;padding-bottom:340px}.kx-hero .import-head{width:auto;max-width:none;padding:40px var(--gutter) 24px}.kx-hero .import-head::before{background:linear-gradient(180deg,rgba(var(--kx-scrim),.95) 0%,rgba(var(--kx-scrim),.95) 62%,rgba(var(--kx-scrim),0) 100%)}.kx-hero h1{font-size:44px}.kx-hero .kx-lead{font-size:15px}.kx-hero .kx-bridge{font-size:13px}.kx h2{font-size:38px}.kx-journey{padding:68px 0 64px}.kx-journey-head h2{font-size:38px}.kx-journey-head p{font-size:15px;margin-top:18px}.kx-journey-stage{height:380px;margin-top:16px}.kx-journey-steps{gap:28px 0}.kx-journey-steps li{padding:18px 16px 0 0}.kx-journey-steps li::before{right:16px}.kx-journey-steps h3{font-size:17px}.kx-journey-steps p{font-size:13px;line-height:1.7}.kx-confront{padding:68px 0 64px}.kx-confront-head{text-align:left}.kx-confront-head h2{font-size:40px}.kx-confront-head p{margin:20px 0 0;font-size:15px}.kx-confront-log{text-align:left;font-size:13px}.kx-ledger{padding:64px 0}.kx-ledger-side h2{font-size:32px}.kx-ledger-list>div{grid-template-columns:1fr;gap:4px;padding:16px 0 17px}.kx-cta{padding:72px 0 80px}}
@media(max-width:374px){.kx-hero h1{font-size:38px}.kx h2,.kx-journey-head h2{font-size:33px}.kx-confront-head h2{font-size:35px}}