:root {
--paper: #F2F4F8;
--paper-raised: #FFFFFF;
--paper-sunken: #E8ECF2;
--night: #070C18;
--night-raised: #111A2E;
--ink: #0B1424;
--ink-2: #3E4A5E;
--ink-3: #5B6679;
--ink-quiet: #7D879A;
--ink-quiet-top: #66718A;
--on-night: #EEF1F7;
--on-night-2: #9AA6BA;
--line: #0B142414;
--line-strong: #0B142426;
--line-control: #7D879A;
--accent: #2447F5;
--accent-strong: #1A36D6;
--on-accent: #FFFFFF;
--accent-text: #2447F5;
--accent-tint: #E6ECFF;
--accent-on-night: #8FA8FF;
--halo: #9DB2FF;
--focus: #2447F5;
--positive: #0F7A50;
--positive-tint: #E3F4EC;
--caution: #9A5800;
--caution-tint: #FFF1DD;
--critical: #C2342B;
--critical-tint: #FDE8E6;
--shadow-card: inset 0 1px 0 0 rgba(255,255,255,0.9), 0 1px 2px 0 rgba(11,20,36,0.04), 0 14px 36px -6px rgba(11,20,36,0.08);
--shadow-float: inset 0 1px 0 0 rgba(255,255,255,0.7), 0 2px 6px 0 rgba(11,20,36,0.05), 0 10px 28px -8px rgba(11,20,36,0.14);
--shadow-glow: 0 10px 30px -8px rgba(36,71,245,0.45);
--shadow-press: inset 0 1px 0 0 rgba(255,255,255,0.16), inset 0 -1px 0 0 rgba(0,0,0,0.2);
--space-4: 4px;
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-28: 28px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-64: 64px;
--space-104: 104px;
--space-144: 144px;
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 28px;
--radius-xl: 36px;
--radius-pill: 9999px;
--layout-wrap: 1120px;
--layout-measure: 640px;
--layout-nav: 64px;
--duration-fast: 160ms;
--duration-base: 320ms;
--duration-slow: 600ms;
--duration-loop: 9000ms;
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--font-sans: Manrope, "Helvetica Neue", Arial, system-ui, sans-serif;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #070B14;
--paper-raised: #0F1626;
--paper-sunken: #0B111E;
--night: #0E1735;
--night-raised: #16204A;
--ink: #F1F4FA;
--ink-2: #C3CBDA;
--ink-3: #98A3B7;
--ink-quiet: #6F7B92;
--ink-quiet-top: #C9D0DC;
--on-night: #EEF1F7;
--on-night-2: #A9B4C8;
--line: #E8EDF714;
--line-strong: #E8EDF729;
--line-control: #6E7A90;
--accent: #3354FF;
--accent-strong: #2945EE;
--on-accent: #FFFFFF;
--accent-text: #8FA8FF;
--accent-tint: #16224A;
--accent-on-night: #8FA8FF;
--halo: #3D5BFF;
--focus: #8FA8FF;
--positive: #4CC991;
--positive-tint: #0F2A21;
--caution: #F0A84A;
--caution-tint: #2E2210;
--critical: #FF8A80;
--critical-tint: #34171A;
--shadow-card: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 1px 2px 0 rgba(0,0,0,0.4), 0 18px 44px -10px rgba(0,0,0,0.6);
--shadow-float: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 2px 6px 0 rgba(0,0,0,0.4), 0 12px 32px -8px rgba(0,0,0,0.7);
--shadow-glow: 0 12px 38px -8px rgba(61,91,255,0.6);
--shadow-press: inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -1px 0 0 rgba(7,11,20,0.12);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--paper: #070B14;
--paper-raised: #0F1626;
--paper-sunken: #0B111E;
--night: #0E1735;
--night-raised: #16204A;
--ink: #F1F4FA;
--ink-2: #C3CBDA;
--ink-3: #98A3B7;
--ink-quiet: #6F7B92;
--ink-quiet-top: #C9D0DC;
--on-night: #EEF1F7;
--on-night-2: #A9B4C8;
--line: #E8EDF714;
--line-strong: #E8EDF729;
--line-control: #6E7A90;
--accent: #3354FF;
--accent-strong: #2945EE;
--on-accent: #FFFFFF;
--accent-text: #8FA8FF;
--accent-tint: #16224A;
--accent-on-night: #8FA8FF;
--halo: #3D5BFF;
--focus: #8FA8FF;
--positive: #4CC991;
--positive-tint: #0F2A21;
--caution: #F0A84A;
--caution-tint: #2E2210;
--critical: #FF8A80;
--critical-tint: #34171A;
--shadow-card: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 1px 2px 0 rgba(0,0,0,0.4), 0 18px 44px -10px rgba(0,0,0,0.6);
--shadow-float: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 2px 6px 0 rgba(0,0,0,0.4), 0 12px 32px -8px rgba(0,0,0,0.7);
--shadow-glow: 0 12px 38px -8px rgba(61,91,255,0.6);
--shadow-press: inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -1px 0 0 rgba(7,11,20,0.12);
color-scheme: dark;
}
.kz-page {
font-family: var(--font-sans); font-size: 17px; line-height: 1.6;
background: var(--paper); color: var(--ink);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.kz-page *, .kz-page *::before, .kz-page *::after { box-sizing: border-box; }
.kz-page :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
.kz-page :where(ul, ol) { padding: 0; list-style: none; }
.kz-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.kz-page ::selection { background: var(--accent); color: var(--on-accent); }
.kz-wrap { width: 100%; max-width: var(--layout-wrap); margin-inline: auto; padding-inline: var(--space-24); }
.kz-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.kz-h { font-family: var(--font-sans); font-weight: 700; color: var(--ink); text-wrap: balance; }
.kz-h--hero { font-size: clamp(44px, 1.6rem + 5.4vw, 96px); line-height: .98; font-weight: 800; letter-spacing: -.032em; }
.kz-h--display { font-size: clamp(38px, 1.5rem + 3vw, 60px); line-height: 1.02; font-weight: 750; letter-spacing: -.026em; }
.kz-h--1 { font-size: clamp(32px, 1.3rem + 2vw, 46px); line-height: 1.06; letter-spacing: -.022em; }
.kz-h--2 { font-size: clamp(26px, 1.1rem + 1.2vw, 34px); line-height: 1.12; letter-spacing: -.016em; }
.kz-h--3 { font-size: 24px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
.kz-h--4 { font-size: 19px; line-height: 1.35; font-weight: 650; letter-spacing: -.005em; }
.kz-quiet {
color: var(--ink-quiet);
background-image: linear-gradient(180deg, var(--ink-quiet-top) 0%, var(--ink-quiet) 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.kz-lead { font-size: clamp(18px, 1rem + .35vw, 21px); line-height: 1.5; letter-spacing: -.005em; color: var(--ink-3); max-width: 34em; text-wrap: pretty; }
.kz-text { font-size: 17px; line-height: 1.6; color: var(--ink-3); max-width: var(--layout-measure); text-wrap: pretty; }
.kz-text--s { font-size: 15px; line-height: 1.55; }
.kz-lead strong, .kz-text strong { color: var(--ink); font-weight: 600; }
.kz-caption { font-size: 13px; line-height: 1.45; font-weight: 500; letter-spacing: .005em; color: var(--ink-3); }
.kz-label { font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.kz-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size var(--duration-base) var(--ease-out); }
.kz-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.kz-link .kz-icon { width: 15px; height: 15px; }
.kz-btn {
position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
height: 52px; padding: 0 6px 0 24px; border: 0; border-radius: var(--radius-pill);
font: 600 15px/1 var(--font-sans); letter-spacing: -.005em; white-space: nowrap; text-decoration: none; cursor: pointer;
transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.kz-btn:active { transform: translateY(1px) scale(.99); }
.kz-btn__arrow {
width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
background: var(--accent); color: var(--on-accent);
transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.kz-btn__arrow .kz-icon { width: 17px; height: 17px; stroke-width: 2; transition: transform var(--duration-base) var(--ease-out); }
.kz-btn:hover .kz-btn__arrow .kz-icon { transform: translateX(2px); }
.kz-btn--primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-press); }
.kz-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-press), var(--shadow-glow); }
.kz-btn--primary:hover .kz-btn__arrow { background: var(--accent-strong); }
.kz-btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-press); }
.kz-btn--accent .kz-btn__arrow { background: var(--on-accent); color: var(--accent); }
.kz-btn--accent:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: var(--shadow-press), var(--shadow-glow); }
.kz-btn--ghost { padding: 0 24px; background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); }
.kz-btn--ghost:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--line-control), var(--shadow-float); }
.kz-btn--sm { height: 40px; gap: 10px; padding: 0 4px 0 16px; font-size: 14px; }
.kz-btn--sm .kz-btn__arrow { width: 32px; height: 32px; }
.kz-btn--sm.kz-btn--ghost { padding: 0 16px; }
.kz-btn--block { width: 100%; justify-content: space-between; }
.kz-chip {
display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
font: 600 13px/1 var(--font-sans); white-space: nowrap;
background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.kz-chip::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.kz-chip--agents { background: var(--accent-tint); color: var(--accent-text); box-shadow: none; }
.kz-chip--agents::before { background: var(--accent); animation: kz-ping 2.4s var(--ease-out) infinite; }
.kz-chip--you::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.kz-chip--positive { background: var(--positive-tint); color: var(--positive); box-shadow: none; }
.kz-chip--caution { background: var(--caution-tint); color: var(--caution); box-shadow: none; }
.kz-chip--critical { background: var(--critical-tint); color: var(--critical); box-shadow: none; }
.kz-chip--plain::before { display: none; }
.kz-chip--glass { background: color-mix(in srgb, var(--paper-raised) 70%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); }
button.kz-chip { border: 0; cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
button.kz-chip:hover { box-shadow: inset 0 0 0 1px var(--line-control); transform: translateY(-1px); }
@keyframes kz-ping {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.kz-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; max-width: 1180px; margin-inline: auto; }
.kz-nav__pill {
display: flex; align-items: center; height: 52px; border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--paper-raised) 72%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float);
transition: width var(--duration-base) var(--ease-out), padding var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.kz-nav__brand { gap: 10px; padding: 0 20px 0 16px; color: var(--ink); text-decoration: none; }
.kz-nav__brand svg { width: 22px; height: 21px; fill: currentColor; flex: none; }
.kz-nav__word { font-size: 20px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.kz-nav__links { gap: 2px; padding: 0 6px; }
.kz-nav__links a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.kz-nav__links a:hover { background: var(--paper-sunken); color: var(--ink); }
.kz-nav__links a[aria-current] { color: var(--ink); background: var(--paper-sunken); }
.kz-nav--compact .kz-nav__brand { width: 52px; padding: 0; justify-content: center; }
.kz-nav--compact .kz-nav__word { display: none; }
.kz-nav--compact .kz-nav__links { opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; }
@media (max-width: 760px) { .kz-nav__links { display: none; } }
@media (max-width: 480px) { .kz-nav__brand { width: 52px; padding: 0; justify-content: center; } .kz-nav__word { display: none; } .kz-nav > .kz-btn { height: 52px; padding-left: 18px; font-size: 14px; } }
.kz-card { position: relative; background: var(--paper-raised); border-radius: var(--radius-lg); padding: var(--space-28); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.kz-card--tint { background: var(--accent-tint); box-shadow: none; }
.kz-card--sunken { background: var(--paper-sunken); box-shadow: none; }
.kz-card--md { border-radius: var(--radius-md); padding: var(--space-20); }
.kz-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-12); }
.kz-card__title { font-size: 24px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.kz-card__text { margin-top: var(--space-12); font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.kz-card__text strong { color: var(--ink); font-weight: 600; }
.kz-night {
position: relative; isolation: isolate; overflow: hidden;
background: var(--night); color: var(--on-night); border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 64px);
}
.kz-night::before {
content: ""; position: absolute; z-index: -1; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
filter: blur(36px); opacity: .7; animation: kz-drift 14s var(--ease-in-out) infinite alternate;
}
.kz-night::after {
content: ""; position: absolute; z-index: -1; inset: 0;
background-image: linear-gradient(color-mix(in srgb, var(--on-night) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--on-night) 6%, transparent) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 85% 0%, #000 0%, transparent 70%);
}
.kz-night .kz-h { color: var(--on-night); }
.kz-night .kz-quiet { background-image: linear-gradient(180deg, var(--on-night) 0%, var(--on-night-2) 100%); color: var(--on-night-2); }
.kz-night .kz-lead, .kz-night .kz-text, .kz-night .kz-caption { color: var(--on-night-2); }
.kz-night .kz-lead strong, .kz-night .kz-text strong { color: var(--on-night); }
.kz-night .kz-btn--primary { background: var(--on-night); color: var(--night); }
.kz-night .kz-card { background: var(--night-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-night) 10%, transparent); color: var(--on-night); }
.kz-night .kz-chip { background: var(--night-raised); color: var(--on-night); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-night) 14%, transparent); }
.kz-night .kz-link { color: var(--accent-on-night); }
@keyframes kz-drift { from { transform: translate(0, 0); } to { transform: translate(-40px, 30px); } }
.kz-glow { position: relative; isolation: isolate; }
.kz-glow::before {
content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; right: -160px; top: -260px; border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 55%, transparent), transparent);
filter: blur(40px); opacity: .8; pointer-events: none; animation: kz-drift 16s var(--ease-in-out) infinite alternate;
}
.kz-glow::after {
content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, #000 0%, transparent 72%);
}
.kz-section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-24) var(--space-64); align-items: end; }
.kz-section-head__aside { display: grid; gap: var(--space-20); justify-items: start; padding-bottom: 6px; }
.kz-section-head__aside .kz-text { max-width: 40ch; }
@media (max-width: 760px) { .kz-section-head { grid-template-columns: 1fr; } }
.kz-step { display: grid; gap: var(--space-20); align-content: start; }
.kz-step__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.kz-step__num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.kz-step__result { display: flex; align-items: center; gap: 10px; padding-top: var(--space-16); border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink); }
.kz-step__result .kz-icon { color: var(--ink-3); }
.kz-step-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-64); align-items: center; }
@media (max-width: 860px) { .kz-step-row { grid-template-columns: 1fr; gap: var(--space-32); } }
.kz-stage { position: relative; isolation: isolate; display: grid; place-items: center; padding: var(--space-40); min-height: 360px; border-radius: var(--radius-xl); background: var(--paper-sunken); overflow: hidden; }
.kz-stage::before { content: ""; position: absolute; z-index: -1; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 40%, transparent), transparent); filter: blur(30px); }
.kz-stage__tag { position: absolute; left: var(--space-20); bottom: var(--space-16); }
.kz-voice { width: min(100%, 420px); display: grid; gap: var(--space-16); }
.kz-voice__who { display: flex; align-items: center; gap: var(--space-12); }
.kz-orb { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--on-accent) 0%, var(--halo) 22%, var(--accent) 62%, var(--accent-strong) 100%); box-shadow: var(--shadow-glow); animation: kz-breathe 3.2s var(--ease-in-out) infinite; }
.kz-orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); animation: kz-halo-ring 3.2s var(--ease-out) infinite; }
.kz-voice__name { font-size: 16px; font-weight: 650; line-height: 1.2; color: var(--ink); }
.kz-voice__role { font-size: 13px; color: var(--ink-3); }
.kz-voice__q { font-size: 20px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.kz-wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.kz-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--ink-quiet); transform-origin: center; animation: kz-wave 1.2s var(--ease-in-out) infinite; }
.kz-wave i:nth-child(3n) { animation-delay: -.3s; } .kz-wave i:nth-child(3n+1) { animation-delay: -.6s; } .kz-wave i:nth-child(4n) { animation-delay: -.9s; }
.kz-wave i:nth-child(5n) { background: var(--accent); }
@keyframes kz-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes kz-halo-ring { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes kz-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.kz-metric { display: grid; gap: 6px; }
.kz-metric__figure { font-size: clamp(52px, 2rem + 3vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.kz-metric__caption { font-size: 17px; line-height: 1.45; color: var(--ink-2); max-width: 26ch; }
.kz-metric__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); margin-top: var(--space-12); }
.kz-metric--s .kz-metric__figure { font-size: 40px; color: var(--ink); }
.kz-metric--s .kz-metric__caption { font-size: 14px; color: var(--ink-3); }
.kz-insight { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-24); }
.kz-insight__quote { font-size: clamp(21px, 1rem + .8vw, 26px); line-height: 1.35; font-weight: 500; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.kz-insight__bridge { position: relative; display: grid; place-items: center; width: 168px; height: 40px; }
.kz-insight__bridge::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent); }
.kz-insight__bridge::after { content: ""; position: absolute; top: calc(50% - 3px); left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-glow); animation: kz-travel 2.8s var(--ease-in-out) infinite; }
.kz-insight__bridge .kz-chip { position: relative; z-index: 1; }
@keyframes kz-travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@media (max-width: 760px) {
.kz-insight { grid-template-columns: 1fr; }
.kz-insight__bridge { width: 40px; height: 72px; }
.kz-insight__bridge::before { inset: 0 auto 0 50%; width: 1px; height: auto; background: var(--line-strong); }
.kz-insight__bridge::after { display: none; }
}
.kz-compare { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.kz-compare > * { padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.kz-compare__corner { border-bottom: 0; }
.kz-compare__col { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); border-bottom: 0; }
.kz-compare__col--on { display: flex; align-items: center; gap: 8px; color: var(--accent-text); background: var(--accent-tint); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-top: 22px; }
.kz-compare__col--on svg { width: 14px; height: 13px; fill: currentColor; }
.kz-compare__row { font-weight: 600; color: var(--ink); }
.kz-compare__off { display: flex; gap: 10px; color: var(--ink-3); }
.kz-compare__on { display: flex; gap: 10px; color: var(--ink); font-weight: 500; background: var(--accent-tint); border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.kz-compare__on--last { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-bottom: 0; padding-bottom: 24px; }
.kz-compare__off::before { content: ""; width: 14px; height: 14px; margin-top: 4px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-quiet); }
.kz-compare__on .kz-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent-text); stroke-width: 2.25; }
@media (max-width: 760px) {
.kz-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kz-compare > * { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.kz-compare__corner { display: none; }
.kz-compare__row { grid-column: 1 / -1; padding-bottom: 4px; border-bottom: 0; }
}
@media (max-width: 480px) {
.kz-compare > * { padding: 14px 12px; font-size: 14px; }
.kz-compare__off, .kz-compare__on { gap: 8px; }
}
.kz-faq { display: grid; gap: 10px; }
.kz-faq details { border-radius: var(--radius-md); background: var(--paper-sunken); transition: background-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.kz-faq details[open] { background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.kz-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-20) var(--space-24); cursor: pointer; list-style: none; font-size: 17px; line-height: 1.35; font-weight: 650; letter-spacing: -.005em; color: var(--ink); border-radius: var(--radius-md); }
.kz-faq summary::-webkit-details-marker { display: none; }
.kz-faq__plus { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.kz-faq__plus::before, .kz-faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.75px; border-radius: 1px; background: var(--ink); transform: translate(-50%, -50%); }
.kz-faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.kz-faq details[open] .kz-faq__plus { transform: rotate(45deg); background: var(--ink); }
.kz-faq details[open] .kz-faq__plus::before, .kz-faq details[open] .kz-faq__plus::after { background: var(--paper); }
.kz-faq__a { padding: 0 var(--space-24) var(--space-24); font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.kz-prompt { display: grid; gap: var(--space-12); padding: var(--space-20) var(--space-20) var(--space-16) var(--space-24); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-control), var(--shadow-card); transition: box-shadow var(--duration-base) var(--ease-out); }
.kz-prompt:focus-within { box-shadow: inset 0 0 0 2px var(--focus), var(--shadow-card), var(--shadow-glow); }
.kz-prompt__label { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.kz-prompt__input { width: 100%; min-height: 60px; padding: 0; border: 0; outline: 0; resize: none; background: transparent; font: 500 21px/1.4 var(--font-sans); letter-spacing: -.01em; color: var(--ink); caret-color: var(--accent); }
.kz-prompt__input::placeholder { color: var(--ink-3); }
.kz-prompt__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); }
.kz-prompt__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kz-prompt__note { font-size: 13px; color: var(--ink-3); }
.kz-loop { position: relative; isolation: isolate; width: 100%; max-width: 960px; aspect-ratio: 960 / 440; margin-inline: auto; container-type: inline-size; }
.kz-loop::before { content: ""; position: absolute; z-index: -1; left: 30%; top: 22%; width: 40%; height: 56%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 38%, transparent), transparent); filter: blur(24px); }
.kz-loop svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kz-loop__band { fill: none; stroke: var(--paper-sunken); stroke-width: 36; }
.kz-loop__track { fill: none; stroke: var(--line-control); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 7; }
.kz-loop__tail { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
.kz-loop__dot { fill: var(--accent); stroke: var(--paper-raised); stroke-width: 2.5; }
.kz-loop__dot-halo { fill: var(--halo); opacity: .5; }
.kz-loop__node { fill: var(--paper-raised); stroke: var(--line-control); stroke-width: 1.75; transition: fill var(--duration-base) var(--ease-out), stroke var(--duration-base) var(--ease-out); }
.kz-loop__node.is-active { fill: var(--ink); stroke: var(--paper-raised); }
.kz-loop__station { position: absolute; transform: translate(-50%, 0); display: grid; justify-items: center; gap: 4px; width: 24%; text-align: center; }
.kz-loop__station--above { transform: translate(-50%, -100%); }
.kz-loop__station--right { transform: translate(0, -50%); justify-items: start; text-align: left; width: 15%; }
.kz-loop__station--left { transform: translate(-100%, -50%); justify-items: end; text-align: right; width: 15%; }
.kz-loop__name { font-size: clamp(14px, 1.95cqw, 19px); line-height: 1.2; font-weight: 650; letter-spacing: -.01em; color: var(--ink); transition: color var(--duration-base) var(--ease-out); }
.kz-loop__meta { font-size: clamp(11px, 1.4cqw, 13.5px); line-height: 1.35; color: var(--ink-3); }
.kz-loop__station.is-active .kz-loop__name { color: var(--accent-text); }
.kz-loop__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42%; text-align: center; display: grid; gap: 8px; justify-items: center; }
.kz-loop__center .kz-h { font-size: clamp(18px, 3.2cqw, 32px); line-height: 1.08; letter-spacing: -.02em; }
.kz-loop__center .kz-caption { font-size: clamp(11px, 1.4cqw, 14px); max-width: 30ch; }
@media (max-width: 640px) {
.kz-loop { aspect-ratio: auto; display: grid; gap: var(--space-20); }
.kz-loop::before { left: -10%; top: -10%; width: 80%; height: 50%; }
.kz-loop svg { display: none; }
.kz-loop__center { position: static; transform: none; width: auto; order: -1; text-align: left; justify-items: start; }
.kz-loop__center .kz-h { font-size: 26px; }
.kz-loop__center .kz-caption { font-size: 14px; }
.kz-loop ol { position: relative; display: grid; padding-left: 30px; }
.kz-loop ol::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 18px; width: 2px; background: repeating-linear-gradient(180deg, var(--line-control) 0 2px, transparent 2px 8px); }
.kz-loop__station, .kz-loop__station--above, .kz-loop__station--right, .kz-loop__station--left { position: relative; inset: auto !important; transform: none; width: auto; justify-items: start; text-align: left; padding: 10px 0; }
.kz-loop__station::before { content: ""; position: absolute; left: -30px; top: 13px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper-raised); box-shadow: inset 0 0 0 1.75px var(--line-control); transition: background-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.kz-loop__station.is-active::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.kz-loop__name { font-size: 17px; }
.kz-loop__meta { font-size: 14px; }
}
.kz-founder { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-40); align-items: center; }
.kz-portrait { position: relative; width: 168px; height: 168px; border-radius: 50%; padding: 5px; background: conic-gradient(from 210deg, var(--accent), var(--halo), var(--paper-raised), var(--accent)); box-shadow: var(--shadow-card); }
.kz-portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--paper-raised); }
.kz-founder__name { font-size: 24px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.kz-founder__role { font-size: 15px; color: var(--ink-3); margin-top: 2px; }
.kz-founder__stats { display: flex; flex-wrap: wrap; gap: var(--space-32); margin-top: var(--space-24); padding-top: var(--space-20); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .kz-founder { grid-template-columns: 1fr; gap: var(--space-24); } }
.kz-lockup { display: inline-flex; align-items: center; gap: .42em; color: var(--ink); font-size: 40px; }
.kz-lockup svg { width: 1.05em; height: 1em; fill: currentColor; }
.kz-lockup span { font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.kz-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-48) var(--space-64); align-items: start; }
.kz-hero__head { grid-column: 1 / -1; display: grid; gap: var(--space-24); justify-items: start; }
.kz-hero__copy { display: grid; gap: var(--space-28); justify-items: start; padding-top: var(--space-8); }
.kz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.kz-assure { display: flex; flex-wrap: wrap; gap: var(--space-28); }
.kz-assure li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.35; color: var(--ink-3); }
.kz-assure b { display: block; color: var(--ink); font-weight: 600; }
.kz-assure .kz-icon { margin-top: 1px; color: var(--ink-2); }
.kz-scene { position: relative; display: grid; }
.kz-scene__offset { margin-left: 16%; }
.kz-scene__bridge { position: relative; height: 64px; }
.kz-scene__bridge::before { content: ""; position: absolute; left: calc(16% + 40px); top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--line-control) 25%, var(--line-control) 75%, transparent); }
.kz-scene__bridge::after { content: ""; position: absolute; left: calc(16% + 37px); top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-glow); animation: kz-drop 2.6s var(--ease-in-out) infinite; }
.kz-scene__bridge .kz-chip { position: absolute; left: calc(16% + 60px); top: 50%; transform: translateY(-50%); }
@keyframes kz-drop { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } }
@media (max-width: 960px) { .kz-hero { grid-template-columns: minmax(0, 1fr); } .kz-scene__offset { margin-left: 0; } .kz-scene__bridge::before { left: 40px; } .kz-scene__bridge::after { left: 37px; } .kz-scene__bridge .kz-chip { left: 60px; } }
.kz-hero-center { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: var(--space-24); min-height: calc(100svh - var(--layout-nav) - 32px); padding-block: var(--space-48); text-align: center; }
.kz-hero-center .kz-h--hero { max-width: 11em; }
.kz-hero-center .kz-lead { max-width: 31em; margin-inline: auto; color: var(--ink-2); }
.kz-hero-center .kz-hero__actions, .kz-hero-center .kz-assure { justify-content: center; margin-top: var(--space-8); }
.kz-hero-center .kz-assure li { text-align: left; }
@media (max-width: 480px) { .kz-hero-center .kz-chip { height: auto; min-height: 30px; padding-block: 7px; line-height: 1.3; white-space: normal; text-align: left; } }
.kz-glow--center::before { right: auto; left: calc(50% - 360px); top: -200px; }
.kz-glow--center::after { -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 32%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 55% 55% at 50% 32%, #000 0%, transparent 72%); }
.kz-rise { animation: kz-rise var(--duration-slow) var(--ease-out) both; }
@keyframes kz-rise { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
.kz-page *, .kz-page *::before, .kz-page *::after, .kz-night::before, .kz-glow::before { animation: none !important; transition: none !important; }
}
@font-face { font-family: Manrope; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/manrope-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--layout-nav) + 32px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; transition: top var(--duration-fast) var(--ease-out); }
.skip:focus { top: 12px; }
.site-nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--space-24) 0; pointer-events: none; }
.site-nav .kz-nav > * { pointer-events: auto; }
@media (max-width: 640px) { .site-nav { padding-inline: var(--space-16); } }
.section { padding-top: var(--space-144); }
.section__head { margin-bottom: var(--space-64); }
@media (max-width: 760px) {
.section { padding-top: var(--space-104); }
.section__head { margin-bottom: var(--space-48); }
.kz-wrap { padding-inline: var(--space-16); }
}
.hero { padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px); overflow: hidden; }
.hero { --logos-band: 136px; }
.hero .kz-hero-center { min-height: calc(100svh - var(--layout-nav) - 24px - var(--logos-band)); padding-block: var(--space-32) var(--space-24); }
.logos { display: grid; gap: var(--space-24); justify-items: center; margin-bottom: var(--space-64); }
.logos__viewport { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.logos__track { display: flex; justify-content: center; width: 100%; }
.logos__group { display: flex; flex: none; align-items: center; gap: var(--space-64); }
.logos__track.is-moving { justify-content: flex-start; width: max-content; animation: logos-scroll 42s linear infinite; }
.logos__track.is-moving .logos__group { padding-right: var(--space-64); }
.logos__viewport:hover .logos__track { animation-play-state: paused; }
@keyframes logos-scroll { to { transform: translateX(-50%); } }
.logo {
--s: 1;
display: block; height: calc(var(--h) * var(--s)); aspect-ratio: var(--r);
background: var(--ink-quiet); transition: background-color var(--duration-base) var(--ease-out);
-webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.logos__viewport:hover .logo { background: var(--ink-3); }
.logo--french-proptech { --r: 2.259; --h: 40px; -webkit-mask-image: url(/assets/logos/french-proptech.webp); mask-image: url(/assets/logos/french-proptech.webp); }
.logo--notaires-de-france { --r: 1.065; --h: 54px; -webkit-mask-image: url(/assets/logos/notaires-de-france.webp); mask-image: url(/assets/logos/notaires-de-france.webp); }
.logo--gip { --r: 0.856; --h: 40px; -webkit-mask-image: url(/assets/logos/gip.webp); mask-image: url(/assets/logos/gip.webp); }
.logo--schenker-storen { --r: 2.950; --h: 36px; -webkit-mask-image: url(/assets/logos/schenker-storen.webp); mask-image: url(/assets/logos/schenker-storen.webp); }
.logo--degomme-boccard { --r: 7.813; --h: 24px; -webkit-mask-image: url(/assets/logos/degomme-boccard.webp); mask-image: url(/assets/logos/degomme-boccard.webp); }
.logo--bump { --r: 4.234; --h: 26px; -webkit-mask-image: url(/assets/logos/bump.webp); mask-image: url(/assets/logos/bump.webp); }
.logo--redbridge { --r: 3.448; --h: 38px; -webkit-mask-image: url(/assets/logos/redbridge.webp); mask-image: url(/assets/logos/redbridge.webp); }
@media (max-width: 760px) {
.logos { margin-bottom: var(--space-48); }
.logos__group, .logos__track.is-moving .logos__group { gap: var(--space-40); padding-right: var(--space-40); }
.logo { --s: .82; }
}
.logos__track:not(.is-moving) .logos__group { flex-wrap: wrap; justify-content: center; row-gap: var(--space-24); }
@media (prefers-reduced-motion: reduce) { .logos__track.is-moving { animation: none; } }
.statement { padding-top: calc(var(--space-144) + var(--space-24)); }
.statement__text { max-width: 19ch; margin: 0 auto; text-align: center; font-size: clamp(40px, 1.4rem + 4.4vw, 84px); line-height: 1.04; font-weight: 800; letter-spacing: -.034em; color: var(--ink); text-wrap: balance; }
.statement__end { color: var(--ink-quiet); }
.statement .w { transition: opacity 320ms var(--ease-out); }
.js .statement.is-live .w { opacity: .13; }
.js .statement.is-live .w.is-lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .statement.is-live .w { opacity: 1; } }
.stake__text { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.stakes__head .kz-label { margin-bottom: -8px; }
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin-bottom: var(--space-24); }
.result { display: grid; gap: var(--space-16); align-content: start; padding: var(--space-28); }
.result__when { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); }
.result__bar { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--ink); transform-origin: left; }
.result--next .result__bar { background: repeating-linear-gradient(90deg, var(--line-control) 0 8px, transparent 8px 14px); }
.result__dot { position: absolute; right: -2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--paper-raised), var(--shadow-glow); }
.result__title { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.result__list { display: grid; gap: 10px; padding-top: var(--space-16); border-top: 1px solid var(--line); }
.result__list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.result__list .kz-icon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--ink); stroke-width: 2.25; }
.js .results.is-armed .result__bar { transform: scaleX(.03); transition: transform 900ms var(--ease-out); }
.js .results.is-armed .result:nth-child(2) .result__bar { transition-delay: 450ms; }
.js .results.is-armed .result:nth-child(3) .result__bar { transition-delay: 900ms; }
.js .results.is-armed.is-in .result__bar { transform: none; }
@media (max-width: 900px) { .results { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .js .results.is-armed .result__bar { transform: none; transition: none; } }
.stakes__head { display: grid; gap: var(--space-24); max-width: 880px; margin-bottom: var(--space-48); }
.stakes { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch; }
.stake { position: relative; overflow: hidden; display: grid; gap: var(--space-20); align-content: start; padding: var(--space-32) var(--space-32) var(--space-24); }
.stake::before { content: ""; position: absolute; z-index: -1; right: -18%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 30%, transparent), transparent); filter: blur(20px); }
.stake { isolation: isolate; }
.stake__when { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.stake__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--paper-sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.stake__icon .kz-icon { width: 19px; height: 19px; }
.stake--grow .stake__icon { background: var(--ink); color: var(--paper); box-shadow: none; }
.stake__list li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.stake__list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.75px var(--ink-quiet); }
.stake__viz { position: absolute; right: var(--space-32); top: var(--space-32); width: 112px; height: 42px; overflow: visible; }
.stake__viz rect { fill: var(--line-strong); }
.stake__viz rect.is-on { fill: var(--accent); }
.stake__viz path { fill: none; stroke: var(--ink-quiet); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 0; }
.stake__viz circle { fill: var(--accent); }
.js .stakes.is-armed .stake__viz path { stroke-dashoffset: 200; transition: stroke-dashoffset 1400ms var(--ease-out) 300ms; }
.js .stakes.is-armed.is-in .stake__viz path { stroke-dashoffset: 0; }
.js .stakes.is-armed .stake__viz rect { transform-origin: 0 46px; transform: scaleY(.1); transition: transform 700ms var(--ease-out); }
.js .stakes.is-armed .stake__viz rect:nth-child(2) { transition-delay: 90ms; } .js .stakes.is-armed .stake__viz rect:nth-child(3) { transition-delay: 180ms; }
.js .stakes.is-armed .stake__viz rect:nth-child(4) { transition-delay: 270ms; } .js .stakes.is-armed .stake__viz rect:nth-child(5) { transition-delay: 360ms; }
.js .stakes.is-armed.is-in .stake__viz rect { transform: none; }
.stakes__then { display: grid; place-items: center; align-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.stakes__then .kz-icon { width: 20px; height: 20px; color: var(--ink-2); }
@media (max-width: 860px) {
.stakes { grid-template-columns: minmax(0, 1fr); }
.stakes__then { grid-auto-flow: column; padding-block: var(--space-12); }
.stakes__then .kz-icon { transform: rotate(90deg); }
.stake { padding: var(--space-24) var(--space-20) var(--space-16); }
.stake__viz { right: var(--space-20); top: var(--space-24); width: 84px; }
}
.journey { --stick: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 82px); }
.journey__rail { display: none; }
.journey.is-stacked .journey__rail {
position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 20px); z-index: 6;
display: flex; gap: 2px; width: max-content; max-width: 100%; margin: 0 auto var(--space-32); padding: 5px;
border-radius: var(--radius-pill); background: color-mix(in srgb, var(--paper-raised) 78%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); overflow: hidden;
transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.journey.is-leaving .journey__rail { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.journey__step { border: 0; background: transparent; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--ink-3); transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); white-space: nowrap; }
.journey__step b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-quiet); transition: color var(--duration-base) var(--ease-out); }
.journey__step.is-done { color: var(--ink-2); }
.journey__step.is-active { background: var(--ink); color: var(--paper); }
.journey__step.is-active b { color: var(--accent-on-night); }
.journey__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.journey__bar i { display: block; height: 100%; width: calc(var(--prog, 0) * 100%); background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.journey__cards { display: grid; gap: var(--space-24); }
.journey.is-stacked .journey__cards { gap: 26vh; padding-bottom: 14vh; }
.journey.is-stacked .jcard { position: sticky; top: calc(var(--stick) + var(--i) * 12px); }
.jcard__inner {
position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-32);
padding: var(--space-20); border-radius: var(--radius-xl); background: var(--paper-raised);
box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card), var(--shadow-float);
transform-origin: 50% 0; transform: translateY(calc(var(--p, 0) * -12px)) scale(calc(1 - var(--p, 0) * .06));
}
.jcard__inner::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: var(--paper-sunken); opacity: calc(var(--p, 0) * .7); pointer-events: none; }
.jcard__text { display: grid; align-content: start; gap: var(--space-16); padding: var(--space-12) 0 var(--space-4) var(--space-16); }
.jcard__text .kz-h--2 { font-size: clamp(24px, 1rem + 1vw, 30px); }
.jcard__top { display: flex; align-items: flex-end; gap: 8px; }
.jcard__num {
font-size: 56px; line-height: .78; font-weight: 800; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
background-image: linear-gradient(180deg, var(--ink) 25%, var(--ink-quiet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jcard__of { padding-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--ink-quiet); }
.jcard__stake { margin-left: auto; align-self: center; }
.jcard__rows { display: grid; margin: 0; }
.jcard__rows > div { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--line); }
.jcard__rows dt { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.jcard__rows dd { margin: 0; font-size: 15.5px; line-height: 1.48; color: var(--ink-2); text-wrap: pretty; }
.jcard__rows > .jcard__result { margin-top: 6px; padding: 12px 14px; border-top: 0; border-radius: var(--radius-md); background: var(--accent-tint); }
.jcard__result dt { color: var(--accent-text); }
.jcard__result dd { display: flex; gap: 10px; font-weight: 600; color: var(--ink); }
.jcard__result .kz-icon { flex: none; margin-top: 3px; color: var(--accent-text); stroke-width: 2.25; }
.jcard__stage {
position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; margin: 0;
padding: var(--space-24) var(--space-20); border-radius: calc(var(--radius-xl) - 10px); background: var(--paper-sunken);
}
.jcard__stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 45%; width: 90%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 42%, transparent), transparent); filter: blur(24px); }
.jcard__stage::after {
content: ""; position: absolute; z-index: -1; inset: 0;
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 36px 36px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
}
.jvis { width: min(100%, 470px); transform: translateY(calc((1 - var(--e, 1)) * 48px)); }
.jvis__tag { margin: 0 0 6px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.jvis--duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.jvis--duo .jvis__a { grid-column: 1 / 11; position: relative; z-index: 1; }
.jvis--duo .jvis__b { grid-column: 3 / 13; margin-top: -10px; position: relative; z-index: 2; transform: translateY(calc((1 - var(--e, 1)) * 36px)); }
.jvis--duo .kz-card { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); }
.jvis--duo .opps { width: 100%; }
.jvis--duo .chat { width: 100%; gap: 10px; padding: 14px; }
.jvis--duo .chat__msg { padding: 8px 12px; }
.jvis--duo .chat__msg { font-size: 14px; }
.jvis--stack { display: grid; gap: 12px; justify-items: center; }
.jvis--stack .measure, .jvis--stack .grow { width: 100%; padding: 22px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); }
.jvis--stack .jvis__tag { margin: 6px 0 0; }
.jvis__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mind { display: grid; gap: 14px; padding: 18px; }
.mind__head { display: flex; align-items: center; gap: 12px; }
.mind__rings { width: 38px; height: 38px; flex: none; }
.mind__rings circle { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .35; }
.mind__rings circle:last-child { fill: var(--accent); opacity: 1; }
.mind__name { font-size: 15px; font-weight: 650; line-height: 1.2; color: var(--ink); }
.mind__role { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.mind__facts { display: grid; gap: 6px; }
.mind__facts li { display: grid; gap: 1px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--paper-sunken); font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.mind__facts span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.mind__facts li.is-on { background: var(--accent-tint); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.mind__facts li.is-on span { color: var(--accent-text); }
.answer { display: grid; gap: 10px; padding: 18px; }
.answer__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; font-weight: 650; color: var(--ink); }
.answer__who span { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.answer__q { justify-self: end; max-width: 90%; padding: 9px 13px; border-radius: 14px 14px 5px 14px; background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.4; font-weight: 500; }
.answer__a { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.answer__a mark { padding: 1px 3px; border-radius: 4px; background: var(--accent-tint); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.answer__src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.answer__src .kz-chip { height: 26px; font-size: 12px; }
.grow { display: grid; gap: 14px; }
.grow__title { font-size: 16px; font-weight: 650; color: var(--ink); }
.grow__group { display: grid; gap: 6px; }
.grow__label { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.grow__label .kz-icon { width: 15px; height: 15px; }
.grow__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--paper-sunken); font-size: 14.5px; font-weight: 500; color: var(--ink); }
.grow__row .kz-chip { height: 26px; font-size: 12px; }
.grow__brain { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.grow__brain .kz-icon { width: 16px; height: 16px; color: var(--accent-text); }
@media (max-width: 960px) {
.jcard__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-20); padding: var(--space-16); }
.jcard__text { padding: var(--space-12) var(--space-8) 0; }
.jcard__num { font-size: 56px; }
.jcard__stage { padding: var(--space-24) var(--space-12); }
}
@media (max-width: 480px) {
.jvis--duo .jvis__a, .jvis--duo .jvis__b { grid-column: 1 / -1; }
.jvis--duo .jvis__b { margin-top: 12px; }
.jcard__top { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
.jcard__inner { transform: none; }
.jcard__inner::after { opacity: 0; }
.jvis, .jvis--duo .jvis__b { transform: none; }
.js .stakes.is-armed .stake__viz path, .js .stakes.is-armed .stake__viz rect { transform: none; stroke-dashoffset: 0; transition: none; }
}
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); column-gap: 6px; margin: 0 0 var(--space-104); padding: var(--space-28) var(--space-28) var(--space-24); list-style: none; }
.plan__phase { display: grid; gap: 12px; align-content: start; }
.plan__phase > :not(.plan__bar) { padding-right: var(--space-20); }
.plan__when { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); }
.plan__bar { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--ink); transform-origin: left; }
.plan__phase--next .plan__bar { background: repeating-linear-gradient(90deg, var(--line-control) 0 8px, transparent 8px 14px); }
.plan__milestone { position: absolute; right: -2px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--paper-raised), var(--shadow-glow); }
.plan__what { font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.plan__desc { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.plan { margin-bottom: var(--space-24); }
.js .plan.is-armed .plan__bar { transform: scaleX(.02); transition: transform 900ms var(--ease-out); }
.js .plan.is-armed .plan__phase:nth-child(2) .plan__bar { transition-delay: 450ms; }
.js .plan.is-armed .plan__phase:nth-child(3) .plan__bar { transition-delay: 900ms; }
.js .plan.is-armed.is-in .plan__bar { transform: none; }
@media (max-width: 860px) {
.plan { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-24); margin-bottom: var(--space-64); padding: var(--space-24) var(--space-20); }
}
.steps__note { margin-top: var(--space-32); text-align: center; }
.kz-chip .kz-icon { width: 15px; height: 15px; }
.chat { width: min(100%, 440px); display: grid; gap: var(--space-16); padding: var(--space-20); }
.chat--mini { width: 100%; }
.chat__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-12); }
.chat__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat__avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--halo) 0%, var(--accent) 62%, var(--accent-strong) 100%); box-shadow: var(--shadow-glow); color: var(--on-accent); font-size: 15px; font-weight: 700; }
.chat__name { font-size: 15px; font-weight: 650; line-height: 1.2; color: var(--ink); }
.chat__role { margin-top: 1px; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.chat__listen { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.chat__listen .kz-icon { width: 14px; height: 14px; }
.chat__thread { display: grid; gap: 12px; }
.chat__item { position: relative; display: grid; gap: 6px; justify-items: start; }
.chat__item--you { justify-items: end; }
.chat__msg { max-width: 88%; padding: 10px 14px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.chat__msg--camille { border-radius: 16px 16px 16px 6px; background: var(--paper-sunken); color: var(--ink); }
.chat__msg--you { border-radius: 16px 16px 6px 16px; background: var(--ink); color: var(--paper); font-weight: 500; }
.chat__thread > .chat__msg--camille { justify-self: start; }
.chat__source, .chat__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--ink-3); }
.chat__source .kz-icon, .chat__meta .kz-icon { width: 13px; height: 13px; }
.chat__file { display: grid; gap: 8px; width: min(100%, 248px); padding: 8px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); }
.chat__shot { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.3fr; gap: 6px; align-items: center; padding: 10px; border-radius: 8px; background: var(--paper-sunken); }
.chat__col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.2; font-weight: 700; color: var(--ink-3); transition: color 500ms var(--ease-out); }
.chat__shot i { height: 6px; border-radius: 3px; background: var(--line-strong); transition: background-color 500ms var(--ease-out); }
.chat__col--seen { color: var(--accent-text); }
.chat__shot .chat__cell--seen { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.chat.is-playing:not(.is-seen) .chat__col--seen { color: var(--ink-3); }
.chat.is-playing:not(.is-seen) .chat__shot .chat__cell--seen { background: var(--line-strong); }
.chat__fname { display: flex; justify-content: space-between; gap: 8px; padding: 0 4px 2px; font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.chat__fname span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__ftype { flex: none; font-weight: 500; color: var(--ink-3); }
.chat__typing { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px 16px 16px 6px; background: var(--paper-sunken); font-size: 12.5px; font-weight: 600; color: var(--ink-3); opacity: 0; pointer-events: none; }
.chat__typing span { display: inline-flex; gap: 3px; }
.chat__typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-quiet); animation: chat-dot 1.1s var(--ease-in-out) infinite; }
.chat__typing i:nth-child(2) { animation-delay: .15s; } .chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.chat__composer { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 18px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); }
.chat__tool { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); }
.chat__tool .kz-icon { width: 17px; height: 17px; }
.chat__send { background: var(--ink); color: var(--paper); opacity: .25; }
.chat__field { flex: 1; min-width: 0; display: grid; padding: 7px 4px; font-size: 14.5px; line-height: 20px; }
.chat__field > * { grid-area: 1 / 1; height: 40px; overflow: hidden; transition: opacity var(--duration-fast) var(--ease-out); }
.chat__placeholder, .chat__drop { display: flex; align-items: center; }
.chat__placeholder { color: var(--ink-quiet); }
.chat__drop { opacity: 0; font-weight: 600; color: var(--accent-text); }
.chat__draft { color: var(--ink); }
.chat__draft:not(:empty)::after { content: ""; display: inline-block; width: 2px; height: 16px; margin-left: 2px; vertical-align: -3px; background: var(--accent); animation: chat-caret 1s steps(1) infinite; }
@keyframes chat-caret { 50% { opacity: 0; } }
.chat.is-dictating .chat__placeholder, .chat.has-draft .chat__placeholder, .chat.is-drop .chat__placeholder { opacity: 0; }
.chat.is-dictating .chat__mic { background: var(--accent); color: var(--on-accent); animation: kz-ping 1.4s var(--ease-out) infinite; }
.chat.has-draft .chat__send { opacity: 1; }
.chat.is-sending .chat__send { background: var(--accent); color: var(--on-accent); }
.chat.is-drop .chat__composer { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px var(--accent); }
.chat.is-drop .chat__drop { opacity: 1; }
.chat.is-drop .chat__tool:first-child { color: var(--accent-text); }
.chat.is-playing .chat__item { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.chat.is-playing .chat__item[data-step="3"] { transform: translate(28px, 64px) rotate(5deg) scale(.92); transition-duration: 300ms, 650ms; }
.chat.is-playing .chat__item.is-shown, .chat.is-playing .chat__item.is-typing { opacity: 1; transform: none; }
.chat__item .chat__msg { transition: opacity 320ms var(--ease-out); }
.chat__item.is-typing .chat__msg { opacity: 0; }
.chat__item.is-typing .chat__typing { opacity: 1; }
.chat-stage { gap: var(--space-16); align-content: center; }
.chat__replay { justify-self: center; }
html:not(.js) .chat__replay { display: none; }
@media (max-width: 480px) {
.chat { padding: var(--space-16); gap: 14px; }
.chat__msg { max-width: 92%; font-size: 14.5px; }
.chat__listen { width: 28px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
}
@media (max-width: 359px) { .chat__wide { display: none; } }
@media (prefers-reduced-motion: reduce) {
.chat__item, .chat__msg, .chat__composer, .chat__col, .chat__shot i { transition: none; }
}
.flow { width: min(100%, 420px); padding: 20px; display: grid; gap: 2px; }
.flow__title { padding: 2px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 650; }
.flow__row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: var(--radius-sm); font-size: 15px; line-height: 1.35; }
.flow__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); font-variant-numeric: tabular-nums; }
.flow__tool { padding: 5px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.flow__row.is-hot { background: var(--accent-tint); }
.flow__row.is-hot .flow__n { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.flow__row.is-hot .flow__tool { color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.flow__note { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--accent-text); }
.opps { width: min(100%, 440px); padding: 12px; display: grid; gap: 2px; }
.opps__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-md); }
.opps__row + .opps__row:not(.is-first) { box-shadow: inset 0 1px 0 var(--line); border-radius: 0; }
.opps__row.is-first { background: var(--accent-tint); }
.opps__name { font-size: 16px; font-weight: 650; line-height: 1.3; }
.opps__meta { margin-top: 3px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.opps__rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.opps__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 2px 2px; }
.opps__actions .kz-btn { padding: 0 10px; justify-content: center; }
.measure { width: min(100%, 440px); display: grid; gap: 16px; }
.measure__title { font-size: 16px; font-weight: 650; }
.measure__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-3); }
.measure__bar { height: 12px; border-radius: var(--radius-pill); background: var(--paper-sunken); overflow: hidden; }
.measure__bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink-quiet); transform-origin: left; transition: transform 900ms var(--ease-out); }
.measure__row--after .measure__bar i { background: var(--accent); }
.measure__val { text-align: right; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.measure__row--after .measure__val { color: var(--accent-text); }
.measure__check { display: flex; gap: 10px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.measure__check .kz-icon { color: var(--positive); }
.js .measure.is-armed .measure__bar i { transform: scaleX(.08); }
.start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-28) var(--space-32); }
.start > div { display: grid; gap: 6px; flex: 1 1 360px; }
.start__title { font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.trust { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--space-32); font-size: 16px; font-weight: 600; color: var(--ink-2); text-align: center; }
.trust .kz-icon { flex: none; color: var(--positive); }
.founder-card { padding: clamp(28px, 4.5vw, 56px); }
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-64); align-items: start; }
.faq-layout__head { position: sticky; top: calc(var(--layout-nav) + 40px); display: grid; gap: var(--space-20); justify-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); } .faq-layout__head { position: static; } }
.contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-48); align-items: center; }
.contact__text { display: grid; gap: var(--space-24); justify-items: start; }
.contact__list { display: grid; gap: 10px; }
.contact__list li { display: flex; gap: 10px; align-items: center; color: var(--on-night); font-size: 16px; }
.contact__list .kz-icon { color: var(--accent-on-night); }
.contact__status { min-height: 20px; font-size: 13px; color: var(--accent-on-night); }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.kz-night .kz-prompt { background: var(--night-raised); box-shadow: inset 0 0 0 1px var(--on-night-2), var(--shadow-card); gap: var(--space-16); }
.kz-night .kz-prompt:focus-within { box-shadow: inset 0 0 0 2px var(--accent-on-night), var(--shadow-glow); }
.kz-night .kz-prompt__label, .kz-night .kz-prompt__note { color: var(--on-night-2); }
.kz-night .kz-prompt__input { color: var(--on-night); caret-color: var(--accent-on-night); }
.kz-night .kz-prompt__input::placeholder { color: var(--on-night-2); }
.kz-night button.kz-chip:hover { box-shadow: inset 0 0 0 1px var(--on-night-2); }
.kz-prompt__input { font-size: clamp(18px, 1rem + .4vw, 21px); }
.footer { margin-top: var(--space-144); padding-block: var(--space-64) var(--space-24); border-top: 1px solid var(--line); overflow: hidden; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-40); }
.footer__brand p { margin-top: var(--space-12); font-size: 15px; color: var(--ink-3); }
.footer__brand .kz-lockup { font-size: 26px; text-decoration: none; }
.footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-64); }
.footer__cols div { display: grid; gap: 10px; align-content: start; }
.footer__cols a { font-size: 15px; color: var(--ink-2); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.footer__cols a:hover { color: var(--ink); }
.footer__giant {
display: flex; align-items: baseline; justify-content: center; gap: .16em; margin-top: var(--space-64);
font-size: clamp(64px, 18vw, 264px); font-weight: 800; letter-spacing: -.045em; line-height: .8;
color: color-mix(in srgb, var(--ink) 7%, transparent); user-select: none;
-webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
}
.footer__giant svg { width: .74em; height: .71em; fill: currentColor; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-12); padding-top: var(--space-20); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
@media (max-width: 640px) { .footer { margin-top: var(--space-104); } .footer__cols { gap: var(--space-40); } }
.js .reveal.is-armed { transform: translateY(18px); transition: transform var(--duration-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.js .reveal.is-armed.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js .reveal.is-armed { transform: none; transition: none; }
.measure__bar i { transition: none; }
.js .plan.is-armed .plan__bar { transform: none; transition: none; }
}
.js .measure.is-armed.is-in .measure__bar i { transform: none; }
.nav-end { display: flex; align-items: center; gap: var(--space-8); }
.navdrop { position: relative; display: flex; }
.navdrop__btn {
display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: var(--radius-pill);
background: transparent; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-2); cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.navdrop__btn .kz-icon { width: 15px; height: 15px; transition: transform var(--duration-base) var(--ease-out); }
.navdrop__btn:hover, .navdrop__btn[aria-expanded="true"], .navdrop__btn[aria-current] { background: var(--paper-sunken); color: var(--ink); }
.navdrop__btn[aria-expanded="true"] .kz-icon { transform: rotate(180deg); }
.navdrop__panel {
position: absolute; left: -6px; top: calc(100% + 14px); width: 440px; padding: 8px;
border-radius: 24px; background: var(--paper-raised);
box-shadow: inset 0 0 0 1px var(--line-strong), 0 2px 6px rgba(11,20,36,.05), 0 24px 60px -12px rgba(11,20,36,.22);
opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: 24px 0; pointer-events: none; visibility: hidden;
transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}
.navdrop__panel--s { width: 300px; }
.navdrop__num .kz-icon { width: 18px; height: 18px; color: var(--ink-2); }
.kz-nav__links .navdrop__list a:hover .navdrop__num .kz-icon { color: var(--paper); }
.navdrop__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.navdrop.is-open .navdrop__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.navdrop__list { display: grid; gap: 2px; }
.kz-nav__links .navdrop__list a { display: grid; height: auto; font-size: inherit; font-weight: inherit; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out); }
.navdrop__list a:hover, .navdrop__list a:focus-visible { background: var(--paper-sunken); }
.navdrop__num { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--paper-sunken); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.navdrop__list a:hover .navdrop__num { background: var(--ink); color: var(--paper); box-shadow: none; }
.navdrop__list b { display: block; font-size: 15px; font-weight: 650; line-height: 1.25; color: var(--ink); }
.navdrop__list small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.kz-nav__links .navdrop__all { display: flex; height: auto; align-items: center; justify-content: space-between; margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: var(--paper-sunken); font-size: 14px; font-weight: 650; color: var(--ink); text-decoration: none; }
.navdrop__all .kz-icon { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-out); }
.navdrop__all:hover .kz-icon { transform: translateX(3px); }
.kz-nav__links > a[aria-current="page"] { color: var(--ink); background: var(--paper-sunken); }
.nav-burger { position: relative; width: 52px; justify-content: center; padding: 0; border: 0; cursor: pointer; color: var(--ink); font: inherit; }
.nav-burger i { position: absolute; left: 18px; right: 18px; height: 1.75px; border-radius: 2px; background: currentColor; transition: transform var(--duration-base) var(--ease-out); }
.nav-burger i:first-of-type { transform: translateY(-4px); }
.nav-burger i:last-of-type { transform: translateY(4px); }
.nav-burger[aria-expanded="true"] i:first-of-type { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-of-type { transform: rotate(-45deg); }
@media (max-width: 1020px) { .kz-nav__links { display: none; } }
@media (min-width: 1021px) { .nav-burger { display: none; } }
.mmenu {
position: absolute; right: var(--space-24); top: calc(env(safe-area-inset-top, 0px) + 12px + 52px + 10px); z-index: 2;
display: grid; gap: 2px; width: min(400px, calc(100vw - 2 * var(--space-24))); max-height: calc(100svh - 96px); overflow-y: auto; padding: 18px;
border-radius: 28px; background: var(--paper-raised); pointer-events: auto;
box-shadow: inset 0 0 0 1px var(--line-strong), 0 2px 6px rgba(11,20,36,.05), 0 24px 60px -12px rgba(11,20,36,.24);
animation: mmenu-in var(--duration-base) var(--ease-out);
}
@keyframes mmenu-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.mmenu .kz-label { padding: 2px 10px 8px; }
.mmenu > a:not(.kz-btn) { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 14px; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mmenu > a:not(.kz-btn) span { width: 30px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-quiet); }
.mmenu > a:not(.kz-btn):hover { background: var(--paper-sunken); }
.mmenu__main { display: grid; gap: 2px; margin: 10px 0 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.mmenu__main a { padding: 11px 10px; border-radius: 14px; font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.mmenu__main a:hover { background: var(--paper-sunken); }
@media (max-width: 640px) { .mmenu { right: var(--space-16); width: calc(100vw - 2 * var(--space-16)); } }
@media (max-width: 480px) { .nav-end .nav-cta { height: 52px; padding-left: 18px; font-size: 14px; } }
@media (max-width: 380px) { .nav-end .nav-cta { padding-right: 18px; } .nav-end .nav-cta .kz-btn__arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .mmenu { animation: none; } .navdrop__panel { transition: none; } }
.section__title { display: grid; gap: var(--space-16); }
.steps__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-12) var(--space-24); }
.jcard__more { justify-self: start; margin-top: 2px; font-size: 14.5px; }
.journey.is-stacked .journey__step { padding: 0 12px; }
.journey.is-stacked .journey__cards { padding-bottom: 6vh; }
.sectors__head { display: grid; gap: var(--space-16); }
.sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
.sector { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-28); }
.sector__icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: var(--space-12); border-radius: 15px; background: var(--paper-sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.sector__icon .kz-icon { width: 22px; height: 22px; }
.sector h3 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.012em; color: var(--ink); }
.sector p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 960px) { .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sectors .sector__icon, .skills .skill__icon { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(150deg, var(--accent-tint), color-mix(in srgb, var(--accent-tint) 55%, var(--paper-raised))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
.sector__art, .skill__art { width: 44px; height: 44px; overflow: visible; transition: transform 500ms var(--ease-soft); }
.scene .si-a { fill: var(--accent); }
.scene .si-m { fill: color-mix(in srgb, var(--accent) 38%, var(--paper-raised)); }
.scene .si-l { fill: var(--paper-raised); }
.scene .si-d { fill: var(--ink); }
.scene .si-edge { stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-width: 1; }
.scene .si-ring { stroke: var(--paper-raised); stroke-width: 2; }
.scene .si-tick { fill: none; stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sectors .sector:hover .sector__icon, .skills .skill:hover .skill__icon { background: linear-gradient(150deg, var(--accent-tint), color-mix(in srgb, var(--accent-tint) 55%, var(--paper-raised))); transform: none; }
.sectors .sector:hover .sector__art, .skills .skill:hover .skill__art { transform: translateY(-3px) scale(1.04); }
@media (max-width: 520px) { .skills .skill__icon, .skill > .kz-h { justify-self: center; text-align: center; } }
@media (max-width: 520px) {
.sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.sector { aspect-ratio: 1; padding: var(--space-16) var(--space-12); gap: var(--space-12); align-content: center; justify-items: center; text-align: center; }
.sectors .sector__icon { width: 68px; height: 68px; border-radius: 20px; margin: 0; }
.sector__art { width: 46px; height: 46px; }
.sector h3 { font-size: 16px; line-height: 1.25; text-wrap: balance; }
.sector p { display: none; }
}
.board { width: 100%; display: grid; gap: 14px; padding: 18px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); }
.board__head { display: grid; gap: 10px; }
.board__title { font-size: 15px; font-weight: 650; color: var(--ink); }
.board__who { display: flex; flex-wrap: wrap; gap: 6px; }
.board__who span { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 12px; font-weight: 650; color: var(--ink-2); }
.board__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.board__col { display: grid; gap: 6px; align-content: start; }
.board__label { padding: 0 2px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.board__note { min-height: 64px; padding: 9px 10px; border-radius: 12px; background: var(--paper-sunken); font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.board__note.is-on { background: var(--accent-tint); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
@media (max-width: 420px) { .board__cols { grid-template-columns: minmax(0, 1fr); } .board__note { min-height: 0; } }
.page-hero { overflow: hidden; padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-104)); }
.page-hero__text { display: grid; gap: var(--space-24); justify-items: center; max-width: 900px; margin: 0 auto; text-align: center; }
.page-hero__text .kz-lead { max-width: 40em; }
.page-hero__title { font-size: clamp(42px, 1.4rem + 4.2vw, 80px); text-wrap: balance; }
.page-hero > .kz-wrap > :first-child { animation: page-rise 900ms var(--ease-out) both; }
@keyframes page-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .page-hero > .kz-wrap > :first-child { animation: none; } }
.section--tight { padding-top: var(--space-64); }
@media (max-width: 760px) { .page-hero { padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-48)); } .section--tight { padding-top: var(--space-48); } }
.svc-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-12); margin-top: var(--space-64); }
.svc-index__item { display: grid; gap: 6px; align-content: start; padding: var(--space-20); text-decoration: none; color: var(--ink-3); font-size: 14px; line-height: 1.4; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.svc-index__item b { font-size: 16px; line-height: 1.25; font-weight: 650; color: var(--ink); }
.svc-index__num { margin-bottom: 10px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-quiet); }
.svc-index__item:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); }
.svc-index__item:hover .svc-index__num { color: var(--accent-text); }
@media (max-width: 1000px) { .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-index__item:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .svc-index { grid-template-columns: minmax(0, 1fr); } }
.svc-detail { padding-top: var(--space-48); scroll-margin-top: calc(var(--layout-nav) + 8px); }
#coaching.svc-detail { padding-top: var(--space-104); }
.svc { display: grid; gap: var(--space-32); padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card), var(--shadow-float); }
.svc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); padding-bottom: var(--space-24); border-bottom: 1px solid var(--line); }
.svc__id { display: flex; align-items: flex-end; gap: 8px; }
.svc__id .jcard__num { font-size: clamp(56px, 2rem + 3vw, 84px); }
.svc__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); }
.svc__intro { display: grid; gap: var(--space-24); align-content: start; }
.svc__lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.svc__facts { display: grid; margin: 0; }
.svc__facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-16); padding: 14px 0; border-top: 1px solid var(--line); }
.svc__facts dt { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.svc__facts dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.svc__body { display: grid; gap: var(--space-20); align-content: start; }
.svc__steps { display: grid; gap: 0; counter-reset: step; }
.svc__steps li { position: relative; display: grid; gap: 4px; padding: 0 0 var(--space-24) 52px; counter-increment: step; }
.svc__steps li::before { content: counter(step); position: absolute; left: 0; top: -3px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 13px; font-weight: 700; color: var(--ink); }
.svc__steps li::after { content: ""; position: absolute; left: 15.25px; top: 34px; bottom: 4px; width: 1.5px; background: var(--line); }
.svc__steps li:last-child { padding-bottom: 0; }
.svc__steps li:last-child::after { display: none; }
.svc__steps b { font-size: 17px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.svc__steps span { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.svc__get { display: grid; gap: var(--space-12); margin-top: var(--space-8); padding: var(--space-20) var(--space-24); border-radius: var(--radius-md); background: var(--accent-tint); }
.svc__get .kz-label { color: var(--accent-text); }
.svc__get ul { display: grid; gap: 10px; }
.svc__get li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.45; font-weight: 550; color: var(--ink); }
.svc__get .kz-icon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--accent-text); stroke-width: 2.25; }
@media (max-width: 900px) {
.svc__grid { grid-template-columns: minmax(0, 1fr); }
.svc__facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 480px) { .svc__head { flex-wrap: wrap; align-items: center; } .svc__get { padding: var(--space-16); } }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.path { display: grid; gap: var(--space-32); align-content: space-between; min-height: 220px; padding: var(--space-32); text-decoration: none; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.path:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); }
.path__q { font-size: clamp(22px, 1rem + 1vw, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.path__a { display: flex; align-items: center; gap: 12px; padding-top: var(--space-16); border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 650; color: var(--ink); }
.path__a .kz-icon { width: 18px; height: 18px; margin-left: auto; transition: transform var(--duration-fast) var(--ease-out); }
.path:hover .path__a .kz-icon { transform: translateX(3px); color: var(--accent-text); }
.path__num { font-size: 13px; font-weight: 700; color: var(--ink-quiet); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .paths { grid-template-columns: minmax(0, 1fr); } .path { min-height: 0; padding: var(--space-24); } }
.cta-panel { display: grid; justify-items: center; gap: var(--space-24); text-align: center; }
.cta-panel .kz-lead { max-width: 36em; }
.cta-panel__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-16) var(--space-32); }
.founder-xl { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 72px); padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-xl); }
.founder-xl__side { display: grid; gap: var(--space-20); align-content: start; justify-items: start; }
.founder-xl__photo { width: 100%; max-width: 280px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -20px rgba(11,20,36,.35); }
.founder-xl__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-xl__text { display: grid; gap: var(--space-24); align-content: center; }
.founder-xl__quote { font-size: clamp(24px, 1rem + 1.3vw, 34px); line-height: 1.22; font-weight: 650; letter-spacing: -.018em; color: var(--ink); text-wrap: pretty; }
.founder-xl__bio { display: grid; gap: var(--space-16); padding-top: var(--space-24); border-top: 1px solid var(--line); }
.founder-xl__bio p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
@media (max-width: 860px) { .founder-xl { grid-template-columns: minmax(0, 1fr); } .founder-xl__photo { max-width: 200px; } }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
.figure { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-28); }
.figure__n { font-size: clamp(44px, 1.6rem + 2.2vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; background-image: linear-gradient(180deg, var(--ink) 30%, var(--ink-quiet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.figure__t { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 900px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .figures { grid-template-columns: minmax(0, 1fr); } }
.logos--page { margin: var(--space-64) 0 0; }
.beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.belief { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-32) var(--space-40) var(--space-40) 0; border-bottom: 1px solid var(--line); }
.belief:nth-child(2n) { padding-left: var(--space-40); box-shadow: inset 1px 0 0 var(--line); }
.belief__n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.belief h3 { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.012em; color: var(--ink); }
.belief p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 760px) {
.beliefs { grid-template-columns: minmax(0, 1fr); }
.belief, .belief:nth-child(2n) { padding: var(--space-24) 0; box-shadow: none; }
}
.navdrop__panel--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 680px; }
.navdrop__col { display: grid; gap: 2px; align-content: start; padding: 4px; border-radius: 20px; }
.navdrop__col + .navdrop__col { box-shadow: inset 1px 0 0 var(--line); padding-left: 10px; }
.kz-nav__links .navdrop__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; height: auto; margin-bottom: 4px; padding: 12px; border-radius: 16px; text-decoration: none; }
.navdrop__head b { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.navdrop__head small { grid-column: 1; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.navdrop__head .kz-icon { grid-row: 1 / 3; grid-column: 2; width: 16px; height: 16px; color: var(--ink-3); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.kz-nav__links .navdrop__head:hover { background: var(--paper-sunken); }
.navdrop__head:hover .kz-icon { transform: translateX(3px); color: var(--ink); }
.mmenu > a.mmenu__head { padding-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.mmenu > a.mmenu__head:first-child { padding-top: 4px; }
.pillar__label { display: inline-flex; align-items: center; gap: 10px; }
.pillar__label span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: 0; }
.skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.skill { display: grid; gap: var(--space-16); align-content: start; padding: clamp(24px, 3vw, 40px); }
.skill__icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: var(--space-8); border-radius: 16px; background: var(--paper-sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.skill__icon .kz-icon { width: 24px; height: 24px; }
.skill__text { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
@media (max-width: 860px) { .skills { grid-template-columns: minmax(0, 1fr); } }
.svc__parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.svc__parts li { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--paper-sunken); }
.svc__parts b { font-size: 15px; font-weight: 650; color: var(--ink); }
.svc__parts span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.hero .kz-h--hero { max-width: none; font-size: clamp(36px, 1.3rem + 4.6vw, 88px); text-wrap: balance; }
.hero .kz-h--hero .kz-quiet { display: block; }
:root { --ease-soft: cubic-bezier(.22, 1, .36, 1); }
:root[data-theme="light"] {
--shadow-card: 0 1px 2px rgba(11, 20, 36, .035);
--shadow-float: 0 1px 2px rgba(11, 20, 36, .03), 0 12px 32px -16px rgba(11, 20, 36, .14);
}
.kz-glow::after, .jcard__stage::after { display: none; }
.kz-glow::before { opacity: .45; filter: blur(60px); }
.jcard__stage::before, .stake::before { opacity: .55; }
.kz-h--hero { font-weight: 700; letter-spacing: -.035em; }
.kz-h--1, .kz-h--display { font-weight: 650; }
.kz-h--2 { font-weight: 650; }
.statement__text { font-weight: 650; letter-spacing: -.03em; }
.jcard__num, .svc__id .jcard__num, .figure__n { font-weight: 600; }
.kz-label { font-weight: 600; letter-spacing: .12em; color: var(--ink-3); }
.jcard__rows dt, .board__label, .grow__label, .jvis__tag, .mind__facts span, .svc__facts dt { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.jcard__rows > div { padding: 12px 0; }
.jcard__rows dd { font-size: 16px; }
.kz-card { box-shadow: inset 0 0 0 1px var(--line); }
.jcard__inner { box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px -36px rgba(11, 20, 36, .28); }
.jcard__stage { background: var(--paper-sunken); }
.svc { box-shadow: inset 0 0 0 1px var(--line); }
.svc__get { background: transparent; padding: 0; border-top: 1px solid var(--line); padding-top: var(--space-20); border-radius: 0; }
.svc__get .kz-label { color: var(--ink-3); }
.kz-nav__pill { background: color-mix(in srgb, var(--paper) 78%, transparent); box-shadow: inset 0 0 0 1px var(--line-strong); }
.kz-btn--ghost { box-shadow: inset 0 0 0 1px var(--line-strong); }
.panel-soft { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 5vw, 64px); border-radius: var(--radius-xl); background: var(--accent-tint); }
.panel-soft::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -50%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 60%, transparent), transparent); filter: blur(40px); animation: kz-drift 16s var(--ease-in-out) infinite alternate; }
.panel-soft .contact__list li { color: var(--ink-2); }
.panel-soft .contact__list .kz-icon { color: var(--accent-text); }
.hero .kz-hero-center > *, .hero .logos { animation: rise-in 1000ms var(--ease-soft) both; }
.hero .kz-hero-center > :nth-child(2) { animation-delay: 100ms; }
.hero .kz-hero-center > :nth-child(3) { animation-delay: 200ms; }
.hero .kz-hero-center > :nth-child(4) { animation-delay: 300ms; }
.hero .logos { animation-delay: 460ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }
.js .reveal.is-armed { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft); transition-delay: var(--reveal-delay, 0ms); }
.js .reveal.is-armed.is-in { opacity: 1; transform: none; }
.js .is-armed .reveal-title { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path 1000ms var(--ease-soft) 80ms, transform 1000ms var(--ease-soft) 80ms; }
.js .is-armed.is-in .reveal-title { clip-path: inset(-12% -2% -12% -2%); transform: none; }
.js .stagger.is-armed > * { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-soft), transform 800ms var(--ease-soft); }
.js .stagger.is-armed.is-in > * { opacity: 1; transform: none; }
.js .stagger.is-armed > :nth-child(2) { transition-delay: 90ms; } .js .stagger.is-armed > :nth-child(3) { transition-delay: 180ms; }
.js .stagger.is-armed > :nth-child(4) { transition-delay: 270ms; } .js .stagger.is-armed > :nth-child(5) { transition-delay: 360ms; }
.js .stagger.is-armed > :nth-child(6) { transition-delay: 450ms; }
.sector, .skill, .path, .figure { transition: transform 500ms var(--ease-soft), box-shadow 500ms var(--ease-soft); }
.sector:hover, .skill:hover, .figure:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -24px rgba(11, 20, 36, .25); }
.sector__icon, .skill__icon { transition: background-color 400ms var(--ease-soft), color 400ms var(--ease-soft), transform 500ms var(--ease-soft); }
.sector:hover .sector__icon, .skill:hover .skill__icon { background: var(--ink); color: var(--paper); transform: rotate(-6deg); }
.kz-btn { transition: transform 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft), background-color 300ms var(--ease-soft); }
@media (prefers-reduced-motion: reduce) {
.js .reveal.is-armed, .js .stagger.is-armed > *, .js .is-armed .reveal-title { opacity: 1; transform: none; clip-path: none; transition: none; }
}
.site-nav .kz-nav {
height: 64px; padding: 6px 6px 6px 8px; border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--paper-raised) 80%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
box-shadow: inset 0 0 0 1px var(--line-strong), 0 10px 30px -18px rgba(11, 20, 36, .22);
}
.site-nav .kz-nav__pill { height: 52px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-nav .kz-nav__brand { padding: 0 14px 0 12px; }
.site-nav .nav-end .nav-cta { height: 52px; }
.site-nav .nav-burger:hover { background: var(--paper-sunken); }
.mmenu { top: calc(env(safe-area-inset-top, 0px) + 12px + 64px + 10px); }
@media (max-width: 480px) { .site-nav .kz-nav__brand { width: auto; padding: 0 10px; } }
.kz-btn--primary { background: var(--accent); color: var(--on-accent); }
.kz-btn--primary .kz-btn__arrow { background: var(--on-accent); color: var(--accent); }
.kz-btn--primary:hover { background: var(--accent-strong); }
.kz-btn--primary:hover .kz-btn__arrow { background: var(--on-accent); color: var(--accent-strong); }
.sector__icon, .skill__icon, .stake__icon, .navdrop__num { background: var(--accent-tint); color: var(--accent-text); box-shadow: none; }
.navdrop__num .kz-icon { color: var(--accent-text); }
.stake--grow .stake__icon { background: var(--accent); color: var(--on-accent); }
.sector:hover .sector__icon, .skill:hover .skill__icon { background: var(--accent); color: var(--on-accent); }
.kz-nav__links .navdrop__list a:hover .navdrop__num { background: var(--accent); color: var(--on-accent); }
.pillar__label span { background: var(--accent); color: var(--on-accent); }
.journey__step.is-active { background: var(--accent); color: var(--on-accent); }
.journey__step.is-active b { color: color-mix(in srgb, var(--on-accent) 70%, transparent); }
.jcard__stake, .svc__head .kz-chip { background: var(--accent-tint); color: var(--accent-text); box-shadow: none; }
.belief__n, .svc-index__num { color: var(--accent-text); }
.svc__steps li::before { background: var(--accent-tint); color: var(--accent-text); box-shadow: none; }
.svc__get .kz-icon, .result__list .kz-icon { color: var(--accent-text); }
@media (max-width: 380px) {
.site-nav .kz-nav { padding: 6px 4px; }
.site-nav .kz-nav__brand { padding: 0 6px; }
.site-nav .nav-end { gap: 4px; }
.site-nav .nav-end .nav-cta { padding: 0 14px; font-size: 13px; }
}
.viz { width: min(100%, 460px); display: grid; gap: 14px; justify-items: center; transform: translateY(calc((1 - var(--e, 1)) * 40px)); }
.viz__card { width: 100%; padding: 18px 16px; border-radius: 22px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -28px rgba(11, 20, 36, .3); }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.viz__chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 4px; border-radius: var(--radius-pill); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.viz__avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--halo) 0%, var(--accent) 62%, var(--accent-strong) 100%); color: var(--on-accent); font-size: 12px; font-weight: 700; }
.viz__legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.viz__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.map__line { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.map__flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 10; opacity: calc(var(--e, 1) * .7); animation: viz-flow 1.6s linear infinite; }
.map__node { fill: var(--paper-raised); stroke: var(--line-control); stroke-width: 1.75; }
.map__node--on { fill: var(--accent); stroke: none; }
.map__node--two { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.75; }
.map__ring { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: viz-pulse 2.4s var(--ease-out) infinite; }
.map__label { font-size: 12.5px; font-weight: 600; fill: var(--ink-3); text-anchor: middle; }
.map__label--on { fill: var(--ink); font-weight: 700; }
.map__badge rect { fill: var(--accent); }
.map__badge text { font-size: 13px; font-weight: 700; fill: var(--on-accent); text-anchor: middle; }
.map__badge--two rect { fill: var(--accent-tint); }
.map__badge--two text { fill: var(--accent-text); font-size: 12px; }
.map__badge { opacity: var(--e, 1); transform: translateY(calc((1 - var(--e, 1)) * 10px)); }
.gain { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 22px; padding: 22px 24px; }
.gain__ring { width: 150px; transform: rotate(-90deg); }
.gain__track { fill: none; stroke: var(--paper-sunken); stroke-width: 12; }
.gain__arc { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 351.86; stroke-dashoffset: calc(351.86 - 242.8 * var(--e, 1)); }
.gain__center { position: absolute; left: 24px; top: 50%; width: 150px; transform: translateY(-50%); display: grid; justify-items: center; }
.gain__center b { font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.gain__center span { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.gain__rows { display: grid; gap: 10px; }
.gain__rows p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.gain__rows p:last-child { border-bottom: 0; padding-bottom: 0; }
.gain__rows b { font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gain__rows .is-on b { color: var(--accent-text); }
.viz__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.viz__tools li { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 10px; border-radius: var(--radius-pill); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.viz__tools .kz-icon { width: 16px; height: 16px; color: var(--accent-text); }
.net__line { fill: none; stroke: var(--line-strong); stroke-width: 1.75; }
.net__flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 9; opacity: calc(var(--e, 1) * .75); animation: viz-flow 1.8s linear infinite; }
.net__flow--out { animation-delay: -.9s; }
.net__pill rect { fill: var(--paper-sunken); }
.net__pill text { font-size: 12.5px; font-weight: 600; fill: var(--ink-2); text-anchor: middle; }
.net__pill--out rect { fill: var(--accent-tint); }
.net__pill--out text { fill: var(--accent-text); font-weight: 700; }
.net__halo { fill: color-mix(in srgb, var(--accent) 10%, transparent); transform-box: fill-box; transform-origin: center; animation: viz-breathe 3.2s var(--ease-in-out) infinite; }
.net__core-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .45; }
.net__core rect { fill: #14161C; }
.net__core .net__bar { fill: #FFFFFF; }
.net__core .net__bar--mid { fill: var(--accent); }
@keyframes viz-flow { to { stroke-dashoffset: -24; } }
@keyframes viz-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes viz-breathe { 50% { transform: scale(1.12); } }
@media (max-width: 480px) {
.gain { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 20px; }
.gain__center { left: 50%; top: 20px; transform: translateX(-50%); height: 150px; align-content: center; }
.gain__rows { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .map__flow, .net__flow, .map__ring, .net__halo { animation: none; } .viz { transform: none; } }
.beliefs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.belief-group { display: grid; gap: var(--space-24); align-content: start; padding: clamp(24px, 3.5vw, 44px); border-radius: var(--radius-xl); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.belief-group--grow { background: var(--accent-tint); box-shadow: none; }
.belief-group__head { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 650; color: var(--ink); }
.belief-group__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--accent-tint); color: var(--accent-text); }
.belief-group--grow .belief-group__icon { background: var(--accent); color: var(--on-accent); }
.belief-list { display: grid; gap: 0; counter-reset: belief; }
.belief-list li { display: grid; gap: 8px; padding: var(--space-20) 0; border-top: 1px solid var(--line); counter-increment: belief; }
.belief-list li:last-child { padding-bottom: 0; }
.belief-list h3 { display: flex; gap: 12px; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.012em; color: var(--ink); }
.belief-list h3::before { content: "0" counter(belief); flex: none; padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.belief-list p { padding-left: 30px; font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.belief-quote { margin: var(--space-48) auto 0; max-width: 860px; text-align: center; }
.belief-quote p { font-size: clamp(22px, 1rem + 1.2vw, 32px); line-height: 1.3; font-weight: 600; letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
.belief-quote footer { margin-top: var(--space-16); font-size: 14px; font-weight: 600; color: var(--ink-3); }
@media (max-width: 860px) { .beliefs-duo { grid-template-columns: minmax(0, 1fr); } .belief-list p { padding-left: 0; } }
.hero-pill {
display: inline-flex; align-items: center; height: 32px; padding: 0 16px; margin-bottom: -4px; border-radius: var(--radius-pill);
font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
background: color-mix(in srgb, var(--paper-raised) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(11, 20, 36, .04), 0 6px 18px -10px rgba(11, 20, 36, .12);
}
.hero::before { display: none; }
.hero-halo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in srgb, var(--halo) 34%, transparent), transparent 75%); }
.hero-halo::before {
content: ""; position: absolute; left: -30%; right: -30%; bottom: calc(var(--logos-band) - 1220px); height: 1300px; border-radius: 50%;
background: linear-gradient(var(--paper-raised), var(--paper) 120px);
box-shadow: 0 -1px 0 color-mix(in srgb, var(--halo) 80%, transparent), 0 -30px 90px -10px color-mix(in srgb, var(--halo) 70%, transparent);
}
@media (max-width: 760px) { .hero-halo::before { left: -160%; right: -160%; } }
.kz-nav__brand .brand-logo { width: 134px; height: 36px; color: var(--ink); }
.kz-nav__brand .brand-icon { display: none; width: 38px; height: 38px; }
@media (min-width: 481px) { .site-nav .kz-nav__brand { padding: 0 18px 0 14px; } }
@media (max-width: 480px) {
.site-nav .kz-nav__brand .brand-logo { display: none; }
.site-nav .kz-nav__brand .brand-icon { display: block; }
}
.footer__logo { display: inline-flex; color: var(--ink); }
.footer__logo .brand-logo { width: 119px; height: 32px; }
.footer__giant { gap: .2em; align-items: center; }
.footer__giant .footer__giant-mark { width: .7em; height: .583em; fill: currentColor; }
.footer__giant .footer__giant-word { width: 2.27em; height: .7em; }
.app-bar { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; padding: 0 4px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1; color: var(--ink-3); }
.app-bar .brand-icon { width: 20px; height: 20px; flex: none; }
.app-bar b { font-weight: 650; color: var(--ink); }
.app-bar span::before { content: "·"; margin-right: 8px; color: var(--ink-quiet); }
.viz__card .gain { padding: 6px 8px 2px; }
.viz__card .gain__center { left: 8px; }
.viz .gain__ring { width: 150px; height: 150px; }
@media (max-width: 480px) { .viz__card .gain { padding: 6px 0 0; } .viz__card .gain__center { left: 50%; top: 6px; } }
.kz-compare__col--on .brand-icon { width: 18px; height: 18px; }
.contact--cal { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); align-items: start; }
.contact__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-24) var(--space-48); align-items: end; }
@media (max-width: 900px) { .contact__head { grid-template-columns: minmax(0, 1fr); } }
.cal-box { position: relative; width: 100%; min-height: 560px; border-radius: var(--radius-lg); background: var(--paper-raised); overflow: hidden; text-align: left; box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px -30px color-mix(in srgb, var(--accent) 45%, transparent); }
.cal-box iframe { display: block; }
.cal-box__wait { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-24); font-size: 15px; color: var(--ink-3); pointer-events: none; }
.cal-box.is-ready { min-height: 0; }
.cal-box.is-ready .cal-box__wait { display: none; }
.cal-box__fallback { display: none; }
.cal-box.is-failed { min-height: 0; }
.cal-box.is-failed .cal-box__wait, .cal-box.is-failed iframe, .cal-box.is-failed cal-inline { display: none; }
.cal-box.is-failed .cal-box__fallback { display: grid; justify-items: center; gap: var(--space-16); padding: clamp(32px, 5vw, 56px) var(--space-24); text-align: center; }
.cal-box__fb-title { font-size: clamp(22px, 1rem + .8vw, 28px); line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.cal-box__fb-text { max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cal-box.is-failed + .cal-alt { display: none; }
.cal-alt { font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.cal-alt a { color: var(--ink-2); font-weight: 600; text-underline-offset: 3px; }
.cta-panel .cal-box { justify-self: stretch; margin-top: var(--space-8); }
@media (max-width: 760px) { .cal-box, .cta-panel .cal-box { width: calc(100% + 24px); margin-inline: -12px; min-height: 640px; border-radius: var(--radius-md); } }
.ai-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-tool { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 11px; border-radius: var(--radius-pill); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 14px; font-weight: 600; line-height: 1; color: var(--ink-2); white-space: nowrap; transition: transform 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft); }
.ai-tool:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-control), 0 10px 22px -16px rgba(11, 20, 36, .35); }
.ai-tool__logo { width: 20px; height: 20px; flex: none; color: var(--ink); }
.skill__tools { display: grid; gap: 12px; margin-top: auto; padding-top: var(--space-20); border-top: 1px solid var(--line); }
.skill__tools-label { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.skill__tools .ai-tool { background: var(--paper); }
.ai-tools { display: grid; grid-template-columns: repeat(3, max-content); }
@media (max-width: 520px) { .ai-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-tool { padding-right: 10px; } }
.svc__facts dd .ai-tools { display: flex; flex-wrap: wrap; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .ai-tool { transition: none; } .ai-tool:hover { transform: none; } }
.skill__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.skill__meta li { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--accent-tint); font-size: 13px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.offer__steps { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--space-12); }
.offer__steps--4 { --cols: 4; }
.offer__steps li { display: grid; align-content: start; gap: 10px; padding: 22px; border-radius: var(--radius-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.offer__n { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; background: var(--accent); font-size: 14px; font-weight: 700; color: var(--on-accent); }
.offer__steps b { font-size: 17px; line-height: 1.3; font-weight: 650; color: var(--ink); text-wrap: balance; }
.offer__steps p { font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.offer__steps--timeline li { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.offer__steps--timeline .offer__n { grid-row: 1; grid-column: 1; margin-bottom: 0; }
.offer__steps--timeline .offer__when { grid-row: 1; grid-column: 2; }
.offer__steps--timeline b, .offer__steps--timeline p { grid-column: 1 / -1; }
.offer__when { justify-self: start; align-self: center; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--radius-pill); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.offer__get { display: grid; gap: var(--space-16); align-content: start; }
.offer__get ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; }
.offer__get li { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; font-weight: 550; color: var(--ink); }
.offer__get .kz-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); stroke-width: 2.25; }
.offer__foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.offer__foot .offer__get { padding: 24px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); }
.offer__foot .offer__get ul { grid-template-columns: minmax(0, 1fr); }
.offer__tools { display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: var(--radius-lg); background: var(--paper); }
.offer__tools-text { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1000px) { .offer__steps--4 { --cols: 2; } }
@media (max-width: 860px) {
.offer__foot { grid-template-columns: minmax(0, 1fr); }
.offer__steps { --cols: 1; }
.offer__steps--4 { --cols: 2; }
}
@media (max-width: 600px) {
.offer__steps--4 { --cols: 1; }
.offer__foot .offer__get, .offer__tools { padding: 20px; }
}
.prod-hero { overflow: hidden; padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-64)); }
.prod-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-48) clamp(40px, 6vw, 88px); align-items: start; }
.prod-hero__text { display: grid; gap: var(--space-24); justify-items: start; padding-top: var(--space-16); animation: page-rise 900ms var(--ease-out) both; }
.prod-hero__back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; }
.prod-hero__back::before { content: "←"; letter-spacing: 0; transition: transform 300ms var(--ease-soft); }
.prod-hero__back:hover { color: var(--ink); }
.prod-hero__back:hover::before { transform: translateX(-3px); }
.prod-hero__title { font-size: clamp(40px, 1.3rem + 3.4vw, 72px); text-wrap: balance; }
.prod-hero__title .kz-quiet { display: block; }
.prod-hero__lead { max-width: 34em; font-size: clamp(18px, 1rem + .3vw, 20px); line-height: 1.5; font-weight: 600; color: var(--ink); text-wrap: pretty; }
.prod-hero__intro { margin-bottom: -8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.prod-hero__list { display: grid; gap: 10px; }
.prod-hero__list li { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.prod-hero__list .kz-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); stroke-width: 2.25; }
.prod-hero .kz-hero__actions { margin-top: var(--space-8); }
.prod-card { display: grid; gap: var(--space-20); padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-xl); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -48px color-mix(in srgb, var(--accent) 55%, transparent); animation: page-rise 900ms var(--ease-out) 150ms both; }
.prod-card__name { font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.prod-card__price { margin-top: -8px; font-size: 16px; color: var(--ink-2); }
.prod-card__price b { margin-right: 4px; font-size: clamp(26px, 1.2rem + .8vw, 32px); font-weight: 650; letter-spacing: -.02em; color: var(--accent-text); }
.prod-card__proof { display: flex; align-items: center; gap: 12px; padding-bottom: var(--space-20); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.prod-card__proof img { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; }
.prod-card__stat { font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.prod-card__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20) var(--space-24); margin: 0; }
.prod-card__facts .is-wide { grid-column: 1 / -1; }
.prod-card__facts dt { margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.prod-card__facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
@media (max-width: 900px) { .prod-hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .prod-hero { padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-32)); } }
@media (max-width: 420px) { .prod-card__facts { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .prod-hero__text, .prod-card { animation: none; } }
.prod-section .offer__steps { margin-bottom: var(--space-24); }
.prod-get { padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.prod-get ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .prod-get ul { grid-template-columns: minmax(0, 1fr); } }
.prod-foot .offer__get { background: var(--paper-raised); }
.prod-foot .offer__tools { background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.prod-section .offer__steps li { background: var(--paper-raised); }
.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: clamp(24px, 3.5vw, 44px); border-radius: var(--radius-xl); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: transform 500ms var(--ease-soft), box-shadow 500ms var(--ease-soft); }
.hub-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 50px -30px rgba(11, 20, 36, .3); }
.hub-card__icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: var(--space-8); border-radius: 16px; background: var(--accent-tint); color: var(--accent-text); }
.hub-card__icon .kz-icon { width: 24px; height: 24px; }
.hub-card .kz-label { margin-bottom: -6px; }
.hub-card__text { font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hub-card .ai-tools .ai-tool { background: var(--paper); }
.hub-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--space-16); border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 650; color: var(--ink); }
.hub-card__go .kz-icon { width: 18px; height: 18px; transition: transform 300ms var(--ease-soft); }
.hub-card:hover .hub-card__go { color: var(--accent-text); }
.hub-card:hover .hub-card__go .kz-icon { transform: translateX(3px); }
@media (max-width: 860px) { .hub { grid-template-columns: minmax(0, 1fr); } }
.skill__more { justify-self: start; margin-top: var(--space-4); font-size: 15px; }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.post-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-card { display: flex; flex-direction: column; gap: var(--space-16); padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-xl); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: transform 500ms var(--ease-soft), box-shadow 500ms var(--ease-soft); }
.post-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 50px -30px rgba(11, 20, 36, .3); }
.post-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.post-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--radius-pill); background: var(--accent-tint); font-size: 13px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.post-tag .kz-icon { width: 15px; height: 15px; }
.post-card__title { font-size: clamp(21px, 1rem + .7vw, 26px); line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.post-card__text { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.post-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: var(--space-16); border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.post-card__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink); }
.post-card__go .kz-icon { width: 17px; height: 17px; transition: transform 300ms var(--ease-soft); }
.post-card:hover .post-card__go { color: var(--accent-text); }
.post-card:hover .post-card__go .kz-icon { transform: translateX(3px); }
.post-card--small { padding: 24px; }
.post-card--small .post-card__title { font-size: 19px; }
.post-card--small .post-card__text { display: none; }
.blog__notice { margin-bottom: var(--space-24); }
@media (max-width: 960px) { .post-grid--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .post-grid { grid-template-columns: minmax(0, 1fr); } }
.article-hero { overflow: hidden; padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-64)); }
.article__wrap { max-width: 800px; }
.article-hero .article__wrap { display: grid; gap: var(--space-20); justify-items: start; animation: page-rise 900ms var(--ease-out) both; }
.article__title { font-size: clamp(36px, 1.2rem + 3vw, 60px); text-wrap: balance; }
.article__title .kz-quiet { display: block; }
.article__lead { font-size: clamp(18px, 1rem + .35vw, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.article__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-3); }
.article__meta span + span::before { content: "·"; margin-right: 18px; color: var(--ink-quiet); }
.article__body { display: grid; gap: var(--space-20); padding-top: var(--space-48); }
.article__body > p:not(.article__notice) { font-size: 18px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.article__h2 { margin-top: var(--space-24); font-size: clamp(24px, 1rem + 1vw, 30px); line-height: 1.2; font-weight: 650; letter-spacing: -.016em; color: var(--ink); }
.article__list { display: grid; gap: 10px; }
.article__list li { display: flex; gap: 10px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.article__list .kz-icon { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--accent-text); stroke-width: 2.25; }
.article__notice { padding: 14px 18px; border-radius: var(--radius-md); background: var(--paper-sunken); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.article__notice strong { color: var(--ink); }
.article__brief { padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--accent-tint); }
.article__brief .kz-label { margin-bottom: var(--space-12); color: var(--accent-text); }
.article__brief dl { display: grid; margin: 0; }
.article__brief dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--space-16); padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); }
.article__brief dl > div:first-child { border-top: 0; padding-top: 0; }
.article__brief dt { font-size: 14px; font-weight: 650; color: var(--accent-text); }
.article__brief dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.article__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); margin-block: var(--space-16); }
.article__figure { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.article__figure b { font-size: clamp(28px, 1.2rem + 1vw, 36px); line-height: 1; font-weight: 650; letter-spacing: -.03em; color: var(--accent-text); white-space: nowrap; }
.article__figure span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.article__faq { display: grid; gap: var(--space-16); }
@media (max-width: 640px) {
.article__figures { grid-template-columns: minmax(0, 1fr); }
.article__brief dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.article__body > p:not(.article__notice) { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .article-hero .article__wrap { animation: none; } .post-card, .post-card__go .kz-icon { transition: none; } }
.kz-h--hero { font-weight: 800; letter-spacing: -.038em; }
.kz-h--display, .kz-h--1 { font-weight: 750; letter-spacing: -.03em; }
.kz-h--2 { font-weight: 700; letter-spacing: -.02em; }
.post-tag--soft { padding: 0 12px; background: var(--paper-sunken); color: var(--ink-2); }
.guide-hero { overflow: hidden; padding: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 24px + var(--space-64)) 0 var(--space-48); }
.guide-hero__wrap { max-width: 1044px; display: grid; gap: var(--space-20); justify-items: start; animation: page-rise 900ms var(--ease-out) both; }
.guide-hero__title { font-size: clamp(40px, 1.3rem + 4vw, 76px); max-width: 15ch; text-wrap: balance; }
.guide-hero__title .kz-quiet { display: block; }
.guide-hero__lead { max-width: 40em; font-size: clamp(18px, 1rem + .45vw, 22px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.guide-hero__proofs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); width: 100%; margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.guide-hero__proofs li { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.guide-hero__proofs b { font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--accent-text); }
.guide-hero__proofs span { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.guide__layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: var(--space-64); justify-content: center; align-items: start; padding-bottom: var(--space-48); }
.guide-toc { position: sticky; top: calc(var(--layout-nav) + 40px); display: grid; gap: var(--space-12); }
.guide-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.guide-toc li { counter-increment: toc; }
.guide-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; padding: 7px 10px; border-radius: 10px; font-size: 14px; line-height: 1.3; color: var(--ink-3); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.guide-toc a::before { content: counter(toc, decimal-leading-zero); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-quiet); }
.guide-toc a:hover { color: var(--ink); background: var(--paper-sunken); }
.guide-toc a.is-on { color: var(--ink); font-weight: 650; background: var(--accent-tint); }
.guide-toc a.is-on::before { color: var(--accent-text); }
.guide-toc .guide-toc__cta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-8); padding: 12px 14px; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 650; }
.guide-toc .guide-toc__cta::before { content: none; }
.guide-toc .guide-toc__cta .kz-icon { width: 16px; height: 16px; }
.guide__body { display: grid; gap: var(--space-64); min-width: 0; }
.g-chapter { display: grid; gap: var(--space-20); scroll-margin-top: calc(var(--layout-nav) + 32px); }
.g-chapter > *, .g-anatomy > *, .g-step-body > * { min-width: 0; }
.guide-toc { min-width: 0; }
.g-chapter > p, .g-chapter li, .g-chapter td { text-wrap: pretty; }
.g-chapter > p { font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.g-chapter > p b { color: var(--ink); font-weight: 700; }
.g-chapter sup { font-size: .62em; font-weight: 700; line-height: 0; margin-left: 1px; }
.g-chapter sup a { color: var(--accent-text); text-decoration: none; }
.g-chapter code { font: 600 .9em ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: 1px 6px; border-radius: 6px; background: var(--paper-sunken); color: var(--ink); }
.g-kicker { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.g-kicker span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 15px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.g-h2 { margin: 0; font-size: clamp(28px, 1rem + 1.6vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.g-note { font-size: 14px !important; line-height: 1.55 !important; color: var(--ink-3) !important; }
.g-quote { margin: var(--space-8) 0; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--ink); }
.g-quote p { margin: 0; font-size: clamp(24px, 1rem + 1.4vw, 34px); line-height: 1.2; font-weight: 800; letter-spacing: -.025em; color: var(--paper); text-wrap: balance; }
.g-quote span { color: color-mix(in srgb, var(--paper) 58%, transparent); }
.g-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.g-fit__col { padding: 22px 24px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-fit__col--yes { background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.g-fit__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 750; color: var(--ink); }
.g-fit__title .kz-icon { width: 18px; height: 18px; color: var(--accent-text); }
.g-fit ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.g-fit li { position: relative; padding-left: 18px; }
.g-fit li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-quiet); }
.g-fit__col--yes li::before { background: var(--accent); }
.g-figure { margin: 0; padding: 20px 20px 14px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-rot { display: block; width: 100%; height: auto; }
.g-rot__axis { stroke: var(--line-strong); stroke-width: 1.5; }
.g-rot__curve { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.g-rot__zone { fill: color-mix(in srgb, var(--accent) 25%, transparent); }
.g-rot__zone--bad { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.g-rot__label { font: 600 13px var(--font-sans); fill: var(--ink-3); }
.g-rot__label--strong { fill: var(--ink); font-weight: 700; }
.g-figure figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.g-bricks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
.g-brick { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 18px 18px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-brick b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.g-brick small { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.g-brick p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-brick .g-brick__ex { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--ink-3); font-style: italic; }
.g-brick__num { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 10px; background: var(--paper-sunken); font-size: 13px; font-weight: 800; color: var(--ink-3); }
.g-brick--on { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.g-brick--on .g-brick__num { background: var(--accent); color: #fff; }
.g-table { overflow-x: auto; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.g-table th, .g-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); color: var(--ink-2); }
.g-table thead th { border-top: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-sunken); }
.g-table tbody th { width: 22%; font-weight: 750; color: var(--ink); }
.g-table tr.is-on th, .g-table tr.is-on td { background: var(--accent-tint); }
.g-tree { padding: 24px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-tree__title { margin-bottom: 14px; font-size: 16px; font-weight: 800; color: var(--ink); }
.g-tree ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: q; }
.g-tree li { counter-increment: q; display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--paper-sunken); }
.g-tree li::before { content: counter(q); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 800; }
.g-tree__q { font-size: 15px; font-weight: 650; line-height: 1.4; color: var(--ink); }
.g-tree__a { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.g-tree__a b { color: var(--accent-text); }
.g-anatomy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-20); align-items: start; }
.g-code { margin: 0; border-radius: var(--radius-md); background: #14161C; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(15, 26, 58, .5); }
.g-code figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid #262A33; font: 600 12.5px ui-monospace, "SF Mono", Menlo, monospace; color: #9097A6; }
.g-copy { padding: 7px 12px; border: 0; border-radius: 9px; background: #262A33; color: #E8EAF0; font: 650 12.5px var(--font-sans); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.g-copy:hover { background: var(--accent); }
.g-code pre { margin: 0; padding: 18px; overflow-x: auto; }
.g-code code { display: block; padding: 0; background: none; font: 500 13px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #D9DCE4; white-space: pre-wrap; overflow-wrap: anywhere; }
.g-code .c-meta { color: #6C7383; }
.g-code .c-key { color: #8FA3FF; font-weight: 700; }
.g-code .c-h { color: #FFFFFF; font-weight: 700; }
.g-code .c-file { color: #9FE3C1; }
.g-pin { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-left: 4px; border-radius: 50%; background: var(--accent); color: #fff; font: 800 11px/1 var(--font-sans); vertical-align: 1px; user-select: none; }
.g-pins { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: pin; }
.g-pins li { counter-increment: pin; position: relative; padding: 12px 14px 12px 46px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-pins li::before { content: counter(pin); position: absolute; left: 14px; top: 13px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; }
.g-pins b { color: var(--ink); }
.g-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.g-compare__col { display: grid; gap: 8px; align-content: start; padding: 20px 22px; border-radius: var(--radius-md); }
.g-compare__col--bad { background: var(--paper-sunken); }
.g-compare__col--good { background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.g-compare__label { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.g-compare__col--good .g-compare__label { color: var(--accent-text); }
.g-compare__text { font-size: 16px; line-height: 1.45; font-weight: 650; color: var(--ink); }
.g-compare__col--bad .g-compare__text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.g-compare__why { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.g-files { padding: 18px 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-files__title { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.g-files__tree { margin: 0; overflow-x: auto; font: 500 13.5px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); white-space: pre; }
.g-layers { display: grid; gap: var(--space-12); }
.g-layer { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 6px 24px; align-items: center; padding: 18px 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-layer__head { display: grid; gap: 2px; }
.g-layer__n { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.g-layer__head b { font-size: 16px; font-weight: 750; color: var(--ink); }
.g-layer__bar { height: 12px; border-radius: 999px; background: var(--paper-sunken); overflow: hidden; }
.g-layer__bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--accent); }
.g-layer__bar--open i { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent) 0 10px, transparent 10px 16px); }
.g-layer p { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-layer p b { color: var(--ink); }
.g-scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.g-scale i { height: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), var(--accent)); }
.g-forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.g-form { display: grid; align-content: start; gap: 10px; padding: 22px 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-form--on { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.g-form__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.g-form h3 { margin: 0; line-height: 1.2; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.g-form > p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-form .g-form__when { padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; }
.g-form__when b { color: var(--ink); }
.g-flow { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 12px; background: var(--paper-sunken); }
.g-form--on .g-flow { background: color-mix(in srgb, var(--paper-raised) 70%, transparent); }
.g-flow span { padding: 5px 9px; border-radius: 8px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 650; color: var(--ink); }
.g-flow span.is-out { background: var(--ink); color: var(--paper); box-shadow: none; }
.g-flow i { width: 2px; height: 10px; margin-left: 14px; background: var(--ink-quiet); position: relative; }
.g-flow i::after { content: ""; position: absolute; left: -3px; bottom: -3px; border: 4px solid transparent; border-top-color: var(--ink-quiet); border-bottom: 0; }
.g-flow i.g-flow__loop { width: 26px; height: 14px; margin-left: 8px; background: none; border: 2px solid var(--ink-quiet); border-top: 0; border-radius: 0 0 10px 10px; }
.g-flow i.g-flow__loop::after { content: none; }
.g-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.g-case { display: grid; align-content: start; gap: 10px; padding: 22px 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-case__who { display: grid; font-size: 17px; font-weight: 800; color: var(--ink); }
.g-case__who small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.g-case__big { font-size: 30px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: var(--accent-text); }
.g-case__big span { font-size: .6em; color: var(--ink-3); font-weight: 700; letter-spacing: -.01em; }
.g-case > p:last-child { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.g-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.g-checks li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.g-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 7px; background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B5BFD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.g-checks b { color: var(--ink); }
.g-aside { padding: 22px 24px; border-radius: var(--radius-md); background: var(--paper-sunken); border-left: 4px solid var(--ink); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.g-aside--warn { border-left-color: #E8A33D; background: color-mix(in srgb, #E8A33D 9%, var(--paper-raised)); }
.g-aside--brand { border-left-color: var(--accent); background: var(--accent-tint); }
.g-aside__label { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.g-aside p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.g-quiz { display: grid; gap: 8px; padding: clamp(22px, 3vw, 30px); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -36px rgba(15, 26, 58, .4); }
.g-quiz__title { font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.g-quiz__title--plain { margin-top: var(--space-16); font-size: 19px !important; line-height: 1.3 !important; font-weight: 800; color: var(--ink) !important; }
.g-quiz__hint { margin-bottom: 6px; font-size: 14.5px; color: var(--ink-3); }
.g-quiz label { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; background: var(--paper-sunken); font-size: 15.5px; line-height: 1.45; color: var(--ink); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.g-quiz label:hover { background: color-mix(in srgb, var(--accent) 8%, var(--paper-sunken)); }
.g-quiz input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.g-quiz label:has(input:checked) { background: var(--accent-tint); }
.g-quiz__result { margin-top: 8px; padding: 14px 16px; border-radius: 14px; background: var(--paper-sunken); font-size: 15.5px; font-weight: 650; line-height: 1.45; color: var(--ink-3); }
.g-quiz__result.is-low { background: var(--paper-sunken); color: var(--ink-2); }
.g-quiz__result.is-mid { background: color-mix(in srgb, #E8A33D 14%, var(--paper-raised)); color: var(--ink); }
.g-quiz__result.is-high { background: var(--accent); color: #fff; }
.g-levels { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.g-levels li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-levels__n { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; font-weight: 800; color: var(--accent-text); background: color-mix(in srgb, var(--accent) calc(var(--l, 0) * 1%), var(--paper-sunken)); }
.g-levels li:nth-child(1) .g-levels__n { --l: 4; } .g-levels li:nth-child(2) .g-levels__n { --l: 10; } .g-levels li:nth-child(3) .g-levels__n { --l: 18; }
.g-levels li:nth-child(4) .g-levels__n { --l: 100; color: #fff; } .g-levels li:nth-child(5) .g-levels__n { background: var(--ink); color: var(--paper); }
.g-levels b { display: block; font-size: 16px; font-weight: 750; color: var(--ink); }
.g-levels p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.g-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.g-steps > li { counter-increment: st; position: relative; display: grid; gap: 6px; padding: 0 0 26px 64px; }
.g-steps > li::before { content: counter(st); position: absolute; left: 0; top: -4px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 800; }
.g-steps > li::after { content: ""; position: absolute; left: 20px; top: 44px; bottom: 6px; width: 2px; background: var(--line-strong); }
.g-steps > li:last-child::after { content: none; }
.g-steps > li > b { font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.g-steps > li > p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.g-ways { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.g-ways li { padding: 12px 14px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.g-ways b { color: var(--ink); }
.g-effort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--radius-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.g-effort div { display: grid; gap: 4px; padding: 16px 18px; background: var(--paper-raised); }
.g-effort div + div { border-left: 1px solid var(--line); }
.g-effort div:first-child { background: var(--accent-tint); }
.g-effort b { font-size: 15px; font-weight: 800; color: var(--ink); }
.g-effort span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.g-errors { padding: 24px; border-radius: var(--radius-lg); background: var(--ink); color: var(--paper); }
.g-errors__title { margin-bottom: 14px; font-size: 18px; font-weight: 800; }
.g-errors ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: er; }
.g-errors li { counter-increment: er; position: relative; padding-left: 40px; font-size: 15.5px; line-height: 1.55; color: color-mix(in srgb, var(--paper) 75%, transparent); }
.g-errors li::before { content: counter(er); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--paper) 14%, transparent); font-size: 12.5px; font-weight: 800; color: var(--paper); }
.g-errors b { color: var(--paper); }
.g-plan { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.g-plan li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 14px 16px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.g-plan span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.g-plan b { color: var(--ink); }
.g-plan p { margin: 0; }
.g-final { display: grid; gap: 12px; justify-items: start; padding: clamp(24px, 4vw, 36px); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-tint), var(--paper-raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.g-final > p:not(.kz-label) { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 650; letter-spacing: -.01em; color: var(--ink); max-width: 32em; }
.g-chapter--faq, .g-chapter--sources { gap: var(--space-16); }
.g-sources { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.g-sources li { counter-increment: s; position: relative; padding-left: 32px; font-size: 14px; line-height: 1.55; color: var(--ink-2); scroll-margin-top: calc(var(--layout-nav) + 32px); }
.g-sources li::before { content: counter(s); position: absolute; left: 0; top: 0; min-width: 22px; font-size: 12px; font-weight: 800; color: var(--accent-text); }
.g-sources li:target { background: var(--accent-tint); border-radius: 8px; }
.g-sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
@media (max-width: 1100px) {
.guide__layout { grid-template-columns: minmax(0, 760px); }
.guide-toc { position: static; padding: 18px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.guide-toc ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.g-bricks { grid-template-columns: 1fr 1fr; }
.g-anatomy, .g-forms, .g-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.guide-hero__proofs { grid-template-columns: 1fr 1fr; }
.guide-toc ol, .g-fit, .g-compare, .g-bricks, .g-effort { grid-template-columns: minmax(0, 1fr); }
.g-effort div + div { border-left: 0; border-top: 1px solid var(--line); }
.g-tree li { grid-template-columns: 34px minmax(0, 1fr); }
.g-tree__a { grid-column: 2; }
.g-layer { grid-template-columns: minmax(0, 1fr); }
.g-layer p { grid-column: 1; }
.g-plan li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.g-chapter > p { font-size: 17px; }
.g-steps > li { padding-left: 56px; }
}
@media (prefers-reduced-motion: reduce) { .guide-hero__wrap { animation: none; } }
.nav-cta__short { display: none; }
@media (max-width: 760px) {
.site-nav .nav-end .nav-cta { height: 40px; padding: 0 16px; gap: 0; font-size: 13.5px; }
.site-nav .nav-end .nav-cta .kz-btn__arrow { display: none; }
.nav-cta__long { display: none; }
.nav-cta__short { display: inline; }
.site-nav .nav-end { gap: 6px; }
}
.journey.is-compact { --stick: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 76px); }
.journey.is-compact .jcard__stage { display: none; }
.journey.is-compact .jcard__inner { padding: var(--space-16) var(--space-16) var(--space-20); }
.journey.is-compact .jcard__text { gap: var(--space-12); padding: var(--space-8) var(--space-4) 0; }
.journey.is-compact .jcard__num { font-size: 44px; }
.journey.is-compact .jcard__rows > div:not(.jcard__result) { padding: 9px 0; } 
.journey.is-compact .jcard__rows dd { font-size: 15px; line-height: 1.45; }
.journey.is-compact.is-stacked .journey__rail { top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 22px); margin-bottom: var(--space-20); }
.journey.is-compact.is-stacked .journey__step { height: 32px; padding: 0 10px; font-size: 13px; }
.journey.is-compact.is-stacked .journey__cards { gap: 10vh; padding-bottom: 6vh; }
.journey.is-compact.is-stacked .jcard { top: calc(var(--stick) + var(--i) * 10px); }
.g-h3 { margin: var(--space-8) 0 0; font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.g-chapter > p a, .g-plan p a, .g-aside a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.g-bricks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-bricks--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-bricks--5 .g-brick b { font-size: 17px; }
.g-levels--risk li:nth-child(1) .g-levels__n { background: var(--ink); color: var(--paper); }
.g-levels--risk li:nth-child(2) .g-levels__n { --l: 100; color: #fff; }
.g-levels--risk li:nth-child(3) .g-levels__n { --l: 18; color: var(--accent-text); }
.g-levels--risk li:nth-child(4) .g-levels__n { --l: 4; color: var(--accent-text); }
.g-plan--time li.is-past { background: var(--paper-sunken); box-shadow: none; }
.g-plan--time li.is-past span { color: var(--ink-3); }
.g-plan--time li.is-act { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--line); }
.g-plan--time li.is-act.is-past { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.g-plan--time li.is-act span { color: var(--accent-text); }
.g-checks--stop li::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 13px no-repeat; }
.g-lights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.g-light { display: grid; align-content: start; gap: 6px; padding: 20px 18px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.g-light__tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.g-light__tag::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 18%, transparent); }
.g-light--green { --dot: #2E9E6A; } .g-light--orange { --dot: #E8A33D; } .g-light--red { --dot: #D9483B; }
.g-light b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.g-light p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-light .g-light__rule { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; font-weight: 650; color: var(--ink); }
.g-download { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-tint), var(--paper-raised)); box-shadow: inset 0 0 0 1px var(--line); }
.g-download__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--accent); color: #fff; }
.g-download__icon .kz-icon { width: 26px; height: 26px; }
.g-download__title { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--ink); }
.g-download__text p:last-child { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g-quiz__result ul { margin: 8px 0 0; padding-left: 18px; font-weight: 500; }
.g-quiz__result li { margin-top: 4px; }
.g-quiz__result.is-stop { background: var(--ink); color: var(--paper); }
@media (max-width: 900px) {
.g-bricks--5 { grid-template-columns: 1fr 1fr; }
.g-lights { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.g-bricks--2, .g-bricks--5 { grid-template-columns: minmax(0, 1fr); }
.g-download { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media (max-width: 760px) {
p, dd, li, .kz-lead, .kz-text, .jcard__rows dd, .article__lead, .post-card__text { text-wrap: wrap; }
.site-nav::before {
content: ""; position: absolute; inset: 0 0 auto; height: calc(env(safe-area-inset-top, 0px) + 20px); z-index: -1;
background: linear-gradient(var(--paper) 55%, color-mix(in srgb, var(--paper) 0%, transparent)); pointer-events: none;
}
}
.is-tall-frame .hero .kz-hero-center { min-height: 640px; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.offer__tools .ai-tools { display: flex; flex-wrap: wrap; }
.offer__tools .ai-tool { flex: 1 1 calc((100% - 16px) / 3); justify-content: center; }
@media (max-width: 520px) { .offer__tools .ai-tool { flex-basis: calc((100% - 8px) / 2); } }
.skills-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-24); align-items: center; margin-top: var(--space-16); padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.skills-tools__text { display: grid; gap: 8px; }
.skills-tools__text p:last-child { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.skills-tools .ai-tools { display: flex; flex-wrap: wrap; }
.skills-tools .ai-tool { flex: 1 1 calc((100% - 24px) / 4); justify-content: center; background: var(--paper); }
@media (max-width: 1080px) { .skills-tools { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .skills-tools .ai-tool { flex-basis: calc((100% - 8px) / 2); } }
.footer__legal { display: inline-flex; flex-wrap: wrap; gap: var(--space-16); }
.footer__legal a { color: inherit; }
.footer__legal a:hover { color: var(--ink); }
.legal__list { display: grid; margin: 0; }
.legal__list > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-16); padding: 12px 0; border-top: 1px solid var(--line); }
.legal__list > div:first-child { border-top: 0; }
.legal__list dt { font-size: 15px; font-weight: 650; color: var(--ink); }
.legal__list dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.legal-todo { padding: 1px 6px; border-radius: 6px; background: #FFF4D6; color: #7A5300; font-size: .92em; }
.legal .article__body > p a { text-decoration: underline; }
@media (max-width: 560px) { .legal__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.site-nav { --nav-h: 72px; transition: padding-top 500ms var(--ease-out); }
.site-nav.is-scrolled, .site-nav:has(.nav-burger[aria-expanded="true"]) { --nav-h: 60px; padding-top: calc(env(safe-area-inset-top, 0px) + 10px); }
.site-nav .kz-nav {
height: var(--nav-h); max-width: 1240px; padding: 6px 6px 6px 4px;
background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
transition: max-width 600ms var(--ease-out), height 500ms var(--ease-out), padding 500ms var(--ease-out),
background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.site-nav.is-scrolled .kz-nav, .site-nav:has(.nav-burger[aria-expanded="true"]) .kz-nav {
max-width: 1040px; padding: 5px 5px 5px 8px;
background: color-mix(in srgb, var(--paper-raised) 72%, transparent);
-webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, .7),
0 1px 2px rgba(11, 20, 36, .04), 0 12px 32px -14px rgba(11, 20, 36, .22);
}
.site-nav .kz-nav__pill, .site-nav .nav-end .nav-cta { height: calc(var(--nav-h) - 12px); transition: height 500ms var(--ease-out); }
.site-nav .kz-nav__brand .brand-logo { width: 124px; height: 33px; transition: transform 500ms var(--ease-out); transform-origin: left center; }
.site-nav.is-scrolled .kz-nav__brand .brand-logo { transform: scale(.92); }
.site-nav .kz-nav__links { gap: 4px; }
.site-nav .kz-nav__links > a, .site-nav .navdrop__btn { height: 38px; font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; color: var(--ink-2); }
.site-nav .kz-nav__links > a:hover, .site-nav .navdrop__btn:hover, .site-nav .navdrop__btn[aria-expanded="true"] {
background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink);
}
.site-nav .kz-nav__links > a[aria-current="page"], .site-nav .navdrop__btn[aria-current] { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-text); }
.site-nav .nav-cta { padding-left: 20px; font-size: 14.5px; letter-spacing: -.005em; box-shadow: 0 1px 2px rgba(11, 20, 36, .08), 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.site-nav .nav-cta .kz-btn__arrow .kz-icon { transition: transform 300ms var(--ease-out); }
.site-nav .nav-cta:hover .kz-btn__arrow .kz-icon { transform: translateX(2px); }
.mmenu { top: calc(env(safe-area-inset-top, 0px) + 10px + var(--nav-h) + 10px); }
@media (max-width: 760px) {
.site-nav { --nav-h: 64px; }
.site-nav .nav-end .nav-cta { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.site-nav, .site-nav .kz-nav, .site-nav .kz-nav__pill, .site-nav .nav-cta, .site-nav .kz-nav__brand .brand-logo { transition: none; }
}
.g-levels--reads li:nth-child(1) .g-levels__n { --l: 100; color: #fff; }
.g-levels--reads li:nth-child(2) .g-levels__n { --l: 30; color: var(--accent-text); }
.g-levels--reads li:nth-child(3) .g-levels__n { background: var(--ink); color: var(--paper); }
.g-levels--reads li:nth-child(4) .g-levels__n { background: #2E9E6A; color: #fff; }
.g-cases--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-traj { display: grid; gap: var(--space-12); }
.g-traj[hidden] { display: none; }
.g-traj__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.g-traj__list { display: grid; gap: var(--space-12); }
.g-offer { display: grid; gap: 14px; padding: clamp(18px, 3vw, 24px); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -40px rgba(15, 26, 58, .4); }
.g-offer__head { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 10px; align-items: end; }
.g-offer label > span, .g-offer legend { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ink-3); }
.g-offer input[type="text"], .g-offer input[type="number"], .g-offer select { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--paper-sunken); box-shadow: inset 0 0 0 1px var(--line); font: 600 15px var(--font-sans); color: var(--ink); }
.g-offer input:focus-visible, .g-offer select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.g-offer__name input { font-weight: 750; }
.g-offer__del { height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: none; font: 650 13.5px var(--font-sans); color: var(--ink-3); cursor: pointer; }
.g-offer__del:hover { background: var(--paper-sunken); color: var(--ink); }
.g-offer__qs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.g-offer__anc { margin: 0; padding: 0; border: 0; min-width: 0; }
.g-offer__anc label { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 8px 11px; border-radius: 999px; background: var(--paper-sunken); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.g-offer__anc label > span { display: inline; margin: 0; font-size: 14px; color: inherit; }
.g-offer__anc label:has(input:checked) { background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.g-offer__anc input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.g-offer__read { padding: 13px 15px; border-radius: 14px; background: var(--paper-sunken); font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.g-offer__read b { color: var(--ink); font-weight: 800; }
.g-offer__read.is-defendre { background: var(--accent); color: #fff; }
.g-offer__read.is-defendre b { color: #fff; }
.g-offer__read.is-repenser { background: var(--accent-tint); color: var(--ink-2); }
.g-offer__read.is-automatiser { background: var(--ink); color: color-mix(in srgb, var(--paper) 80%, transparent); }
.g-offer__read.is-automatiser b { color: var(--paper); }
.g-offer__read.is-relais { background: color-mix(in srgb, #2E9E6A 13%, var(--paper-raised)); color: var(--ink-2); }
.g-offer__warn { display: block; margin-top: 6px; font-weight: 700; }
.g-traj__mix { padding: 18px 20px; border-radius: var(--radius-md); background: var(--paper-sunken); font-size: 15px; color: var(--ink-3); }
.g-traj__mix p { margin: 0; }
.g-traj__mix-title { margin-bottom: 10px !important; font-size: 16px; font-weight: 800; color: var(--ink); }
.g-traj__bars { display: grid; gap: 8px; }
.g-traj__row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 14px; font-weight: 650; color: var(--ink); }
.g-traj__row i { height: 12px; border-radius: 999px; background: var(--paper-raised); overflow: hidden; }
.g-traj__row i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--duration-fast) var(--ease-out); }
.g-traj__row.is-repenser i b { background: color-mix(in srgb, var(--accent) 40%, var(--paper-raised)); }
.g-traj__row.is-automatiser i b { background: var(--ink); }
.g-traj__row.is-relais i b { background: #2E9E6A; }
.g-traj__row em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.g-traj__hint { margin-top: 10px !important; font-size: 13.5px; }
[data-traj-copybox][hidden], [data-traj-example-note][hidden] { display: none; }
@media (max-width: 640px) {
.g-cases--2, .g-offer__qs { grid-template-columns: minmax(0, 1fr); }
.g-offer__head { grid-template-columns: minmax(0, 1fr) 110px; }
.g-offer__del { grid-column: 1 / -1; justify-self: start; height: 32px; padding: 0 4px; }
.g-traj__row { grid-template-columns: minmax(0, 1fr) 44px; }
.g-traj__row i { grid-column: 1 / -1; grid-row: 2; }
}
.g-cost-warn { margin-bottom: calc(var(--space-24) * -1); }
.g-table .g-cost-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.g-cost-compare .g-compare__col:first-child { background: var(--paper-sunken); }
.g-final > p a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.g-calc { display: grid; gap: var(--space-12); padding: clamp(18px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -36px rgba(15, 26, 58, .4); }
.g-calc__group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; padding: 18px; border: 0; border-radius: var(--radius-md); background: var(--paper-sunken); min-width: 0; }
.g-calc__group legend { float: left; grid-column: 1 / -1; width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.g-calc__group legend span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--accent); color: #fff; font-size: 13px; }
.g-calc__field { display: grid; gap: 6px; align-content: end; min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--ink-2); }
.g-calc__field--wide { grid-column: 1 / -1; }
.g-calc input, .g-calc select { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 11px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 15px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.g-calc select { padding-right: 8px; text-overflow: ellipsis; }
.g-calc input:focus-visible, .g-calc select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.g-calc__hint { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.g-calc__hint:empty { display: none; }
.g-calc__out { display: grid; gap: 14px; padding: 20px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); }
.g-calc__title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 60%, transparent); }
.g-calc__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.g-calc__kpis div { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--paper) 9%, transparent); }
.g-calc__kpis span { font-size: 12.5px; line-height: 1.35; color: color-mix(in srgb, var(--paper) 70%, transparent); }
.g-calc__kpis b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--paper); }
.g-calc__kpis b.is-pos { color: #8FE3B5; }
.g-calc__kpis b.is-neg { color: #FFB4A8; }
.g-calc__bars { display: grid; gap: 8px; }
.g-calc__bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; color: color-mix(in srgb, var(--paper) 78%, transparent); }
.g-calc__bar i { display: block; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 12%, transparent); position: relative; overflow: hidden; }
.g-calc__bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: inherit; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.g-calc__bar.is-gain i::after { background: var(--accent); }
.g-calc__bar b { font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; }
.g-calc__verdict { margin: 0; font-size: 15.5px; line-height: 1.55; font-weight: 600; color: var(--paper); }
.g-calc__verdict:empty { display: none; }
@media (max-width: 900px) {
.g-calc__kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.g-calc__group { grid-template-columns: minmax(0, 1fr); padding: 14px; }
.g-calc__bar { grid-template-columns: minmax(0, 1fr) auto; }
.g-calc__bar i { grid-column: 1 / -1; grid-row: 2; }
.g-calc__kpis b { font-size: 19px; }
.g-cost-warn { margin-bottom: 0; }
}
.post-card--art { padding-top: 14px; }
.guide-art { position: relative; aspect-ratio: 2 / 1; margin: 0 -10px 4px; border-radius: calc(var(--radius-xl) - 10px); overflow: hidden;
background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--halo) 38%, transparent), transparent 60%), linear-gradient(160deg, var(--accent-tint), var(--paper-sunken)); }
.guide-art svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 600ms var(--ease-soft); }
.post-card--art:hover .guide-art svg { transform: scale(1.035); }
.guide-art--cout, .guide-art--aiact { background: radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--halo) 34%, transparent), transparent 60%), linear-gradient(200deg, var(--accent-tint), var(--paper-sunken)); }
.guide-art--skills { background: radial-gradient(110% 90% at 50% 0%, color-mix(in srgb, var(--halo) 40%, transparent), transparent 62%), linear-gradient(180deg, var(--accent-tint), var(--paper-sunken)); }
.guide-art .ga-paper, .guide-art .ga-paper-f { fill: var(--paper-raised); }
.guide-art .ga-shadow { filter: drop-shadow(0 6px 10px rgba(11, 20, 36, .10)); }
.guide-art .ga-tint, .guide-art .ga-tint-f, .guide-art .ga-tint-f2 { fill: color-mix(in srgb, var(--accent) 16%, var(--paper-raised)); }
.guide-art .ga-halo-f { fill: color-mix(in srgb, var(--accent) 45%, var(--paper-raised)); }
.guide-art .ga-acc-f { fill: var(--accent); }
.guide-art .ga-ink-f { fill: var(--ink); }
.guide-art .ga-grid { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; }
.guide-art .ga-path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.guide-art .ga-chip rect { fill: var(--paper-sunken); } .guide-art .ga-chip rect.on { fill: var(--ink); }
.guide-art .ga-txt text, .guide-art .ga-num text, .guide-art .ga-num-on, .guide-art .ga-sym, .guide-art .ga-small, .guide-art .ga-mono { font-family: var(--font-sans); font-weight: 800; text-anchor: middle; }
.guide-art .ga-txt text { font-size: 11px; fill: var(--ink-3); } .guide-art .ga-txt text.on { fill: var(--paper-raised); }
.guide-art .ga-bar rect { fill: color-mix(in srgb, var(--ink) 14%, var(--paper-raised)); }
.guide-art .ga-eq { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 5; stroke-linecap: round; }
.guide-art .ga-coin circle { fill: var(--paper-raised); stroke: var(--accent); stroke-width: 2; }
.guide-art .ga-sym { font-size: 14px; fill: var(--accent-text); }
.guide-art .ga-num text { font-size: 13px; fill: var(--ink-3); } .guide-art .ga-num text.on, .guide-art .ga-num-on { font-size: 13px; fill: var(--paper-raised); }
.guide-art .ga-text rect { fill: color-mix(in srgb, var(--ink) 12%, var(--paper-raised)); }
.guide-art .ga-green { fill: #2E9E6A; } .guide-art .ga-orange { fill: #E8A33D; } .guide-art .ga-red { fill: #D9483B; }
.guide-art .ga-dl rect { fill: var(--accent); } .guide-art .ga-dl path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.guide-art .ga-tick circle { fill: var(--ink-3); } .guide-art .ga-tick-off { fill: var(--paper-raised); stroke: var(--line-strong); stroke-width: 1.5; }
.guide-art .ga-small { font-size: 14px; fill: var(--ink); }
.guide-art .ga-brick rect { fill: var(--paper-raised); stroke: var(--line-strong); stroke-width: 1.5; }
.guide-art .ga-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 700; fill: var(--ink); }
@media (max-width: 640px) { .guide-art { margin-inline: -6px; } }
@media (prefers-reduced-motion: reduce) { .guide-art svg { transition: none; } .post-card--art:hover .guide-art svg { transform: none; } }
.diag { padding-bottom: 6px; }
.diag__steps { position: relative; display: grid; gap: 2px; margin: 0; padding: 6px 16px 10px; list-style: none; }
.diag__steps::before { content: ""; position: absolute; left: 31px; top: 46px; bottom: 50px; width: 2px; border-radius: 2px;
background: linear-gradient(var(--accent) 0 38%, var(--line-strong) 38% 100%); }
.diag__week { padding: 12px 0 4px 44px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.diag__step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 10px 9px 0; border-radius: 14px; }
.diag__step b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; color: var(--ink); }
.diag__step small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.diag__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.diag__dot .kz-icon { width: 16px; height: 16px; stroke-width: 2.25; }
.diag__step.is-done .diag__dot { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.diag__step.is-now { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.diag__step.is-now .diag__dot { background: var(--paper-raised); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); animation: diag-pulse 2.4s var(--ease-in-out) infinite; }
.diag__step--end .diag__dot { background: var(--ink); box-shadow: none; color: var(--paper); }
.diag__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.diag__head b { display: inline; }
.diag__who {  padding: 3px 9px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.diag__step.is-now .diag__who, .diag__step--end .diag__who { background: var(--accent-tint); color: var(--accent-text); }
.diag__choices { display: flex; gap: 6px; margin-top: 8px; }
.diag__choices i { padding: 3px 10px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12px; font-style: normal; font-weight: 600; color: var(--ink-2); }
@keyframes diag-pulse { 50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 9px color-mix(in srgb, var(--accent) 6%, transparent); } }
@media (max-width: 520px) {
}
@media (prefers-reduced-motion: reduce) { .diag__step.is-now .diag__dot { animation: none; } }
.jcard__result dd + dd { margin-top: 8px; }
.build__list { display: grid; gap: 8px; margin: 0; padding: 8px 14px 14px; list-style: none; }
.build__row { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper-raised); }
.build__row--now { background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.build__row--next { opacity: .72; }
.build__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.build__head b { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.build__proc { font-size: 13px; color: var(--ink-3); }
.build__state { margin-left: auto; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.build__row--done .build__state { background: var(--accent); color: var(--on-accent); }
.build__row--now .build__state { background: var(--accent-tint); color: var(--accent-text); }
.build__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.build__steps i { position: relative; padding-top: 10px; font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.build__steps i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: var(--line-strong); }
.build__steps i.is-done { color: var(--ink-2); }
.build__steps i.is-done::before { background: var(--accent); }
.build__steps i.is-now { color: var(--accent-text); }
.build__steps i.is-now::before { background: linear-gradient(90deg, var(--accent) 0 55%, color-mix(in srgb, var(--accent) 25%, transparent) 55%); animation: build-fill 2.4s var(--ease-in-out) infinite alternate; background-size: 200% 100%; }
@keyframes build-fill { from { background-position: 30% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .build__steps i.is-now::before { animation: none; } }
.net__loop { stroke-dasharray: 3 5; }
.net__loop-head { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.net__loop-label { font-size: 12px; font-weight: 650; fill: var(--accent-text); text-anchor: middle; }
.viz__dot--live { animation: live-dot 1.8s var(--ease-in-out) infinite; }
@keyframes live-dot { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .viz__dot--live { animation: none; } }
.jcard__result dd { font-weight: 600; line-height: 1.45; }
.jcard__result dd + dd { margin-top: 10px; }
.jcard__rows > div:not(.jcard__result) dd { color: var(--ink-2); }
.app-bar b, .app-bar span { font-size: 13px; }
.diag__week { font-size: 12px; letter-spacing: .08em; }
.diag__step b, .build__head b { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.diag__step small, .build__proc { font-size: 13px; line-height: 1.45; }
.diag__step small { margin-top: 3px; }
.diag__who, .build__state, .build__steps i { font-size: 12px; font-weight: 600; }
.diag__step { padding-block: 10px; }
.build__steps i { font-weight: 500; }
.build__steps i.is-done, .build__steps i.is-now { font-weight: 600; }
.viz__legend, .viz__tools li { font-size: 13px; font-weight: 500; }
.kz-glow::before, .kz-glow::after, .jcard__stage::before, .hero-halo { display: none !important; }
.hero--ed { padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 56px); }
.hero-ed { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: min(720px, calc(100svh - var(--layout-nav) - 180px)); padding-bottom: var(--space-48); }
.hero-ed__text { display: grid; gap: var(--space-24); justify-items: start; }
.hero-ed__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hero-ed__kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--accent); }
.hero--ed .kz-h--hero { font-size: clamp(40px, 1.1rem + 3.3vw, 72px); line-height: 1.02; text-align: left; text-wrap: balance; max-width: 13em; }
.hero--ed .kz-lead { max-width: 30em; margin: 0; text-align: left; font-size: clamp(17px, 1rem + .3vw, 20px); color: var(--ink-2); }
.hero--ed .kz-hero__actions { justify-content: flex-start; align-items: center; gap: var(--space-24); margin-top: var(--space-8); }
.hero-ed__link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: border-color 300ms var(--ease-out); }
.hero-ed__link .kz-icon { width: 16px; height: 16px; transition: transform 300ms var(--ease-out); }
.hero-ed__link:hover { border-color: var(--ink); }
.hero-ed__link:hover .kz-icon { transform: translateX(3px); }
.hero-ed__facts { display: flex; flex-wrap: wrap; gap: var(--space-32); margin: var(--space-16) 0 0; padding-top: var(--space-24); border-top: 1px solid var(--line); }
.hero-ed__facts div { display: grid; gap: 2px; }
.hero-ed__facts dt { font-size: 22px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-ed__facts dd { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.hero-ed__visual { margin: 0; }
.hero-ed__visual .viz__card { box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(11,20,36,.04), 0 30px 60px -30px rgba(11,20,36,.25); }
.hero--ed .hero-ed__text > *, .hero--ed .hero-ed__visual { animation: rise-in 900ms var(--ease-soft) both; }
.hero--ed .hero-ed__text > :nth-child(2) { animation-delay: 80ms; }
.hero--ed .hero-ed__text > :nth-child(3) { animation-delay: 160ms; }
.hero--ed .hero-ed__text > :nth-child(4) { animation-delay: 240ms; }
.hero--ed .hero-ed__text > :nth-child(5) { animation-delay: 320ms; }
.hero--ed .hero-ed__visual { animation-delay: 300ms; }
.hero--ed .logos { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: var(--space-32); margin-bottom: 0; padding: var(--space-32) 0 var(--space-48); border-top: 1px solid var(--line); }
.hero--ed .logos__caption { margin: 0; white-space: nowrap; font-size: 13px; color: var(--ink-3); }
.hero--ed .logo { background: color-mix(in srgb, var(--ink) 46%, transparent); }
@media (max-width: 960px) {
.hero-ed { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: var(--space-40); }
.hero-ed__visual { order: 2; }
.hero--ed .logos { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
}
@media (max-width: 520px) {
.hero--ed { padding-top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 32px); }
.hero--ed .kz-hero__actions { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.hero-ed__facts { gap: var(--space-20); }
.hero-ed__facts dt { font-size: 19px; }
}
.kz-quiet { color: color-mix(in srgb, var(--ink) 52%, var(--paper)); }
@media (max-width: 520px) {
.hero--ed .kz-h--hero { font-size: clamp(32px, 8.6vw, 40px); }
.hero-ed__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hero-ed__facts dt { font-size: 17px; }
.hero-ed__facts dd { font-size: 12px; line-height: 1.35; }
}
.hero-ed { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.hero--ed .kz-h--hero { font-size: clamp(40px, 1rem + 3.2vw, 66px); max-width: none; }
@media (max-width: 960px) { .hero-ed { grid-template-columns: minmax(0, 1fr); } }
.figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .figures { grid-template-columns: minmax(0, 1fr); } }
.tp { border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(11,20,36,.04), 0 30px 60px -30px rgba(11,20,36,.22); overflow: hidden; margin: 0; }
.tp .app-bar { position: static; margin: 0; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); transform: none; font-size: 13px; }
.tp__list { position: relative; display: grid; gap: 2px; margin: 0; padding: 10px 12px 12px; list-style: none; }
.tp__list::before { content: ""; position: absolute; left: 39px; top: 40px; bottom: 56px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tp__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 14px 12px; }
.tp__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.tp__body { display: grid; gap: 4px; min-width: 0; }
.tp__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.tp__head b { font-size: 15px; font-weight: 600; color: var(--ink); }
.tp__body small { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.tp__tag { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--accent-tint); font-size: 12px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.tp__tag--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: live-dot 1.8s var(--ease-in-out) infinite; }
.tp__weeks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.tp__weeks span { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--paper-sunken); font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.tp__weeks b { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tp__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tp__chips i { padding: 3px 10px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12px; font-style: normal; font-weight: 500; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .tp__tag--live::before { animation: none; } }
@media (max-width: 520px) { .tp__weeks { grid-template-columns: minmax(0, 1fr); } }
.prod-card__proof .brand-icon { width: 36px; height: 36px; flex: none; }
@media (max-width: 520px) {
.hero--ed .kz-h--hero { font-size: clamp(30px, 8.4vw, 38px); }
.hero-ed__facts dt { font-size: 15px; line-height: 1.25; }
}
.jcard .jcard__top { align-items: center; gap: 10px; }
.jcard .jcard__num {
display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 12px;
background: var(--ink); background-image: none; color: var(--paper); -webkit-background-clip: border-box; background-clip: border-box;
font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0;
}
.jcard .jcard__of { padding: 0; font-size: 13px; font-weight: 600; }
.jcard__title { margin-top: 6px; font-size: clamp(30px, 1.05rem + 1.45vw, 40px); line-height: 1.04; font-weight: 650; letter-spacing: -.028em; }
.jcard__title .kz-quiet { display: block; }
@media (min-width: 961px) { .jcard__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }
.jcard__text { gap: var(--space-16); }
.jcard__rows > div { padding: 10px 0; }
.jcard__rows > .jcard__result { margin-top: 4px; }
.jcard__result dd + dd { margin-top: 7px; }
.jcard__more { font-size: 15px; }
@media (max-width: 960px) { .jcard__title { font-size: clamp(28px, 1rem + 2.4vw, 36px); } }
.journey.is-compact .jcard__title { margin-top: 2px; font-size: 26px; }
.journey.is-compact .jcard .jcard__num { min-width: 32px; height: 32px; font-size: 13px; border-radius: 10px; }
.journey.is-compact .jcard__more { display: none; }
.svc__steps b small { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); vertical-align: 2px; }
.svc__steps span { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.svc__h3 { font-size: clamp(22px, 1rem + .8vw, 28px); line-height: 1.18; font-weight: 650; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.svc__extra { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: var(--space-32); border-top: 1px solid var(--line); }
.svc__extra-text { display: grid; gap: var(--space-16); align-content: start; }
.svc__extra-text > p:not(.kz-label) { font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.svc__extra--stack { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.svc__extra--stack .svc__extra-text { max-width: 40em; }
.fiche { margin: 0; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); overflow: hidden; }
.fiche .app-bar { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fiche__body { display: grid; gap: 14px; padding: 16px 18px 18px; }
.fiche__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0; }
.fiche__head b { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.fiche__tag { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fiche__rows { display: grid; margin: 0; }
.fiche__rows > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.fiche__rows dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.fiche__rows dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.fiche__src { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.fiche__src--ok { background: var(--accent-tint); color: var(--accent-text); }
.fiche__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fiche__figures p { display: grid; gap: 2px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--paper-sunken); }
.fiche__figures small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.fiche__figures b { font-size: 20px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.fiche__figures span { font-size: 12px; color: var(--ink-3); }
.fiche__figures .is-on { background: var(--accent-tint); }
.fiche__figures .is-on small, .fiche__figures .is-on span { color: var(--accent-text); }
.fiche__figures .is-on b { font-size: 17px; color: var(--accent-text); }
.forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.form { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: var(--space-20); border-radius: var(--radius-lg); background: var(--paper-sunken); }
.form__icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 12px; background: var(--paper-raised); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--line); }
.form__icon .kz-icon { width: 19px; height: 19px; }
.form b { font-size: 17px; line-height: 1.3; font-weight: 650; color: var(--ink); }
.form p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.form small { padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.trust--left { justify-content: flex-start; margin-top: 0; text-align: left; }
.ctx { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.35fr) 40px minmax(0, 1fr); align-items: center; margin: 0; padding: var(--space-32) var(--space-24) var(--space-24); border-radius: var(--radius-lg); background: var(--paper-sunken); }
.ctx__col { display: grid; gap: 10px; }
.ctx__label { margin: 0 0 2px 2px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ctx__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.ctx__item p { display: grid; gap: 2px; margin: 0; }
.ctx__item b { font-size: 15px; font-weight: 650; color: var(--ink); }
.ctx__item small { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.ctx__icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--paper-sunken); color: var(--ink-2); }
.ctx__col--out .ctx__icon { background: var(--accent-tint); color: var(--accent-text); }
.ctx__icon .kz-icon { width: 16px; height: 16px; }
.ctx__arrow { position: relative; height: 100%; min-height: 40px; }
.ctx__arrow i { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px); }
.ctx__arrow i::after { content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-50%) rotate(45deg); }
.ctx__core { display: grid; gap: 14px; padding: 18px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-float); }
.ctx__core-head { display: flex; align-items: center; gap: 10px; margin: 0; }
.ctx__core-head .brand-icon { width: 22px; height: 22px; }
.ctx__core-head b { font-size: 16px; font-weight: 650; color: var(--ink); }
.ctx__tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.ctx__tiles li { padding: 6px 11px; border-radius: 10px; background: var(--paper-sunken); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ctx__tiles li.is-on { background: var(--accent); color: var(--on-accent); }
.ctx__note { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.ctx__note p { margin: 0; }
.ctx__note-type { font-size: 12px; font-weight: 600; color: var(--accent-text); }
.ctx__note-title { font-size: 15px; font-weight: 650; color: var(--ink); }
.ctx__note-text { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ctx__note-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px !important; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ctx__note-meta .is-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); }
.ctx__note-meta .kz-icon { width: 13px; height: 13px; stroke-width: 2.5; }
.ctx__loop { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--space-24); padding-top: var(--space-20); border-top: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); font-size: 14.5px; font-weight: 600; color: var(--accent-text); text-align: center; }
.ctx__loop .kz-icon { flex: none; width: 17px; height: 17px; }
@media (max-width: 1000px) {
.svc__extra { grid-template-columns: minmax(0, 1fr); }
.forms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ctx { grid-template-columns: minmax(0, 1fr); padding: var(--space-20) var(--space-16); }
.ctx__arrow { height: 36px; min-height: 0; }
.ctx__arrow i { left: 50%; right: auto; top: 4px; bottom: 6px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 11px); }
.ctx__arrow i::after { right: auto; top: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 560px) {
.forms { grid-template-columns: minmax(0, 1fr); }
.fiche__rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.fiche__figures { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fiche__figures .is-on { grid-column: 1 / -1; }
.svc__steps b small { display: table; margin: 4px 0 0; }
.ctx__loop { text-align: left; justify-content: flex-start; }
}
.net--full { display: block; width: 100%; height: auto; overflow: visible; }
.net__head { font-size: 13px; font-weight: 600; fill: var(--ink-3); text-anchor: middle; }
.net__head--gain { fill: var(--ink); text-anchor: start; }
.net--full .net__pill text { font-size: 13.5px; }
.net__sub { font-size: 12.5px; font-weight: 500; fill: var(--ink-3); text-anchor: middle; }
.net__sep { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.net__gain rect { fill: var(--accent-tint); }
.net__gain text { font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.net__check { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.viz:has(.net--full) { width: min(100%, 440px); }
.steps-nav {
position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--layout-nav) + 20px); z-index: 6;
display: flex; gap: 2px; width: max-content; max-width: calc(100% - 32px); margin: var(--space-48) auto 0; padding: 5px;
border-radius: var(--radius-pill); background: color-mix(in srgb, var(--paper-raised) 80%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float);
transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.steps-nav.is-off { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.steps-nav a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.steps-nav a b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-quiet); }
.steps-nav a:hover { color: var(--ink); background: var(--paper-sunken); }
.steps-nav a.is-done { color: var(--ink-2); }
.steps-nav a.is-active { background: var(--accent); color: var(--on-accent); }
.steps-nav a.is-active b { color: color-mix(in srgb, var(--on-accent) 70%, transparent); }
.steps-nav + .svc-detail { padding-top: var(--space-24); }
@media (max-width: 520px) { .steps-nav { margin-top: var(--space-32); } .steps-nav a { height: 32px; padding: 0 10px; font-size: 13px; gap: 6px; } }
.ctx__hint { margin: -4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ctx__tiles button { padding: 6px 11px; border: 0; border-radius: 10px; background: var(--paper-sunken); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.ctx__tiles button:hover { background: color-mix(in srgb, var(--accent) 12%, var(--paper-sunken)); color: var(--ink); transform: translateY(-1px); }
.ctx__tiles button.is-on { background: var(--accent); color: var(--on-accent); transform: none; }
.ctx__note-type { display: flex; justify-content: space-between; gap: 8px; }
.ctx__note-type span { font-weight: 500; color: var(--ink-quiet); }
.ctx__note.is-swap { animation: ctx-swap 420ms var(--ease-out); }
@keyframes ctx-swap { from { opacity: 0; transform: translateY(6px); } }
.ctx__arrow i { background-size: 11px 2px; animation: ctx-flow 1.1s linear infinite; }
@keyframes ctx-flow { to { background-position: 11px 0; } }
@media (max-width: 1000px) { .ctx__arrow i { background-size: 2px 11px; animation-name: ctx-flow-v; } @keyframes ctx-flow-v { to { background-position: 0 11px; } } }
.ctx__item, .form { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.ctx__item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 12px 26px -18px rgba(11, 20, 36, .35); }
.form:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.form:hover .form__icon { background: var(--accent); color: var(--on-accent); }
.form__icon { transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.read-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; }
.read-bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px) + 16px); bottom: max(20px, env(safe-area-inset-bottom, 0px) + 20px); z-index: 40; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); }
.to-top .kz-icon { width: 18px; height: 18px; transform: rotate(-90deg); }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) {
.ctx__arrow i, .ctx__note.is-swap { animation: none; }
.ctx__item:hover, .form:hover, .ctx__tiles button:hover { transform: none; }
.steps-nav, .to-top { transition: none; }
}
.ctx__label { display: flex; align-items: center; gap: 8px; }
.ctx__label span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ctx__col--core { align-self: stretch; align-content: center; }
.ctx__note { min-height: 156px; align-content: start; }
@media (max-width: 1000px) { .ctx__note { min-height: 0; } }
.net--full .net__pill--out text { font-weight: 650; font-size: 13px; }
.svc__steps--gains b { font-size: 19px; letter-spacing: -.01em; }
.svc__steps--gains li::before { background: var(--accent-tint); box-shadow: none; color: var(--accent-text); }
.svc__decide { display: flex; align-items: center; gap: 10px; margin: 0; padding-top: var(--space-20); border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.svc__decide .kz-icon { flex: none; width: 18px; height: 18px; color: var(--positive); }
.jcard__lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.jcard__rows > .jcard__result { margin-top: 0; padding: 16px 18px; }
.jcard__result dd { font-size: 16px; }
.journey.is-compact .jcard__lead { font-size: 16px; }
.svc__viz { display: grid; place-items: center; margin: 0; padding: var(--space-24) var(--space-16); border-radius: var(--radius-lg); background: var(--paper-sunken); }
@media (min-width: 961px) { .jcard__text { align-content: center; padding-bottom: var(--space-12); } }
.diag__steps.is-playing { --glide-ease: cubic-bezier(.65, 0, .35, 1); --glide-time: 620ms; }
.diag__steps.is-playing::before { background: var(--line-strong); }
.diag__steps.is-playing::after {
content: ""; position: absolute; left: 31px; top: var(--line-top, 46px); width: 2px; height: var(--line-len, 0px); border-radius: 2px;
background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--line-p, 0)); will-change: transform;
transition: transform var(--glide-time) var(--glide-ease);
}
.diag__glide {
position: absolute; left: 0; top: 0; z-index: 0; border-radius: 14px; pointer-events: none;
background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
will-change: transform; transition: transform var(--glide-time) var(--glide-ease), height var(--glide-time) var(--glide-ease), opacity 600ms ease;
}
.is-playing .diag__step { z-index: 1; }
.is-playing .diag__step.is-now { background: transparent; }
.is-playing .diag__step > div { transition: opacity 700ms ease; }
.is-playing .diag__step:not(.is-done):not(.is-now) > div { opacity: .45; }
.is-playing .diag__dot { z-index: 2; transition: background-color 600ms ease, box-shadow 600ms ease, color 600ms ease; }
.is-playing .diag__step.is-now .diag__dot { animation: none; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.is-playing .diag__step--end:not(.is-done):not(.is-now) .diag__dot { background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-3); }
.is-playing .diag__step--end.is-now .diag__dot { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.is-playing .diag__who { transition: background-color 600ms ease, color 600ms ease; }
.band { margin-top: var(--space-104); margin-inline: clamp(8px, 1.6vw, 24px); padding-top: var(--space-104); padding-bottom: var(--space-104); border-radius: var(--radius-xl); }
.band--first { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.band--last { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.band + .section:not(.band) { padding-top: var(--space-104); }
.band--white { background: #FFFFFF; --paper-raised: var(--paper); --shadow-card: none; }
.band--white .sector { box-shadow: none; }
.band--night {
--paper: #0E1735; --paper-raised: #16204A; --paper-sunken: #121B3E;
--ink: #F1F4FA; --ink-2: #C3CBDA; --ink-3: #A9B4C8; --ink-quiet: #8FA8FF; --ink-quiet-top: #B9C9FF;
--line: #E8EDF71A; --line-strong: #E8EDF733; --halo: #3D5BFF; --accent: #3354FF; --accent-text: #8FA8FF; --accent-tint: #1B2A5E;
--shadow-card: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 18px 44px -10px rgba(0,0,0,0.5);
color: var(--ink);
}
.band--night { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.band--night.band--first::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(1000px, 90%); height: 100%; translate: -50% 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 38%, transparent), transparent); filter: blur(30px); pointer-events: none; }
.band--night .statement__end { display: block; color: var(--ink-quiet); } 
.js .band--night.statement.is-live .w { opacity: .18; }
.js .band--night.statement.is-live .w.is-lit { opacity: 1; }
.band--night .stake__viz rect.is-on, .band--night .stake__viz circle { fill: var(--ink-quiet); }
.band--night .stakes__then .kz-icon { color: var(--ink-quiet); }
@media (max-width: 760px) { .band { margin-top: var(--space-64); padding-top: var(--space-64); padding-bottom: var(--space-64); border-radius: var(--radius-lg); } .band--first { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .band--last { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .band + .section:not(.band) { padding-top: var(--space-64); } }
.footer {
--paper: #0E1735; --ink: #F1F4FA; --ink-2: #C3CBDA; --ink-3: #A9B4C8; --line: #E8EDF71A;
margin-inline: clamp(8px, 1.6vw, 24px); margin-bottom: clamp(8px, 1.6vw, 24px);
border-top: 0; border-radius: var(--radius-xl); background: var(--paper); color: var(--ink);
}
.footer__giant { color: color-mix(in srgb, var(--ink) 10%, transparent); }
@media (max-width: 760px) { .footer { border-radius: var(--radius-lg); } }
.post-tag--case { background: var(--ink); color: var(--paper); }
.article__body sup { font-size: .62em; font-weight: 700; line-height: 0; margin-left: 1px; }
.article__body sup a { color: var(--accent-text); text-decoration: none; }
.article__body > p a:not(.kz-btn), .case-trame a, .g-plan a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article__sources { display: grid; gap: var(--space-16); }
.article__body .g-table, .article__body .g-aside, .article__body .g-calc, .article__body .g-checks, .article__body .g-compare { margin-block: var(--space-4); }
.case-chain { display: grid; gap: 0; margin: var(--space-8) 0; padding: 0; list-style: none; counter-reset: cc; }
.case-chain > li { counter-increment: cc; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding-bottom: 14px; }
.case-chain > li::before { content: counter(cc); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 17px; font-weight: 800; color: var(--ink); }
.case-chain > li::after { content: ""; position: absolute; left: 23px; top: 52px; bottom: 2px; width: 2px; background: var(--line-strong); }
.case-chain > li:last-child { padding-bottom: 0; }
.case-chain > li:last-child::after { content: none; }
.case-chain > li.is-human::before { background: var(--ink); color: var(--paper); box-shadow: none; }
.case-chain > li.is-ai::before { background: var(--accent); color: #fff; box-shadow: none; }
.case-step { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.case-step__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.case-step__head b { font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.case-step__who { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.is-ai .case-step__who { color: var(--accent-text); }
.case-step p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.case-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.case-tools li { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--paper-sunken); font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.case-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink-3); }
.case-legend span { display: inline-flex; align-items: center; gap: 8px; }
.case-legend i { width: 14px; height: 14px; border-radius: 5px; background: var(--ink); }
.case-legend i.is-ai { background: var(--accent); }
.case-legend i.is-tool { background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.case-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.case-split > div { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.case-split > div.is-on { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 30%, transparent); }
.case-split small { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.case-split b { font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.case-split p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.case-trame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: tr; }
.case-trame li { counter-increment: tr; position: relative; padding: 12px 14px 12px 46px; border-radius: 14px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.case-trame li::before { content: counter(tr); position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 800; }
.case-trame b { display: block; color: var(--ink); }
.case-link { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); text-decoration: none; transition: transform var(--duration-fast) var(--ease-out); }
.case-link:hover { transform: translateY(-2px); }
.case-link__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--paper) 12%, transparent); }
.case-link__icon .kz-icon { width: 26px; height: 26px; color: var(--paper); }
.case-link small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-on-night); }
.case-link b { display: block; margin-top: 2px; font-size: 17px; font-weight: 750; line-height: 1.35; color: var(--paper); }
.case-link > .kz-icon { width: 22px; height: 22px; color: var(--paper); }
.ds-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ds-swatch { display: grid; gap: 2px; padding: 0 0 12px; border-radius: 14px; overflow: hidden; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.ds-swatch i { display: block; height: 58px; margin-bottom: 8px; background: var(--c); box-shadow: inset 0 -1px 0 var(--line); }
.ds-swatch b, .ds-swatch span, .ds-swatch code { padding-inline: 12px; }
.ds-swatch b { font-size: 14px; font-weight: 750; color: var(--ink); }
.ds-swatch code { font: 600 12px ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-3); }
.ds-templates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ds-tpl { display: grid; gap: 8px; align-content: start; }
.ds-tpl__slide { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 22px -16px rgba(11, 20, 36, .35); overflow: hidden; }
.ds-tpl__slide i { position: absolute; display: block; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, #fff); }
.ds-tpl__slide i.t { background: var(--ink); }
.ds-tpl__slide i.a { background: var(--accent); }
.ds-tpl__slide i.s { background: var(--accent-tint); }
.ds-tpl__slide.is-dark { background: var(--ink); }
.ds-tpl__slide.is-dark i { background: color-mix(in srgb, #fff 26%, var(--ink)); }
.ds-tpl__slide.is-dark i.t { background: #fff; }
.ds-tpl__slide.is-dark i.a { background: var(--accent); }
.ds-tpl b { font-size: 14.5px; font-weight: 750; color: var(--ink); }
.ds-tpl span { margin-top: -6px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.ds-stack { display: grid; gap: 8px; }
.ds-stack > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 20px; align-items: center; padding: 16px 20px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line); }
.ds-stack > div:nth-child(1) { margin-inline: 0; }
.ds-stack > div:nth-child(2) { margin-inline: 14px; }
.ds-stack > div:nth-child(3) { margin-inline: 28px; }
.ds-stack > div:nth-child(4) { margin-inline: 42px; background: var(--ink); box-shadow: none; }
.ds-stack small { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.ds-stack b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); }
.ds-stack p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ds-stack > div:nth-child(4) small { color: var(--accent-on-night); }
.ds-stack > div:nth-child(4) b { color: var(--paper); }
.ds-stack > div:nth-child(4) p { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.guide-art--ds { background: radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--halo) 38%, transparent), transparent 60%), linear-gradient(170deg, var(--accent-tint), var(--paper-sunken)); }
.guide-art .ga-sw { stroke: var(--paper-raised); stroke-width: 3; }
@media (max-width: 900px) {
.ds-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.case-split, .case-trame { grid-template-columns: minmax(0, 1fr); }
.case-chain > li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.case-chain > li::before { width: 40px; height: 40px; border-radius: 13px; font-size: 15px; }
.case-chain > li::after { left: 19px; top: 44px; }
.case-link { grid-template-columns: minmax(0, 1fr) auto; }
.case-link__icon { display: none; }
.ds-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-stack > div { grid-template-columns: minmax(0, 1fr); margin-inline: 0 !important; }
}
@media (max-width: 760px) {
.page-hero__text, .cta-panel, .contact__text, .section__title, .stakes__head, .faq-layout__head, .svc__intro,
.kz-section-head, .kz-section-head__aside, .prod-hero__text { justify-items: center; text-align: center; }
.section__head:not(.kz-section-head) { display: grid; justify-items: center; text-align: center; }
.statement__text, .belief-quote, .steps__note, .cal-alt { text-align: center; }
.statement__text { margin: 0 auto; }
.trust { justify-content: center; text-align: center; }
.trust .kz-icon { flex: none; }
.contact__list, .prod-hero__list { justify-self: center; text-align: left; }
.kz-lead, .kz-text { margin-inline: auto; }
.svc__facts, .svc__steps, .svc__decide { justify-self: stretch; text-align: left; }
.prod-hero__list { width: fit-content; max-width: 100%; }
.prod-hero__text .kz-hero__actions { justify-content: center; align-items: center; }
h1, h2, h3, .kz-h { text-wrap: balance; }
.hero-ed__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hero-ed__facts div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.hero-ed__facts dt { font-size: 16px; line-height: 1.3; }
.hero-ed__facts dd { font-size: 14px; line-height: 1.4; }
.stakes__then { justify-content: center; grid-auto-columns: max-content; gap: 8px; }
.kz-compare > * { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
.app-bar { line-height: 1.35; }
.hero-ed { row-gap: var(--space-24); }
.hero-ed__text { display: contents; }
.hero--ed .hero-ed__text > * { animation: none; opacity: 1; transform: none; }
.hero-ed__text > * { order: 1; }
.hero-ed__visual { order: 2; margin-top: var(--space-8); }
.hero-ed__text > .hero-ed__facts { order: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: var(--space-20); }
.hero-ed__facts div { display: grid; align-content: start; gap: 4px; }
.hero-ed__facts dt { font-size: 16px; line-height: 1.2; }
.hero-ed__facts dd { font-size: 13px; line-height: 1.35; }
.site-nav .kz-nav__brand { width: auto; padding: 0 8px 0 10px; }
.site-nav .kz-nav__brand .brand-logo { display: block; width: 119px; height: 32px; }
.site-nav .kz-nav__brand .brand-icon { display: none; }
.hero-ed__text > .hero-ed__kicker, .hero-ed__text > .kz-h, .hero-ed__text > .kz-lead, .hero-ed__text > .kz-hero__actions { justify-self: center; text-align: center; }
.hero-ed__kicker { gap: 8px; padding: 7px 14px 7px 12px; border-radius: var(--radius-pill); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong), 0 4px 14px -8px rgba(11, 20, 36, .25); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.hero-ed__kicker::before { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-tint); }
.hero--ed .kz-hero__actions { align-items: center; }
.hero--ed .logos { gap: var(--space-20); padding: var(--space-28) 0 var(--space-40); }
.hero--ed .logos__caption { justify-self: center; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.hero--ed .logo { --s: 1.05; background: color-mix(in srgb, var(--ink) 62%, transparent); }
.hero--ed .logos__group, .hero--ed .logos__track.is-moving .logos__group { gap: var(--space-48); padding-right: var(--space-48); }
}
.legal-h3 { margin-top: var(--space-8); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.guides-start { margin-bottom: var(--space-16); }
.guide-hero__proofs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .guide-hero__proofs--3 { grid-template-columns: 1fr 1fr; } .guide-hero__proofs--3 li:last-child { grid-column: 1 / -1; } }