@keyframes astroFadeInOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes astroFadeIn {
	from {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroFadeOut {
	from {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroSlideFromRight {
	from {
		transform: translateX(100%);
	}
}

@keyframes astroSlideFromLeft {
	from {
		transform: translateX(-100%);
	}
}

@keyframes astroSlideToRight {
	to {
		transform: translateX(100%);
	}
}

@keyframes astroSlideToLeft {
	to {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	[data-astro-transition-scope] {
		animation: none !important;
	}
}
/* sora-latin-ext-400-normal */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/sora-latin-ext-400-normal.Twk1CgKs.woff2) format('woff2'), url(/_astro/sora-latin-ext-400-normal.BmhJC382.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* sora-latin-400-normal */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/sora-latin-400-normal.CRt88UEn.woff2) format('woff2'), url(/_astro/sora-latin-400-normal.OW7qkl5a.woff) format('woff');
  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;
}/* sora-latin-ext-500-normal */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/sora-latin-ext-500-normal.B5KKQIFO.woff2) format('woff2'), url(/_astro/sora-latin-ext-500-normal.DwxUJRqY.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* sora-latin-500-normal */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/sora-latin-500-normal.01eiPEn0.woff2) format('woff2'), url(/_astro/sora-latin-500-normal.w58xtEt9.woff) format('woff');
  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;
}/* sora-latin-ext-600-normal */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/sora-latin-ext-600-normal.Cue1zdhl.woff2) format('woff2'), url(/_astro/sora-latin-ext-600-normal.DLOJK0Ta.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* sora-latin-600-normal */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/sora-latin-600-normal.Cdg4DaK0.woff2) format('woff2'), url(/_astro/sora-latin-600-normal.1_7fyUAY.woff) format('woff');
  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;
}/* geist-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-cyrillic-ext-400-normal.9PYOMWMR.woff2) format('woff2'), url(/_astro/geist-cyrillic-ext-400-normal.ChfpGzr5.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-cyrillic-400-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-cyrillic-400-normal.DXusLSnH.woff2) format('woff2'), url(/_astro/geist-cyrillic-400-normal.DkrqoNl2.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-vietnamese-400-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-vietnamese-400-normal.C4gMWAkH.woff2) format('woff2'), url(/_astro/geist-vietnamese-400-normal.C8xY9-dI.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-latin-ext-400-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-latin-ext-400-normal.CND6cjiG.woff2) format('woff2'), url(/_astro/geist-latin-ext-400-normal.Bz1pQMyt.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-latin-400-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-latin-400-normal.B40WzpMT.woff2) format('woff2'), url(/_astro/geist-latin-400-normal.akEymXtG.woff) format('woff');
  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;
}/* geist-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-cyrillic-ext-500-normal.UpgxCE-h.woff2) format('woff2'), url(/_astro/geist-cyrillic-ext-500-normal.BXrH8YSv.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-cyrillic-500-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-cyrillic-500-normal.NWpm63d5.woff2) format('woff2'), url(/_astro/geist-cyrillic-500-normal.BboVsk8R.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-vietnamese-500-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-vietnamese-500-normal.DEhtl5QD.woff2) format('woff2'), url(/_astro/geist-vietnamese-500-normal._b1ojCbH.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-latin-ext-500-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-latin-ext-500-normal.BovoTgeE.woff2) format('woff2'), url(/_astro/geist-latin-ext-500-normal.C9fx-R30.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-latin-500-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-latin-500-normal.CTWBw9NS.woff2) format('woff2'), url(/_astro/geist-latin-500-normal.BDXIbFrL.woff) format('woff');
  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;
}/* geist-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/geist-cyrillic-ext-600-normal.Cr7e20Aw.woff2) format('woff2'), url(/_astro/geist-cyrillic-ext-600-normal.PR76dHFV.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-cyrillic-600-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/geist-cyrillic-600-normal.BeW5VFD_.woff2) format('woff2'), url(/_astro/geist-cyrillic-600-normal.CnEeIcMC.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-vietnamese-600-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/geist-vietnamese-600-normal.BFUgqsz8.woff2) format('woff2'), url(/_astro/geist-vietnamese-600-normal.B5MZcNo4.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-latin-ext-600-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/geist-latin-ext-600-normal.CVFbg5dS.woff2) format('woff2'), url(/_astro/geist-latin-ext-600-normal.TmIUreF9.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-latin-600-normal */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/geist-latin-600-normal.CSETrqM2.woff2) format('woff2'), url(/_astro/geist-latin-600-normal.DsPlZH-9.woff) format('woff');
  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;
}/* geist-mono-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-mono-cyrillic-ext-400-normal.XB2BPmDK.woff2) format('woff2'), url(/_astro/geist-mono-cyrillic-ext-400-normal.CkxHOdCb.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-mono-cyrillic-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-mono-cyrillic-400-normal.C51Di1Mf.woff2) format('woff2'), url(/_astro/geist-mono-cyrillic-400-normal.CPJFfJgk.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-mono-symbols2-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-mono-symbols2-400-normal.BS9BGVxz.woff2) format('woff2'), url(/_astro/geist-mono-symbols2-400-normal.DjbiTEEA.woff) format('woff');
  unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F;
}

/* geist-mono-vietnamese-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-mono-vietnamese-400-normal.CKEaXIlx.woff2) format('woff2'), url(/_astro/geist-mono-vietnamese-400-normal.CZEPLOgu.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-mono-latin-ext-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-mono-latin-ext-400-normal.DI-rJ0UV.woff2) format('woff2'), url(/_astro/geist-mono-latin-ext-400-normal.CfzLURNc.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-mono-latin-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-mono-latin-400-normal.DTRLJnHl.woff2) format('woff2'), url(/_astro/geist-mono-latin-400-normal.B2yvC1Cq.woff) format('woff');
  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;
}/* geist-mono-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-mono-cyrillic-ext-500-normal.C7aYOB1D.woff2) format('woff2'), url(/_astro/geist-mono-cyrillic-ext-500-normal.BY1KTvO5.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-mono-cyrillic-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-mono-cyrillic-500-normal.D2cXvDHF.woff2) format('woff2'), url(/_astro/geist-mono-cyrillic-500-normal.DfuvdVgn.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-mono-symbols2-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-mono-symbols2-500-normal.Q_ksOahU.woff2) format('woff2'), url(/_astro/geist-mono-symbols2-500-normal.CmnCPGa0.woff) format('woff');
  unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F;
}

/* geist-mono-vietnamese-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-mono-vietnamese-500-normal.Bs29RrUZ.woff2) format('woff2'), url(/_astro/geist-mono-vietnamese-500-normal.Dx9-epDo.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-mono-latin-ext-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-mono-latin-ext-500-normal.Buglb9-a.woff2) format('woff2'), url(/_astro/geist-mono-latin-ext-500-normal.CrWEgvU_.woff) format('woff');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-mono-latin-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-mono-latin-500-normal.YINYabwD.woff2) format('woff2'), url(/_astro/geist-mono-latin-500-normal.D-GG86Jb.woff) format('woff');
  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;
}
/* Koltra home v14. One committed theme per build (dark or light) via role tokens.
   Centred, visual-led structure: live console hero → four steps joining into one layer →
   stacking product windows → 2:14 am moment → trust row → close. Motion is transform/opacity only; reduced motion shows final states. */
:root{
  color-scheme:light;
  --bg:#FAFAFA; --bg-deep:#FAFAFA; --surface:#FFFFFF; --surface-2:#F5F5F7;
  --fg:#17171D; --fg-2:#3D3D47; --body:#4B4B55; --muted:#6B6B76; --faint:#6B6B76; /* faint text was #9696A0 (2.6-2.9:1); #6B6B76 is the lightest grey that still reads 4.5:1 on every surface */
  --line:rgba(23,23,29,.08); --line-2:rgba(23,23,29,.14);
  --accent:#7352DC; --signal:#7352DC; --hl0:#5043CF; --hl1:#8B6FEA;
  --btn-bg:#7352DC; --btn-fg:#FFFFFF; --btn-hover:#6443CF; --btn-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 20px -10px rgba(115,82,220,.55);
  --ghost-bg:#FFFFFF; --ghost-hover:#F5F5F7;
  --chip-bg:#F5F5F7; --on-bg:#F1EDFD; --on-line:rgba(115,82,220,.30);
  --gain:#0F7552; --gain-bg:rgba(19,134,95,.10); --gain-ring:rgba(19,134,95,.4); --attn:#8A520A; --attn-bg:rgba(246,182,90,.2); --hand:#C2412F; --hand-bg:rgba(194,65,47,.08);
  --check-bg:#7352DC; --check-fg:#FFFFFF;
  --nav-solid:rgba(250,250,250,.86); --menu-bg:#FFFFFF; --glass-strong:rgba(255,255,255,.92);
  --card-shadow:0 1px 2px rgba(23,23,29,.05),0 12px 32px -20px rgba(23,23,29,.18); --window-shadow:0 30px 70px -36px rgba(23,23,29,.35);
  --hero-glow:rgba(115,82,220,.07);
  --scard-bg:linear-gradient(180deg,#FFFFFF,#F7F7F9); --scard-glow:rgba(115,82,220,.06); --win-bg:#FFFFFF;
  --cover:#EDEDF1; --stack-shadow:0 -20px 44px -30px rgba(23,23,29,.28);
  --grain-op:0; --grain-blend:multiply;
  --phone-frame:#19181F; --phone-bg:#FFFFFF; --chip-strong:#F0F0F3;
  --fstage-bg:linear-gradient(180deg,#F5F5F7,#EDEDF1); --fm-brand:#7352DC; --fm-brand-2:#9386F7; --fm-tint:#F1EDFD; --fm-stage:#19181F; --fm-glow:rgba(115,82,220,.30); --lap-rim:#55555E; --lap-base0:#E7E7EC; --lap-base1:#B3B3BC; --lap-drop:0 34px 36px rgba(23,23,29,.22);
  --display:"Sora","Montserrat","Helvetica Neue",Arial,sans-serif;
  --text:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1180px; --gut:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.04em;line-height:1.02}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.hl{background:linear-gradient(100deg,var(--hl0) 0%,var(--hl1) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm{height:var(--h,22px);width:auto;display:block}
.center{text-align:center;margin-inline:auto}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--signal),var(--hl1))}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:12px;font-weight:500;font-size:15.5px;white-space:nowrap;transition:background .25s,box-shadow .25s;cursor:pointer;border:0;font-family:var(--text)}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-main{background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-shadow)}
.btn-main:hover{background:var(--btn-hover)}
.btn-ghost{background:var(--ghost-bg);color:var(--fg);box-shadow:0 0 0 1px var(--line-2) inset}
.btn-ghost:hover{background:var(--ghost-hover)}
.btn-sm{height:38px;padding:0 15px;font-size:14px;border-radius:10px}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.solid{background:var(--nav-solid);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nav-links{display:flex;align-items:center;gap:4px;margin-right:auto}
.nav-links>a,.ndt{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--fg-2);padding:8px 12px;border-radius:9px;transition:color .2s,background .2s}
.nav-links>a:hover,.nav-links>a.on,.ndt:hover,.ndt.on,.nd.open .ndt{color:var(--fg);background:var(--chip-bg)}
.menu-btn{all:unset;display:none;cursor:pointer;width:40px;height:40px;border-radius:10px;place-items:center;color:var(--fg);box-shadow:0 0 0 1px var(--line-2) inset}
.menu-btn svg{width:20px;height:20px}
.menu-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
html{scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
[tabindex="-1"]:focus{outline:none}
@media (max-width:820px){
  .nav .wrap{gap:12px}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px var(--gut) 18px;background:var(--menu-bg);border-bottom:1px solid var(--line);display:none}
  .nav.open .nav-links{display:flex}
  .menu-btn{display:grid}
  .nav .cta{margin-left:auto}
}
.nav-links>a.nav-contact{display:none}
@media (max-width:420px){.nav .cta{display:none}.menu-btn{margin-left:auto}.nav-links>a.nav-contact{display:inline-flex}}
/* No-JavaScript navigation. The phone menu needs main.js (it only opens through
   .nav.open), so when html lacks the "js" class (JS off, or main.js failed and
   the inline script took the class off again) hide the dead menu button and show
   the links as a compact wrapped row under the logo, with Product's three pages
   as plain links. The bar scrolls with the page instead of staying fixed: it is
   taller than 66px, and without JS nothing gives it a background or hides it
   while scrolling. Every rule needs html:not(.js), so JS-on behaviour is
   unchanged. Desktop widths already work without JS (hover menu); keyboard
   focus now opens it too. */
@media (max-width:820px){
  html:not(.js) .nav{position:relative}
  html:not(.js) .nav .wrap{flex-wrap:wrap;height:auto;padding-block:10px 6px;row-gap:6px}
  html:not(.js) .menu-btn{display:none}
  html:not(.js) .nav .cta{order:2}
  html:not(.js) .nav-links{order:3;position:static;flex:1 0 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 2px;margin:0 -10px;padding:0;background:none;border:0;display:flex}
  html:not(.js) .nav-links>a,html:not(.js) .ndi{font-size:14px;padding:6px 10px}
  html:not(.js) .nd,html:not(.js) .nd-panel{display:contents}
  html:not(.js) .nd-panel::before,html:not(.js) .ndt,html:not(.js) .ndi .ic,html:not(.js) .ndi b+span{display:none}
  html:not(.js) .ndi{display:inline-flex;align-items:center;color:var(--fg-2)}
  html:not(.js) .ndi b{display:inline;font:inherit;letter-spacing:normal;color:inherit}
}
@media (min-width:821px){html:not(.js) .nd:focus-within .nd-panel{opacity:1;visibility:visible;transform:none}html:not(.js) .nd:focus-within .ndt svg{transform:rotate(180deg)}}

/* 1 · hero */
.hero{position:relative;background:var(--bg-deep);padding-top:clamp(128px,15vh,170px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:80%;background:radial-gradient(50% 60% at 50% 0%,var(--hero-glow),transparent 70%);pointer-events:none}
.hero .copy{position:relative;text-align:center;display:grid;justify-items:center;gap:22px}
.hero h1{font-size:clamp(46px,7vw,100px);letter-spacing:-.05em;line-height:.98}
.hero h1 .l{display:block}
.hero .lead{font-size:clamp(17px,1.5vw,20px);color:var(--fg-2);max-width:40ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.hpanel{position:relative;margin:clamp(48px,7vw,80px) auto 0;max-width:1180px;height:clamp(460px,58vw,600px);border-radius:28px;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px var(--line-2) inset;transform-origin:50% 0;will-change:transform}
.js .hpanel{animation:panelIn 1.1s .25s var(--ease) both}
@keyframes panelIn{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@media (max-width:700px){
  .hpanel{height:560px;border-radius:22px}
}

/* 3 · flow */
.vdot{grid-column:2;justify-self:center;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);background:var(--bg);box-shadow:0 0 0 1px var(--line-2) inset;transition:color .4s,background .4s,box-shadow .4s;position:relative;z-index:1}
@media (max-width:820px){
  .vdot{grid-column:1;grid-row:1;justify-self:start}
}

/* home flow: four cards joining into one layer */


/* 6 · trust */

/* 7 · close */

footer{border-top:1px solid var(--line);background:var(--bg-deep);padding-block:56px 36px}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.foot .about{display:grid;gap:14px;align-content:start}
.foot .about p{font-size:14.5px;color:var(--muted);max-width:32ch}
.foot h2{margin:0 0 14px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;line-height:1.6;text-wrap:wrap;text-transform:uppercase;color:var(--faint)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{font-size:14.5px;color:var(--fg-2)}
.foot ul a:hover{color:var(--fg)}
.legal{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--faint)}
@media (max-width:820px){.foot{grid-template-columns:1fr 1fr}.foot .about{grid-column:1/-1}}

.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1!important;transform:none!important;transition:none!important}
}

/* product dropdown */
.nd{position:relative}
.ndt svg{width:14px;height:14px;opacity:.7;transition:transform .25s}
.nd.open .ndt svg{transform:rotate(180deg)}
.nd-panel{position:absolute;top:calc(100% + 12px);left:-12px;width:380px;padding:8px;border-radius:18px;background:var(--menu-bg);box-shadow:0 0 0 1px var(--line-2) inset,var(--window-shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nd.open .nd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s,visibility 0s}
@media (hover:hover) and (min-width:821px){html:not(.js) .nd:hover .nd-panel{opacity:1;visibility:visible;transform:none}html:not(.js) .nd:hover .ndt svg{transform:rotate(180deg)}}
.nd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.ndi{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:12px;border-radius:12px;transition:background .2s}
.ndi:hover,.ndi.cur{background:var(--chip-bg)}
.ndi .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--on-bg);color:var(--accent)}
.ndi .ic svg{width:19px;height:19px}
.ndi b{display:block;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.015em;color:var(--fg)}
.ndi span span{font-size:13px;color:var(--muted);line-height:1.45}
@media (max-width:820px){
  .nd-panel{position:static;width:auto;opacity:1;visibility:visible;transform:none;display:none;background:transparent;box-shadow:none;padding:0 0 6px;backdrop-filter:none}
  .nd.open .nd-panel{display:block}
}

.nav-links>a:focus-visible,.ndt:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ================= product film: a resting laptop that plays one connected task ================= */
.hpanel.fstage{height:auto;padding:clamp(28px,5vw,64px) clamp(12px,4vw,56px) clamp(18px,2.6vw,30px);background:var(--fstage-bg);display:grid;gap:clamp(18px,2.4vw,28px)}
.film{position:relative;z-index:1;width:100%;max-width:900px;margin:0 auto}
.lap{position:relative;filter:drop-shadow(var(--lap-drop))}
.lid{position:relative;margin:0 7%;padding:2.3% 2.3% 2.8%;border-radius:18px 18px 6px 6px;background:#0B0B0E;box-shadow:0 0 0 1.5px var(--lap-rim) inset,0 0 0 1px rgba(0,0,0,.35)}
.lcam{position:absolute;top:.9%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#22222A;box-shadow:0 0 0 1px #33333C inset}
.fscr{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:var(--fm-stage);isolation:isolate}
.fscr::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 38%)}
.lbase{position:relative;height:0;padding-top:2.4%;margin-top:-1px;border-radius:2px 2px 18px 18px/2px 2px 100% 100%;background:linear-gradient(180deg,var(--lap-base0) 0%,var(--lap-base1) 100%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset}
.lbase i{position:absolute;top:0;left:50%;width:15%;height:42%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.06))}

@media (max-width:760px){
  .lid{margin:0 3%;border-radius:12px 12px 4px 4px}
}

/* ===== v18: film hero ===== */
.fscr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--fm-stage)}
.freplay{position:absolute;inset:0;z-index:6;border:0;background:transparent;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility .4s}
.freplay.on{opacity:1;visibility:visible;pointer-events:auto}
.freplay span{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:20px;background:rgba(23,23,29,.78);color:#FAFAFA;font-size:13.5px;font-weight:500;backdrop-filter:blur(8px)}
.freplay span svg{width:14px;height:14px;fill:#FAFAFA}

/* ===== v20: immersive intro ===== */
/* Without JavaScript (or if main.js fails) the intro overlay would cover the page. */
html:not(.js) #intro{display:none}
#intro{position:fixed;inset:0;z-index:2000;background:radial-gradient(80% 70% at 30% 20%,#9F93FF 0%,#7A66EE 45%,#6450E0 100%);overflow:hidden;transform-origin:0 0;will-change:transform,opacity}
#intro .ib{position:absolute;border-radius:50%;filter:blur(48px);animation:ibf 9s ease-in-out infinite alternate;pointer-events:none}
#intro .ib1{width:48vw;height:48vw;left:-12vw;top:-18vw;background:rgba(255,255,255,.28)}
#intro .ib2{width:38vw;height:38vw;right:-8vw;top:8vh;background:rgba(185,170,255,.55);animation-delay:-3s}
#intro .ib3{width:44vw;height:44vw;left:28vw;bottom:-26vw;background:rgba(80,67,207,.45);animation-delay:-6s}
@keyframes ibf{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,3vh) scale(1.08)}}
#intro .iw{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:22px;width:min(72vw,560px);will-change:transform,opacity}
#intro .ilogo{width:min(54vw,400px);aspect-ratio:697/178;opacity:0;transform:translateY(16px) scale(.96)}
#intro .ilogo svg{width:100%;height:100%;display:block}
/* The page under the overlay stays drawn (not hidden), so the hero is in place and painted when the overlay shrinks away. */
@media (prefers-reduced-motion: reduce){#intro{display:none}}


/* ===== v24 base (from v23): one quiet ground, a structured top-to-bottom flow, sleek type ===== */
:root{--bg:#F9F8FC;--bg-deep:#F9F8FC;--surface-2:#F1F0F7;--nav-solid:rgba(249,248,252,.84);--fstage-bg:linear-gradient(180deg,#F3F2F9,#EAE9F2);--hero-glow:rgba(132,104,238,.09);--ghost-bg:#FFFFFF;--ghost-hover:#F3F2F9;--chip-bg:#F1F0F7;--line:rgba(23,23,29,.085);--line-2:rgba(23,23,29,.14);--on-bg:#F2EFFF;--on-line:rgba(132,104,238,.32)}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.03em}
.nav{transition:background .35s,border-color .35s,transform .45s var(--ease)}
.nav.hide:not(:has(:focus-visible)){transform:translateY(-100%)}
.nav .wrap{height:66px}
.nav-links a,.nav .ndt{font-size:14.5px}
.hero{padding-top:clamp(112px,13vh,150px)}
.hero h1{font-size:clamp(40px,5.4vw,70px);letter-spacing:-.035em;line-height:1.02}
.hero .lead{max-width:40ch;font-size:clamp(16px,1.3vw,18px);color:var(--body)}
.hero .ctas .btn{height:44px;font-size:14.5px}
.hpanel{transform:none!important}

/* rhythm */
.s23{padding-block:clamp(64px,8vw,112px)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500}
.h23{display:grid;gap:12px;max-width:720px}
.h23.center{text-align:center;justify-items:center;margin-inline:auto}
.h23 h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08}
.h23 p{font-size:clamp(16px,1.25vw,17.5px);color:var(--body);max-width:52ch;line-height:1.6}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.lnk23{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:14.5px;color:var(--accent)}
.lnk23 svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.lnk23:hover svg{transform:translateX(4px)}
.btn{font-weight:500}

/* channel line */

/* statement (centred) */

/* mirror sections */

/* three quiet columns */

/* footer */
footer{padding-block:52px 30px}
.foot{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr))}
.foot .about p{max-width:30ch;font-size:14px}
.foot ul a{font-size:14px}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}.foot .about{grid-column:span 2}}

/* products: cards that stack as you scroll */
.stack23{display:grid;gap:clamp(20px,4vh,40px);margin-top:clamp(32px,4vw,52px);padding-bottom:clamp(20px,6vh,60px)}
.pk23{position:sticky;top:calc(92px + var(--i) * 20px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(20px,2.6vw,34px);border-radius:26px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 -24px 60px -36px rgba(23,23,29,.28);color:inherit;transform-origin:50% 0;will-change:transform}
.pk23::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--bg);opacity:var(--d,0);pointer-events:none;transition:opacity .1s linear}
.pk23 .pkt{display:grid;gap:12px;align-content:center;padding-left:clamp(0px,1vw,12px)}
.pk23 h3{font-size:clamp(24px,2.6vw,34px);line-height:1.08}
.pk23 p{font-size:clamp(15px,1.15vw,16.5px);color:var(--body);line-height:1.6;max-width:38ch}
.pk23 .lnk23{margin-top:6px}
.pk23 .pkm{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:var(--surface-2);box-shadow:0 0 0 1px var(--line) inset}
.pk23:hover .lnk23 svg{transform:translateX(4px)}
@media (max-width:820px){.pk23{grid-template-columns:1fr;top:calc(76px + var(--i) * 14px);gap:18px}.pk23 .pkt{padding-left:0}}

/* ===== v24: scenes — the visuals are the sections ===== */

/* 4 · you set the rules (interactive sentence) */

/* 5 · the day in numbers (still) */

/* 7 · the ending: the purple field again */
.end24{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(150px,20vw,260px) clamp(110px,14vw,180px);text-align:center;color:#fff;background:radial-gradient(80% 70% at 30% 30%,#9F93FF 0%,#7A66EE 45%,#6450E0 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 160px);mask-image:linear-gradient(180deg,transparent 0,#000 160px)}
.end24 .zeb{position:absolute;border-radius:50%;filter:blur(56px);pointer-events:none;z-index:-1;animation:ebf24 12s ease-in-out infinite alternate}
.end24 .ze1{width:48vw;height:48vw;left:-12vw;top:-10vw;background:rgba(255,255,255,.24)}
.end24 .ze2{width:38vw;height:38vw;right:-8vw;top:20%;background:rgba(185,170,255,.5);animation-delay:-4s}
.end24 .ze3{width:44vw;height:44vw;left:28vw;bottom:-26vw;background:rgba(80,67,207,.45);animation-delay:-8s}
@keyframes ebf24{from{transform:translate(0,0) scale(1)}to{transform:translate(3vw,2vh) scale(1.08)}}
.end24 h2{font-size:clamp(36px,5.4vw,72px);letter-spacing:-.04em;line-height:1.02;color:#fff}
.end24 p{margin:16px auto 0;font-size:clamp(16px,1.3vw,18px);color:rgba(255,255,255,.86);max-width:40ch}
.end24 .ctas{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:30px}
.end24 .btn{height:46px;font-size:14.5px}
.end24 .btn-main{background:#fff;color:#17171D;box-shadow:0 20px 50px -20px rgba(0,0,0,.35)}
.end24 .btn-main:hover{background:#F1EEFF}
.end24 .btn-ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.3) inset}
.end24 .btn-ghost:hover{background:rgba(255,255,255,.18)}
.end24 .zfine{margin-top:26px;font-size:12.5px;color:rgba(255,255,255,.66)}
footer{border-top:0}

/* product pages: next, as one big line */
.nx24{display:grid;gap:10px;justify-items:center;text-align:center;color:inherit}
@media (prefers-reduced-motion:reduce){.end24 .zeb{animation:none}}

/* ===== v25: one continuous, smooth scroll ===== */
html.lenis,html.lenis body{height:auto}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.js .rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* a · two lines that drift past each other */

/* b · one request, drifting sideways as you scroll down */
/* bubbles */
/* three-day calendar */
/* the record line */

/* c · the question types as you scroll */

/* d · the line runs edge to edge */

/* ===== v26: depth — layered, three-dimensional scenes ===== */
/* headlines that rise out of a mask */
.js .mk26.rv{opacity:1;transform:none}
.mk26 .ml{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.mk26 .ml > span{display:block;transform:translateY(108%);transition:transform 1.1s cubic-bezier(.2,.75,.15,1)}
.mk26 .ml:nth-child(2) > span{transition-delay:.09s}
.mk26 .ml:nth-child(3) > span{transition-delay:.18s}
.mk26.in .ml > span,html:not(.js) .mk26 .ml > span{transform:none}
@media (prefers-reduced-motion:reduce){.mk26 .ml > span{transform:none;transition:none}}
.glow26{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:-1}

/* 1 · exploded view: four layers collapse into one finished job */
/* the window */
/* layer contents, placed so the stack composes one screen */

/* 2 · a day, flown through on the z-axis */
.zd26{position:relative;height:320vh}
.zd26 .ypin{position:sticky;top:0;height:100vh;overflow:clip;isolation:isolate}
.zd26 .ytun{position:absolute;inset:0;perspective:900px;perspective-origin:50% 42%}
.zd26 .yev{position:absolute;left:0;top:0;transform:translate(-50%,-50%) translate3d(calc(var(--fx) * 1vw),calc(var(--fy) * 1vh),calc(var(--fz) * 1px));display:grid;gap:5px;padding:14px 20px 15px;border-radius:16px;background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 0 0 1px var(--line) inset,0 30px 60px -36px rgba(40,30,120,.45);white-space:nowrap;backdrop-filter:blur(6px)}
.zd26 .yev small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.zd26 .yev b{font-weight:500;font-size:17px;color:var(--fg)}
.zd26 .yev span{font-size:13.5px;color:var(--muted)}
.zd26 .yhud{position:absolute;inset:0;pointer-events:none;max-width:var(--maxw);margin-inline:auto;padding:clamp(88px,12vh,130px) var(--gut) 40px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.zd26 .yhud h2{font-size:clamp(30px,3.8vw,52px);line-height:1.04;letter-spacing:-.04em;margin-top:12px}
.zd26 .yclk{text-align:right;font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,92px);letter-spacing:-.05em;line-height:.9;color:var(--fg);font-variant-numeric:tabular-nums}
.zd26 .yclk small{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.zd26 .yfin{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) scale(.94);text-align:center;opacity:0;transition:opacity .6s,transform .8s var(--ease);pointer-events:none;width:min(90vw,760px)}
.zd26 .yfin.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.zd26 .yfin p{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,74px);letter-spacing:-.045em;line-height:1.05;color:var(--fg)}
.zd26 .yfin small{display:block;margin-top:14px;font-size:15px;color:var(--muted)}
.zd26 .g1{width:50vw;height:50vw;left:25vw;top:20%;background:rgba(147,134,247,.18)}
@media (max-width:700px){.zd26 .yev b{font-size:14px}.zd26 .yev{padding:10px 14px}.zd26 .yhud{flex-direction:column}.zd26 .yclk{text-align:left}}

/* 3 · ask it anything — a composer in a field of light */

/* 4 · the chart: glow, area and a travelling head */

/* ===== v27: nothing pins — the scenes play on their own while the page scrolls normally ===== */
.zd26{height:auto;padding-block:clamp(20px,3vw,40px)}
.zd26 .ypin{position:relative;top:auto;height:min(92vh,860px)}
.zd26 .ytun{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.zd26 .ytime{display:block;width:clamp(120px,14vw,200px);height:2px;margin:14px 0 0 auto;border-radius:2px;background:var(--line-2);overflow:hidden}
.zd26 .ytime i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:900px){
  .zd26 .ypin{height:min(88vh,720px)}
  .zd26 .ytime{margin-left:0}
}

/* ===== v28: a clear story — the difference, four chapters, the products ===== */
.yp28{font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--body);max-width:40ch}
.zd26 .yhud .yp28{margin-top:12px;max-width:34ch}
.yg,.yi{width:15px;height:15px;flex:none;vertical-align:-3px}
.yi{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zd26 .yev small{display:inline-flex;align-items:center;gap:7px}

/* faint chapter numerals that drift with the scroll */
.zd26{position:relative}

/* the difference: the same request, handled two ways */
/* the timeline: each piece appears in turn, both sides in step */

/* the chapter you're in */
.chp28{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:12px;height:42px;padding:0 16px 0 14px;border-radius:21px;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 0 0 1px var(--line-2) inset,0 18px 40px -20px rgba(23,23,29,.35);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .4s ease,transform .5s var(--ease);font-size:13.5px;white-space:nowrap}
.chp28.on{opacity:1;transform:translate(-50%,0)}
.chp28 .yn{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent)}
.chp28 .yt{font-weight:500;color:var(--fg)}
.chp28 .ys{color:var(--muted)}
.chp28 .yk{display:flex;gap:4px;margin-left:4px}
.chp28 .yk i{width:14px;height:3px;border-radius:2px;background:var(--line-2);transition:background .3s}
.chp28 .yk i.on{background:var(--accent)}
@media (max-width:560px){.chp28 .ys{display:none}}
/* on phones and small tablets the pill sat over the text as you scrolled; the section headings already say where you are */
@media (max-width:900px){.chp28{display:none}}

/* ===== v29: calmer, clearer ===== */
/* delivery: more room, clearer layers */
/* knowledge: just the conversation */

/* Delivery: four systems as separate slabs, laid flat into one finished job */
.chp28 .yn{display:none}
.chp28{padding-left:16px}

/* A day, handled: projected in 2D by the page — no CSS 3D, no backdrop blur */
.zd26 .ytun.t29{perspective:none;overflow:hidden}
.zd26 .t29 .yfc{position:absolute;inset:0;width:100%;height:100%;display:block}
.zd26 .t29 .yev{transform:none;transform-origin:0 0;opacity:0;visibility:hidden;backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--surface) 94%,transparent)}
.zd26 .yfin{width:min(94vw,1040px)}
@media (max-width:700px){.zd26 .t29 .yev{padding:10px 14px 11px;border-radius:13px}.zd26 .t29 .yev small{font-size:10px}.zd26 .t29 .yev span{font-size:12px}}

/* ===== v30 · 1 · the difference: the same call, the same five jobs — who does them ===== */
@keyframes ring30{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
@keyframes spin30{to{transform:rotate(360deg)}}

/* ===== v30 · 2 · delivery: one job across six systems ===== */

/* ===== v30 · 3 · a day, handled — wired, each moment completing in turn ===== */
.zd30 .t29 .yev{display:flex;align-items:center;gap:14px;padding:13px 20px 13px 13px;border-radius:16px;white-space:nowrap;transition:box-shadow .4s}
.zd30 .yev .ytl{position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);flex:none;transition:background .35s,color .35s}
.zd30 .yev .ytl .yi{width:19px;height:19px;transition:opacity .2s}
.zd30 .yev .ytl .yck{position:absolute;width:20px;height:20px;fill:none;stroke:var(--btn-fg);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:opacity .2s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.zd30 .yev .ytl::before,.zd30 .yev .ytl::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);opacity:0}
.zd30 .yev.go .ytl{background:var(--on-bg);color:var(--accent)}
.zd30 .yev.go .ytl::before{animation:ring30 1.1s ease-out infinite}
.zd30 .yev.go .ytl::after{animation:ring30 1.1s ease-out .4s infinite}
.zd30 .yev.dn .ytl{background:var(--btn-bg);color:var(--btn-fg)}
.zd30 .yev.dn .ytl .yi{opacity:0}
.zd30 .yev.dn .ytl .yck{opacity:1;transform:none}
.zd30 .yev.dn{box-shadow:0 0 0 1px var(--on-line) inset,0 30px 60px -30px rgba(132,104,238,.55)}
.zd30 .ybx2{display:grid;gap:3px}
.zd30 .yev .ybx2 small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.zd30 .yev.dn .ybx2 small{color:var(--accent)}
.zd30 .yev .ybx2 b{font-weight:500;font-size:20px;color:var(--fg)}
.zd30 .yev .ybx2 span{font-size:14.5px;color:var(--muted)}
.zd30 .yrg{position:absolute;left:-3px;top:-3px;overflow:visible;pointer-events:none}
.zd30 .yrg rect{fill:none}
.zd30 .yrp{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.zd30 .yfx{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.zd30 .yrt .yfx{left:auto;right:calc(100% + 12px);align-items:flex-end}
.zd30 .yfx i{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:99px;font-style:normal;background:var(--surface);box-shadow:0 0 0 1px var(--line-2) inset,0 12px 24px -16px rgba(40,30,120,.45);opacity:0;transform:scale(.5) translateX(-10px);transition:opacity .3s calc(var(--c) * .16s),transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--c) * .16s)}
.zd30 .yrt .yfx i{transform:scale(.5) translateX(10px)}
.zd30 .yev.dn .yfx i{opacity:1;transform:none}
.zd30 .yfx i .yg,.zd30 .yfx i .yi{width:15px;height:15px;flex:none}
.zd30 .yfx i .yi{color:var(--accent)}
.zd30 .yev .yfx i span{font-size:12.5px;font-weight:500;color:var(--fg)}
@media (max-width:700px){
  .zd30 .t29 .yev{gap:10px;padding:10px 14px 10px 10px}
  .zd30 .yev .ytl{width:32px;height:32px;border-radius:10px}
  .zd30 .yev .ybx2 b{font-size:14.5px}
  .zd30 .yev .ybx2 span{font-size:12px}
  .zd30 .yfx,.zd30 .yrt .yfx{left:8px;right:auto;top:calc(100% + 7px);transform:none;flex-direction:row}
  .zd30 .yfx i,.zd30 .yrt .yfx i{transform:scale(.5) translateY(-6px);padding:4px 9px 4px 6px}
  .zd30 .yev .yfx i span{font-size:11px}
}

/* ===== v30 · 4 · improvement: data → trend → fix → review → live → better ===== */
.im30{position:relative;padding-block:clamp(70px,8vw,120px) clamp(50px,6vw,90px);overflow-x:clip}
.im30 .yhr3{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.im30 .yh3{display:grid;gap:14px;max-width:620px}
.im30 h2{font-size:clamp(32px,4.2vw,58px);line-height:1.04;letter-spacing:-.04em}
.im30 h2 .hl2{color:var(--accent)}
.im30 .ybig3{display:grid;justify-items:end;gap:2px;text-align:right}
.im30 .ybig3 small{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.im30 .ybig3 em{font-style:normal;font-family:var(--display);font-weight:400;font-size:clamp(52px,6.4vw,96px);line-height:.95;letter-spacing:-.05em;color:var(--fg);font-variant-numeric:tabular-nums;transition:color .4s}
.im30.st5 .ybig3 em{color:var(--accent)}
.im30 .yil{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.im30 .ystage3{position:relative;height:clamp(560px,43vw,620px);margin-top:clamp(22px,3vw,40px);transition:opacity .5s}
.im30.fade .ystage3{opacity:0}
.im30 .yic3{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.im30 .yic3 .yi{width:16px;height:16px}
.im30 .ych3{position:absolute;left:0;right:0;bottom:0;height:46%}
.im30 .ycv3{position:absolute;inset:0 0 26px 0}
.im30 .ysv3{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.im30 .ygr3 line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.im30 .ystop1{stop-color:var(--accent);stop-opacity:.16}
.im30 .ystop2{stop-color:var(--accent);stop-opacity:0}
.im30 .yln3{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.im30 .ybase3{stroke:var(--fg-2);opacity:.75}
.im30 .yaft3{stroke:var(--accent)}
.im30 .ypd3{position:absolute;inset:0;pointer-events:none}
.im30 .ypd3 i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--fg-2) inset;opacity:clamp(0, (var(--p, 0) - var(--d)) * 30 + 1, 1)}
.im30 .ypd3 i.ya3{box-shadow:0 0 0 2.5px var(--accent) inset}
.im30 .yhd3{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(132,104,238,.18),0 0 26px 6px rgba(132,104,238,.45);opacity:0;transition:opacity .3s}
@media (max-width:900px){
  .im30 .ystage3{height:auto;display:grid;gap:18px}
  .im30 .ych3{position:relative;bottom:auto;height:260px;margin-top:34px}
  .im30 .ybig3{justify-items:start;text-align:left}
}

/* ===== v31 · 1 · on the call: Koltra does every step of the job while the customer is still on the line ===== */

/* ===== v31 · 4 · improvement, kept simple ===== */

/* ===== v33 · one world: a light that travels with you, depth that answers the scroll, your systems around Koltra ===== */

/* the ambient light: two soft orbs fixed behind the page, easing toward each chapter's own position as you scroll */
.amb33{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s ease}
.amb33.on{opacity:1}
.amb33 i{position:absolute;left:0;top:0;border-radius:50%;will-change:transform,opacity}
.amb33 .o1{width:min(70vw,900px);height:min(70vw,900px);margin:calc(min(70vw,900px) / -2) 0 0 calc(min(70vw,900px) / -2);background:radial-gradient(closest-side,rgba(147,134,247,.34),rgba(147,134,247,0))}
.amb33 .o2{width:min(46vw,620px);height:min(46vw,620px);margin:calc(min(46vw,620px) / -2) 0 0 calc(min(46vw,620px) / -2);background:radial-gradient(closest-side,rgba(132,104,238,.22),rgba(132,104,238,0))}
main>section{position:relative;z-index:1}

/* depth: a stage leans back a little as it arrives, levels out in the middle of the screen, and leans the other way as it leaves */
.dp33{transform-style:preserve-3d;will-change:transform;transform-origin:50% 50%}

/* ----- 2 · knowledge: the sources float behind the composer; the one it used lights up ----- */

/* ----- 4 · in your systems: the steps on the left, your systems orbiting Koltra on the right ----- */

/* no hard edges between chapters: the day's glow stays inside its stage, and fades out before the floor ends */
.zd30 .ypin .g1{width:40vw;height:40vw;left:30vw;top:8%}
.zd30 .ytun{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%)}
/* the knowledge aura as plain gradients (no blur filter) — the same glow, far cheaper to move */

/* ===== v34 · 2 · knowledge: three sources in a row, a real chat panel ===== */

/* ===== v34 · 4 · improvement: the line stops at each moment, a dotted line shoots up into a card ===== */
.im34 .ystage3{height:clamp(500px,40vw,580px)}
.im34 .ycards34{position:absolute;left:0;right:0;top:0;height:132px}
.im34 .yc34{position:absolute;left:var(--x);top:0;width:min(250px,21vw);transform:translate(-50%,10px);display:grid;gap:10px;padding:14px 16px 15px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 30px 60px -36px rgba(40,30,120,.5);opacity:0;transition:opacity .4s,transform .6s var(--ease)}
.im34 .yc34.on{opacity:1;transform:translate(-50%,0)}
.im34 .yc34 .ytop{display:flex;align-items:center;gap:9px}
.im34 .yc34 .ytop small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.im34 .yc34 .yic3{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--on-bg);color:var(--accent);flex:none}
.im34 .yc34 .yic3 .yi{width:15px;height:15px}
.im34 .yc34 .yic3.yav{background:var(--gain-bg);color:var(--gain);font-size:11px;font-weight:600}
.im34 .yc34>b{font-weight:500;font-size:14px;line-height:1.35;color:var(--fg)}
.im34 .yc34 .yrg{position:absolute;left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px);overflow:visible;pointer-events:none}
.im34 .yc34 .yrg rect{fill:none}
.im34 .yc34 .yrp{stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:0}
.im34 .yc34.on .yrp{opacity:1}
.im34 .yc34.dn .yrp{stroke:var(--on-line)}
.im34 .yc34 .ytk{position:absolute;right:-9px;top:-9px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--btn-bg);transform:scale(.3);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.im34 .yc34 .ytk .yck{width:13px;height:13px;fill:none;stroke:var(--btn-fg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.im34 .yc34.dn .ytk{transform:none;opacity:1}
.im34 .ydl34{position:absolute;left:var(--x);width:2px;margin-left:-1px;height:0;background:repeating-linear-gradient(180deg,var(--accent) 0 5px,transparent 5px 10px);opacity:.9;pointer-events:none}
.im34 .ych3{height:52%;bottom:0}
.im34 .ych3 .ycv3{inset:0}
.im34 .ystop1{stop-opacity:.14}
@media (max-width:900px){
  .im34 .ystage3{height:440px;display:block}
  .im34 .ycards34{height:96px}
  .im34 .yc34,.im34 .ydl34{left:var(--xp)}
  .im34 .yc34{width:22.5%;padding:10px clamp(5px,1.6vw,12px) 11px;gap:7px;border-radius:12px}
  .im34 .yc34>b{display:none}
  .im34 .yc34 .ytop{flex-direction:column;align-items:flex-start;gap:7px}
  /* card labels are 12px at phone widths (the floor below only reaches 901px and up): sentence-case sans, because "IDENTIFIED" in 12px mono is wider than a quarter-width card at 320px; overflow-wrap is the safety net */
  .im34 .yc34 .ytop small{font-family:var(--text);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;white-space:normal;line-height:1.25;overflow-wrap:anywhere}
  .im34 .yc34 .yic3{width:24px;height:24px;border-radius:8px}
  .im34 .yc34 .ytk{width:20px;height:20px;right:-6px;top:-6px}.im34 .yc34 .ytk .yck{width:11px;height:11px}
  .im34 .ych3{position:absolute;height:50%;margin-top:0}
}

/* ===== v35 · the Koltra mark where the purple ball was; the story told in bands; a bigger, scrollable chat ===== */
.ykm{display:block;color:var(--fg)}


/* improvement: the mark travels the line and stays; each passed stretch gets a band with the longer story */
.im35 .yhd3{width:26px;height:26px;margin:-13px 0 0 -13px;background:none;box-shadow:none;border-radius:50%;filter:drop-shadow(0 0 10px rgba(132,104,238,.55)) drop-shadow(0 6px 14px rgba(132,104,238,.35));transition:opacity .3s}
.im35 .yhd3 .ykm{width:26px;height:26px}
.im35 .yhd3::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--accent);opacity:0}
.im35.go .yhd3::before{animation:ring30 1.8s ease-out infinite}
.im35 .ych3{height:50%}
.im35 .ystage3{height:clamp(540px,42vw,620px)}
.im35 .yseg34{position:absolute;left:var(--a);width:calc(var(--b) - var(--a));top:-112px;bottom:0;background:linear-gradient(180deg,rgba(132,104,238,.085),rgba(132,104,238,.015));opacity:0;transform:scaleY(.96);transform-origin:50% 100%;transition:opacity .6s,transform .8s var(--ease);pointer-events:none;z-index:1}
.im35 .yseg34.on{opacity:1;transform:none}
.im35 .yex34{margin:0 10px;padding:10px 12px 11px;border-radius:12px;background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:0 0 0 1px var(--line) inset,0 18px 40px -28px rgba(40,30,120,.4);font-size:12.5px;line-height:1.42;color:var(--fg-2);opacity:0;transform:translateY(6px);transition:opacity .5s .25s,transform .6s var(--ease) .25s}
.im35 .yseg34.on .yex34{opacity:1;transform:none}
.im35 .yex34 small{display:block;margin-bottom:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.im35 .yexm34{display:none}
.im35 .ypd3{z-index:2}
@media (max-width:900px){
  .im35 .ystage3{height:520px}
  .im35 .ych3{height:44%}
  .im35 .yex34{display:none}
  .im35 .yexm34{display:block;position:absolute;z-index:3;left:var(--gut);right:var(--gut);top:112px;padding:12px 14px 13px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;font-size:13px;line-height:1.42;color:var(--fg-2);opacity:0;transition:opacity .4s}
  .im35 .yexm34.on{opacity:1}
  .im35 .yexm34 small{display:block;margin-bottom:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .im35 .yhd3,.im35 .yhd3 .ykm{width:20px;height:20px}
  .im35 .yhd3{margin:-10px 0 0 -10px}
}
/* improvement without JavaScript (or if main.js fails): the cards, the chart's points and mark, and the notes under each stretch show finished, as with reduced motion. The dotted lines and card outlines need measurements from the script and stay out. */
html:not(.js) .im34 .yc34{opacity:1;transform:translate(-50%,0)}
html:not(.js) .im34 .yc34 .ytk{transform:none;opacity:1}
html:not(.js) .im30 .ych3{--p:1}
html:not(.js) .im35 .yhd3{left:97%;top:15%;opacity:1}
html:not(.js) .im35 .yseg34,html:not(.js) .im35 .yex34{opacity:1;transform:none}
html:not(.js) .im35 .yexm34{opacity:1}
/* Pause motion: the scene is drawn finished at once, without the fades */
html.still .im34 .yc34,html.still .im34 .yc34 .ytk,html.still .im35 .yseg34,html.still .im35 .yex34,html.still .im35 .yexm34,html.still .im35 .yhd3{transition:none}

/* knowledge: the Koltra mark as the agent, a bigger panel, a thread you can scroll */

/* ===== v36 · copy editing: a side panel that edits the page's text in place ===== */

/* ===== v37 · the hero: the laptop floats on light — no stage box, no caption ===== */
.hpanel.fstage{background:none;box-shadow:none;border-radius:0;overflow:visible;isolation:auto;padding:clamp(24px,3.5vw,44px) 0 0;margin-top:clamp(36px,5vw,60px);max-width:1180px;gap:0}
.hpanel.fstage::before{content:"";position:absolute;left:50%;top:-10%;width:min(140%,1600px);height:140%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 42%,rgba(147,134,247,.34),rgba(147,134,247,.12) 32%,rgba(147,134,247,0) 60%);z-index:0;pointer-events:none}
.hpanel.fstage::after{content:"";position:absolute;left:50%;bottom:-10%;width:74%;height:20%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(80,60,180,.24),rgba(80,60,180,.07) 55%,transparent);z-index:0;pointer-events:none}
.film{max-width:1040px;perspective:1800px;perspective-origin:50% 10%}
.lap{transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 44px 64px rgba(40,30,120,.30)) drop-shadow(0 10px 20px rgba(23,23,29,.16))}
.lid{box-shadow:0 0 0 1.5px var(--lap-rim) inset,0 0 0 1px rgba(0,0,0,.35),0 0 80px 10px rgba(147,134,247,.18)}
.hero{padding-bottom:clamp(56px,8vw,120px);overflow:visible;overflow-x:clip}
.hero::before{display:none}
@media (max-width:700px){
  .hpanel.fstage{margin-top:28px;padding-top:12px}
  .lap{filter:drop-shadow(0 24px 34px rgba(40,30,120,.3))}
}

/* product cards: a still image, not the film loop */
.pk23 .pkm img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== v38 · two mirrored, static sections: knowledge (words left · chat right) and in your systems (flow left · words right) ===== */
.kn38,.sy38{position:relative;padding-block:clamp(90px,11vw,160px);overflow-x:clip}
.ygrid2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.sy38 .ygrid2{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ygrid2 .ytxt{display:grid;gap:18px;align-content:center;justify-items:start;text-align:left}
.ygrid2 .ytxt h2{font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.04em}
.ygrid2 .ytxt h2 .hl2{color:var(--accent)}
.ygrid2 .ytxt .yp28{max-width:44ch;margin:0}
.ygrid2 .yvis{min-width:0}
@media (max-width:900px){.ygrid2,.sy38 .ygrid2{grid-template-columns:1fr;gap:34px}.sy38 .yvis{order:2}.sy38 .ytxt{order:1}}

/* knowledge · the sources as a list */
.kn38 .ysrcs{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;width:min(100%,420px)}
.kn38 .ysrcs li{display:grid;grid-template-columns:36px minmax(0,1fr) 22px;gap:12px;align-items:center;padding:10px 12px 10px 10px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset}
.kn38 .ysrcs .ytl{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--on-bg)}
.kn38 .ysrcs .ytl .yi{width:17px;height:17px;color:var(--accent)}
.kn38 .ysrcs b{display:block;font-weight:500;font-size:15px;color:var(--fg)}
.kn38 .ysrcs small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:1px}
.kn38 .yok{width:22px;height:22px;border-radius:50%;background:var(--btn-bg);display:grid;place-items:center}
.kn38 .yok .yck{width:12px;height:12px;fill:none;stroke:var(--btn-fg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* knowledge · the chat panel, finished */
.kn38 .ypanel{border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 50px 100px -56px rgba(40,30,120,.5);overflow:hidden;text-align:left}
.kn38 .yph{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 20px 0 22px;border-bottom:1px solid var(--line)}
.kn38 .ywm{display:inline-flex;align-items:center}.kn38 .ywm .wm{height:17px;width:66.5px}
.kn38 .ybiz{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.kn38 .ybiz i{width:7px;height:7px;border-radius:50%;background:var(--gain);box-shadow:0 0 0 3px var(--gain-bg)}
.kn38 .ythr{display:grid;gap:14px;padding:24px 24px 10px}
.kn38 .ymsg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;max-width:88%}
.kn38 .ymsg.yme{grid-template-columns:minmax(0,1fr);justify-self:end;max-width:78%}
.kn38 .ymk{width:32px;height:32px;margin-top:1px}.kn38 .ymk .ykm{width:32px;height:32px}
.kn38 .ybb{padding:12px 16px;border-radius:5px 18px 18px 18px;background:var(--surface-2);font-size:16px;line-height:1.45;color:var(--fg)}
.kn38 .yme .ybb{border-radius:18px 18px 5px 18px;background:var(--on-bg)}
.kn38 .ymsg small{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.kn38 .ybar{margin:12px 16px 16px;height:54px;display:flex;align-items:center;gap:12px;padding:0 10px 0 20px;border-radius:27px;background:var(--bg);box-shadow:0 0 0 1px var(--line-2) inset;font-size:15.5px;color:var(--faint)}
.kn38 .ybar .yin{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kn38 .ybar .ysd{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--muted)}
.kn38 .ybar .ysd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.kn38 .ythr{padding:16px 14px 6px}.kn38 .ymsg{max-width:94%}.kn38 .ymsg.yme{max-width:86%}.kn38 .ybb{font-size:14.5px;padding:9px 13px}.kn38 .yph{padding:0 14px 0 16px;height:48px}}

/* in your systems · the flow canvas */
.sy38 .yflow{position:relative;border-radius:24px;padding:22px 24px 26px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 50px 100px -56px rgba(40,30,120,.5);background-image:radial-gradient(var(--line-2) .8px,transparent .9px);background-size:22px 22px;background-position:11px 11px}
.sy38 .yfh{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.sy38 .yfh .ydot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(132,104,238,.14)}
.sy38 .yfh b{display:block;font-weight:500;font-size:15px;color:var(--fg)}
.sy38 .yfh small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:1px}
.sy38 .ycol{display:grid;justify-items:start;width:min(100%,400px);margin:0 auto}
.sy38 .ynd{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:11px 14px 11px 11px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2) inset,0 14px 30px -22px rgba(40,30,120,.45)}
.sy38 .ynd .ytl{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--on-bg)}
.sy38 .ynd .ytl .yg,.sy38 .ynd .ytl .yi{width:18px;height:18px}
.sy38 .ynd .ytl .yi{color:var(--accent)}
.sy38 .ynd.yin .ytl{background:var(--btn-bg)}.sy38 .ynd.yin .ytl .yi{color:var(--btn-fg)}
.sy38 .ynd .ytx b{display:block;font-weight:500;font-size:14.5px;color:var(--fg);line-height:1.25}
.sy38 .ynd .ytx span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.sy38 .ysb{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 6px;border-radius:99px;background:var(--surface-2);font-size:11.5px;font-weight:500;color:var(--fg-2);white-space:nowrap}
.sy38 .ysb .yg,.sy38 .ysb .yi{width:13px;height:13px}.sy38 .ysb .yi{color:var(--accent)}
.sy38 .yln{display:block;width:2px;height:22px;margin-left:29px;background:var(--line-2);position:relative}
.sy38 .yln::after{content:"";position:absolute;left:50%;bottom:-1px;width:6px;height:6px;margin-left:-3px;border-right:2px solid var(--line-2);border-bottom:2px solid var(--line-2);transform:rotate(45deg);transform-origin:center}
.sy38 .ybr{position:relative;width:100%;display:grid;justify-items:start;gap:6px}
.sy38 .ydia{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:8px;background:var(--on-bg);box-shadow:0 0 0 1px var(--on-line) inset;font-size:12.5px;font-weight:500;color:var(--fg);margin-left:14px;position:relative;z-index:1}
.sy38 .ydia::before,.sy38 .ydia::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--on-bg);box-shadow:0 0 0 1px var(--on-line) inset;transform:rotate(45deg);z-index:-1}
.sy38 .ydia::before{left:-6px}.sy38 .ydia::after{right:-6px}
.sy38 .ytag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.sy38 .ytag.yyes{margin-left:36px}
.sy38 .yarm{position:absolute;left:calc(100% - 196px);top:2px;width:196px;display:grid;gap:4px;justify-items:start}
.sy38 .yarm i{position:absolute;left:-30px;top:14px;width:30px;height:2px;background:var(--line-2)}
.sy38 .yarm i::after{content:"";position:absolute;right:-1px;top:-2px;width:6px;height:6px;border-right:2px solid var(--line-2);border-top:2px solid var(--line-2);transform:rotate(45deg)}
.sy38 .yarm .ytag{color:var(--faint)}
.sy38 .ynd.ysm{grid-template-columns:30px minmax(0,1fr);padding:8px 12px 8px 8px;box-shadow:0 0 0 1px dashed var(--line-2) inset;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px dashed var(--line-2)}
.sy38 .ynd.ysm .ytl{width:30px;height:30px;border-radius:9px;background:var(--surface-2)}
.sy38 .ynd.ysm .ytx b{font-size:12.5px;font-weight:500}
.sy38 .yend2{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 8px;border-radius:99px;background:var(--fg);color:var(--bg);font-size:13.5px;font-weight:500;margin-left:9px}
.sy38 .ykm2{width:26px;height:26px;display:grid;place-items:center}.sy38 .ykm2 .ykm{width:24px;height:24px;color:var(--bg)}
.sy38 .yworks{display:grid;gap:10px;margin-top:8px}
.sy38 .yworks small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.sy38 .ylogos{display:flex;flex-wrap:wrap;gap:8px}
.sy38 .ylg2{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset}
.sy38 .ylg2 .yg{width:18px;height:18px}
@media (max-width:640px){
  .sy38 .yflow{padding:16px 14px 20px}
  .sy38 .yarm{position:static;width:auto;margin:6px 0 0 36px}
  .sy38 .yarm i{display:none}
  .sy38 .ynd{gap:10px}
  .sy38 .ysb{display:none}
}

/* ===== v39 · the thesis: vertical by design ===== */
.th39{position:relative;padding-block:clamp(90px,11vw,160px) clamp(40px,5vw,70px);overflow-x:clip}
.th39 .yhd{display:grid;justify-items:center;text-align:center;gap:16px;max-width:1120px;margin:0 auto}
.th39 h2{font-size:clamp(32px,4.4vw,60px);line-height:1.05;letter-spacing:-.04em}
.th39 h2 .hl2{color:var(--accent)}
.th39 .yp28{max-width:52ch;text-align:center;margin:4px auto 0}
.th39 .ypls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(48px,6vw,80px)}
.th39 .ypl{display:grid;gap:10px;align-content:start;padding-top:22px;border-top:1px solid var(--line-2)}
.th39 .ypl .ytl{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--on-bg);margin-bottom:6px}
.th39 .ypl .ytl .yi{width:19px;height:19px;color:var(--accent)}
.th39 .ypl b{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em;color:var(--fg)}
.th39 .ypl p{font-size:15.5px;line-height:1.6;color:var(--body);max-width:34ch}
@media (max-width:800px){.th39 .ypls{grid-template-columns:1fr;gap:26px}}
/* the hero without the pill */
.hero .lead{max-width:46ch}

/* ===== v40 · product and company pages, built to the home page's standard ===== */

/* page hero: centred words, then (product pages) the product floating on light */
.ph40{position:relative;padding:clamp(128px,15vh,168px) 0 clamp(40px,6vw,90px);overflow-x:clip}
.ph40 .yhd{display:grid;justify-items:center;text-align:center;gap:20px;max-width:900px;margin:0 auto;position:relative;z-index:2}
.ph40 h1{font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:-.04em}
.ph40 h1 .l{display:block}
.ph40 .lead{font-size:clamp(16px,1.35vw,19px);color:var(--body);max-width:46ch;margin:0}
.ph40 .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.ph40 .ctas .btn{height:44px;font-size:14.5px}
.hv40{position:relative;max-width:1080px;margin:clamp(48px,6vw,80px) auto 0;border-radius:22px}
.hv40{container-type:inline-size}
.hv40 img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:22px;border-radius:2.37cqi;box-shadow:0 0 0 1px var(--line),0 60px 120px -60px rgba(40,30,120,.5),0 18px 40px -26px rgba(23,23,29,.22)}
.hg40{position:absolute;left:50%;top:-14%;width:130%;height:130%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 45%,rgba(147,134,247,.32),rgba(147,134,247,.1) 34%,transparent 62%);pointer-events:none;z-index:0}
/* about: the mark as a planet */
.hm40{position:relative;width:clamp(180px,22vw,260px);aspect-ratio:1;margin:clamp(48px,6vw,72px) auto 0;display:grid;place-items:center}
.hm40 .ykm{width:44%;height:44%;position:relative;z-index:2;filter:drop-shadow(0 24px 40px rgba(132,104,238,.45))}
.hm40 span{position:absolute;inset:0;border-radius:50%;border:1px solid var(--on-line)}
.hm40 .hr1{inset:18%;background:radial-gradient(closest-side,rgba(147,134,247,.30),transparent)}
.hm40 .hr2{inset:2%;border-style:dashed;animation:spin30 60s linear infinite}
.hm40 .hr3{inset:-16%;border-color:var(--line)}
@media (prefers-reduced-motion:reduce){.hm40 .hr2{animation:none}}

/* mirrored sections */
.pg40{position:relative;padding-block:clamp(80px,10vw,150px);overflow-x:clip}
.pg40.yflip .ygrid2{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media (max-width:900px){.pg40.yflip .ygrid2{grid-template-columns:1fr}.pg40.yflip .yvis{order:2}.pg40.yflip .ytxt{order:1}}
.pg40 .ytxt .yp28+.yp28{margin-top:-4px}
.pg40.pcx40 .yhd{display:grid;justify-items:center;text-align:center;gap:14px}
.pg40.pcx40 h2{font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.04em}
.pg40.pcx40 h2 .hl2{color:var(--accent)}

/* the panel every visual sits in */
.vp40{border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 50px 100px -56px rgba(40,30,120,.5);padding:20px 22px 22px;text-align:left}
.vph{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.vph .vdot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(132,104,238,.14);flex:none}
.vph b{display:block;font-weight:500;font-size:15px;color:var(--fg)}
.vph small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:1px}
.pl40{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;font-size:11.5px;font-weight:500;white-space:nowrap;flex:none}
.pl40.ok{background:var(--gain-bg);color:var(--gain)}.pl40.pu{background:var(--on-bg);color:var(--accent)}.pl40.at{background:var(--attn-bg);color:var(--attn)}
/* "Example" labels (#11): a tag (.ex41) on the top edge of every demo card, in the corner of the homepage product images, and in a caption (.ex41c) under the product hero images and the 12-week story. Static: no motion, shown without JavaScript. Grey on white is 5.3:1. */
.ex41{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2) inset;font-family:var(--mono);font-size:12px;font-weight:500;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex:none}
.vp40,.ho40,.tm40,.sg40,.kn38 .yvis{position:relative}
.vp40>.ex41,.ho40>.ex41,.tm40>.ex41,.sg40>.ex41,.yflow>.ex41,.lc40>.ex41,.kn38 .yvis>.ex41{position:absolute;top:-11px;right:22px;z-index:3}
.an40>.ex41{justify-self:start}
.pkm>.ex41{position:absolute;top:10px;right:10px;z-index:1}
.ex41c{display:flex;align-items:center;gap:10px;margin:0;font-size:13.5px;line-height:1.4;color:var(--body)}
.hv40 .ex41c{position:relative;z-index:1;justify-content:center;margin-top:16px;color:var(--fg-2)}
/* Caption under the Intelligence layers stack: the 'Built in by Koltra' counts are examples too. */
.ly41c{margin-top:18px}
.tk40{width:20px;height:20px;border-radius:50%;background:var(--btn-bg);display:inline-grid;place-items:center;flex:none}
.tk40 .yck{width:11px;height:11px;fill:none;stroke:var(--btn-fg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tk40.off{background:var(--surface-2);box-shadow:0 0 0 1px var(--line-2) inset}

/* delivery · job library */
.jl40{display:grid}
.jr40{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 2px;border-top:1px solid var(--line)}
.jr40:first-child{border-top:0}
.jr40 .jn b{display:block;font-weight:500;font-size:15px;color:var(--fg)}
.jr40 .jn small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.jr40 .js{display:flex;gap:4px}
.jr40 .js i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2)}
.jr40 .js .yg,.jr40 .js .yi{width:14px;height:14px}.jr40 .js .yi{color:var(--accent)}
/* delivery · rules */
.rl40{display:grid}
.rr40{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-top:1px solid var(--line);font-size:15px;color:var(--fg)}
.rr40:first-child{border-top:0}
.tg40{width:40px;height:24px;border-radius:99px;background:var(--line-2);position:relative;flex:none}
.tg40 i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(23,23,29,.25)}
.tg40.on{background:var(--accent)}.tg40.on i{left:19px}
.hd40{margin-top:14px;padding:14px 14px 12px;border-radius:16px;background:var(--surface-2)}
.hd40 small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.chs40{display:flex;flex-wrap:wrap;gap:6px}
.ch40{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 9px;border-radius:99px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;font-size:13px;color:var(--fg)}
.ch40 .yi{width:14px;height:14px;color:var(--accent)}
/* delivery · handover card */
.ho40{border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 50px 100px -56px rgba(40,30,120,.5);padding:20px 22px 22px;display:grid;gap:16px}
.hoh{display:flex;align-items:center;gap:12px}
.hoh b{display:block;font-weight:500;font-size:15px;color:var(--fg)}.hoh small{display:block;font-size:12.5px;color:var(--muted)}
.hoh .pl40{margin-left:auto}
.ho40 .hoq{margin-block:1.33em;font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.02em;line-height:1.3;text-wrap:wrap;color:var(--fg)}
.hob small,.hon small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.hob ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hob li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--fg-2)}
.hob li .tk40{margin-top:1px}
.hon{padding:14px 16px;border-radius:14px;background:var(--on-bg);box-shadow:0 0 0 1px var(--on-line) inset}
.hon p{font-size:15px;color:var(--fg);font-weight:500}
.hot{display:flex;gap:8px}
.hot span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:99px;font-size:14px;font-weight:500}
.hbp{background:var(--btn-bg);color:var(--btn-fg)}.hbs{box-shadow:0 0 0 1px var(--line-2) inset;color:var(--fg-2)}

/* intelligence · two layers */
.ly40{position:relative;display:grid;gap:0;padding-bottom:6px}
.lc40{border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 40px 80px -50px rgba(40,30,120,.5);padding:18px 20px}
.lc40.ltop{position:relative;z-index:2;width:92%}
.lc40.lbot{width:92%;margin:-26px 0 0 auto;padding-top:44px;background:var(--surface-2)}
.lch{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.lch b{display:block;font-weight:500;font-size:15px;color:var(--fg)}.lch small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.lmk{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gain-bg);color:var(--gain);font-size:12px;font-weight:600;flex:none}
.lmk.lk{background:none}.lmk.lk .ykm{width:30px;height:30px}
.lr40{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;font-size:14.5px;color:var(--fg)}
.lr40 .li{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--on-bg)}.lr40 .li .yi{width:15px;height:15px;color:var(--accent)}
.lr40 em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted)}
/* intelligence · one answer, every channel */
.an40{display:grid;gap:12px}
.an40 .aq{justify-self:end;max-width:80%;padding:11px 15px;border-radius:18px 18px 5px 18px;background:var(--on-bg);font-size:15px;color:var(--fg)}
.an40 .aa{border-radius:22px;background:#17171D;color:#fff;padding:20px 22px;display:grid;gap:10px;box-shadow:0 40px 80px -46px rgba(23,23,29,.6)}
.an40 .aa small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.an40 .aa p{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.02em;line-height:1.3;color:#fff}
.an40 .ab{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.7)}
.an40 .ab i{width:24px;height:24px;border-radius:50%;background:#E6F4EA;color:#1D7A3E;font-style:normal;font-size:10px;font-weight:600;display:grid;place-items:center}
.an40 .acs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cr40{border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;padding:12px 14px;display:grid;gap:6px}
.cr40 .cn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--fg)}.cr40 .cn .yi{width:14px;height:14px;color:var(--accent)}
.cr40 p{font-size:13.5px;line-height:1.45;color:var(--fg-2)}
/* intelligence · gaps */
.gl40{display:grid;gap:8px}
.gr40{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 12px;border-radius:14px;background:var(--surface-2)}
.gr40 .gq{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--attn-bg);color:var(--attn);font-weight:600;font-size:14px}
.gr40 b{display:block;font-weight:500;font-size:14.5px;color:var(--fg)}.gr40 small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.gr40 .gb{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;background:var(--btn-bg);color:var(--btn-fg);font-size:12.5px;font-weight:500;white-space:nowrap}
.gr40.gd{grid-template-columns:28px minmax(0,1fr);background:var(--on-bg);box-shadow:0 0 0 1px var(--on-line) inset}
.gr40.gd .tk40{width:28px;height:28px}
/* intelligence · team thread */
.tm40{border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 50px 100px -56px rgba(40,30,120,.5);padding:16px 20px 20px;display:grid;gap:16px}
.tmh{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:14.5px}.tmh b{font-weight:500;color:var(--fg)}
.tmm{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px}
.tmm b{font-weight:600;font-size:14.5px;color:var(--fg)}.tmm small{font-size:12px;color:var(--faint);margin-left:6px}
.tmm p{font-size:15px;line-height:1.5;color:var(--fg);margin-top:3px}
.tmm .tfr{display:block;margin:6px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.tav{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--gain-bg);color:var(--gain);font-size:12px;font-weight:600}
.tav.tk{background:none}.tav.tk .ykm{width:32px;height:32px}

/* improvement · outcomes */
.ots40{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ot40{border-radius:14px;background:var(--surface-2);padding:12px 12px 13px}
.ot40 small{display:block;font-size:11.5px;color:var(--muted);line-height:1.3;min-height:2.6em}
.ot40 b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.03em;color:var(--fg);margin-top:4px;font-variant-numeric:tabular-nums}
.brs40{display:grid;gap:10px;margin-top:18px}
.br40{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;font-size:13px;color:var(--fg-2)}
.br40 i{display:flex;height:10px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.br40 u{display:block;height:100%}.br40 u.c{background:var(--accent)}.br40 u.h{background:color-mix(in srgb,var(--accent) 35%,var(--surface))}.br40 u.l{background:var(--attn);opacity:.55}
.lg40{display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--muted)}
.lg40 span{display:inline-flex;align-items:center;gap:6px}.lg40 i{width:10px;height:10px;border-radius:3px}
.lg40 i.c{background:var(--accent)}.lg40 i.h{background:color-mix(in srgb,var(--accent) 35%,var(--surface))}.lg40 i.l{background:var(--attn);opacity:.55}
/* improvement · benchmarks */
.bms40{display:grid;gap:18px}
.bmt{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--fg);margin-bottom:8px}
.bmt b{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:500}
.bmr{position:relative;height:10px;border-radius:10px;background:var(--surface-2)}
.bmr .band{position:absolute;top:0;bottom:0;border-radius:10px;background:color-mix(in srgb,var(--accent) 22%,transparent)}
.bmr .dot{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--surface),0 4px 10px rgba(40,30,120,.35)}
.bm40.bad .dot{background:var(--attn)}
.bmx{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:-6px}
/* improvement · suggestion */
.sg40{border-radius:24px;background:var(--surface);box-shadow:0 0 0 1.5px var(--accent) inset,0 50px 100px -56px rgba(40,30,120,.55);padding:22px 24px;display:grid;gap:16px}
.sg40>small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.sg40>p{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.8vw,24px);line-height:1.3;letter-spacing:-.02em;color:var(--fg)}
.sgr{display:grid;gap:8px}
.sgr div{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px;color:var(--fg-2)}
.sgr i{height:7px;border-radius:7px;background:var(--surface-2);overflow:hidden;display:block}.sgr u{display:block;height:100%;border-radius:7px;background:var(--attn)}.sgr u.g{background:var(--gain)}
.sgr em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--fg-2)}
.sgb{display:flex;flex-wrap:wrap;gap:8px}
.sgb>span{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:99px;font-size:14px;font-weight:500;box-shadow:0 0 0 1px var(--line-2) inset;color:var(--fg-2)}
.sgb .ap{background:var(--btn-bg);color:var(--btn-fg);box-shadow:none}.sgb .ap .yck{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sgt{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}.sgt .tav{width:28px;height:28px;border-radius:50%;font-size:10px}
/* improvement · proof */
.pc40{border-radius:18px;background:#17171D;color:#fff;padding:16px 18px 12px;position:relative}
.pch{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pch span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pch b{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:-.03em}.pch b i{font-style:normal;color:#9F8BF7;margin:0 4px}
.pc40 svg{display:block;width:100%;height:auto;margin-top:6px}
.pc40 svg path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.pc40 .o{stroke:rgba(255,255,255,.4)}.pc40 .n{stroke:#9F8BF7}
.pc40 svg line{stroke:#9F8BF7;stroke-dasharray:3 5}.pc40 svg circle{fill:#9F8BF7}
.pcl{position:absolute;left:47%;top:44px;font-size:11px;color:#C9C0FF;background:rgba(159,139,247,.16);padding:3px 8px;border-radius:99px}
.cgs40{display:grid;margin-top:12px}
.cg40{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 2px;border-top:1px solid var(--line);font-size:14.5px;color:var(--fg)}
.cg40:first-child{border-top:0}
.cg40 em{font-style:normal;font-size:13px;font-weight:500}.cg40 em.ok{color:var(--gain)}.cg40 em.mu{color:var(--faint)}

/* about · the stack */
.sk40{display:grid;gap:0;perspective:1200px}
.skl{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 40px 80px -50px rgba(40,30,120,.5);transform:rotateX(14deg);transform-origin:50% 100%;position:relative}
.skl+.skl{margin-top:-10px}
.skl.s1{width:84%;margin-left:auto;z-index:3}.skl.s2{width:92%;margin:-10px auto 0;z-index:2;background:var(--on-bg);box-shadow:0 0 0 1px var(--on-line) inset,0 40px 80px -46px rgba(132,104,238,.5)}.skl.s3{z-index:1;background:var(--surface-2)}
.ski{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;flex:none}
.ski .yi{width:20px;height:20px;color:var(--accent)}.ski .ykm{width:30px;height:30px}
.skl b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.02em;color:var(--fg)}
.skl small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
/* about · principles */
.prs40{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(40px,5vw,64px)}
.pr40{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:1px solid var(--line-2)}
.pr40 b{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.02em;color:var(--fg);line-height:1.2}
.pr40 p{font-size:15px;line-height:1.55;color:var(--body)}
@media (max-width:900px){.prs40{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.prs40{grid-template-columns:1fr}}
/* about · timeline (also used on contact) */
.tls40{position:relative;display:grid;gap:22px;padding-left:4px}
.tls40::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 20%,transparent))}
.tl40{display:grid;grid-template-columns:16px minmax(0,1fr);gap:18px;position:relative}
.tld{width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 3px var(--accent) inset;margin-top:3px;position:relative;z-index:1}
.tl40 b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.02em;color:var(--fg)}
.tl40 p{font-size:15px;line-height:1.55;color:var(--body);margin-top:3px}
.vp40 .tls40{margin-top:6px}
.tmline{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.025em;line-height:1.35;color:var(--fg);max-width:34ch;text-align:center}

/* blog */
.ph40.pbl,.ph40.pct{padding-bottom:clamp(20px,3vw,40px)}
.bl40{padding-top:clamp(20px,3vw,40px)}
.cv40{position:relative;display:block;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:radial-gradient(70% 90% at 25% 20%,rgba(147,134,247,.55),transparent 70%),radial-gradient(60% 70% at 85% 90%,rgba(132,104,238,.45),transparent 70%),linear-gradient(160deg,#F1EEFF,#E2DCFA);box-shadow:0 0 0 1px var(--line) inset}
.cv40.cv2{background:radial-gradient(70% 90% at 80% 15%,rgba(147,134,247,.55),transparent 70%),radial-gradient(60% 70% at 15% 90%,rgba(132,104,238,.4),transparent 70%),linear-gradient(200deg,#F1EEFF,#E4E0F8)}
.cv40.cv3{background:radial-gradient(80% 90% at 50% 10%,rgba(147,134,247,.5),transparent 70%),radial-gradient(60% 60% at 50% 100%,rgba(132,104,238,.42),transparent 70%),linear-gradient(180deg,#F3F0FF,#E3DEF9)}
.cvk{position:absolute;right:7%;bottom:9%;width:13%;aspect-ratio:1}.cvk .ykm{width:100%;height:100%;color:#17171D}
.cv40 .m1{position:absolute;left:12%;top:20%;width:52%;display:grid;gap:9%}
.cv40 .m1 i{display:block;height:14px;border-radius:7px;background:rgba(255,255,255,.75);box-shadow:0 10px 24px -14px rgba(40,30,120,.5)}
.cv40 .m1 i:nth-child(2){width:78%;margin-left:12%;background:rgba(255,255,255,.92)}.cv40 .m1 i:nth-child(3){width:60%;margin-left:28%;background:#fff}
.cv40 .m2{position:absolute;left:12%;top:22%;display:grid;gap:12px}
.cv40 .m2 i{display:block;width:clamp(90px,16vw,200px);height:clamp(22px,3vw,34px);border-radius:10px;background:rgba(255,255,255,.85);box-shadow:0 10px 24px -14px rgba(40,30,120,.5);position:relative}
.cv40 .m2 i+i::before{content:"";position:absolute;left:18px;top:-12px;width:2px;height:12px;background:rgba(132,104,238,.5)}
.cv40 .m3{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:22%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 20px 50px -20px rgba(40,30,120,.55)}
.cv40 .m3 .yck{width:44%;height:44%;fill:none;stroke:#8468EE;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pm40{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.pm40 i{font-style:normal;color:var(--faint)}
.pm40 .ptag{color:var(--accent);font-weight:500}
.bf40{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(16px,2vw,24px);border-radius:28px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 40px 90px -60px rgba(40,30,120,.5);text-decoration:none;color:inherit;transition:transform .5s var(--ease),box-shadow .5s}
.bf40:hover,.bc40:hover{transform:translateY(-3px)}
.bft{display:grid;gap:14px;align-content:center;padding-right:clamp(0px,2vw,24px)}
.bft h2{font-size:clamp(28px,3.2vw,42px);line-height:1.08;letter-spacing:-.035em;color:var(--fg)}
.bft p,.bct p{font-size:15.5px;line-height:1.6;color:var(--body)}
.bcs40{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(16px,2vw,28px)}
.bc40{display:grid;gap:18px;padding:clamp(14px,1.6vw,20px);border-radius:26px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;text-decoration:none;color:inherit;transition:transform .5s var(--ease)}
.bct{display:grid;gap:10px;padding:0 6px 6px}
.bct h3{font-size:clamp(21px,2vw,26px);line-height:1.15;letter-spacing:-.03em;color:var(--fg)}
@media (max-width:820px){.bf40,.bcs40{grid-template-columns:1fr}}
/* blog post */
.pa40 .yhd{max-width:820px;gap:16px}
.pa40 h1{font-size:clamp(36px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em}
.bk40{font-size:14px;color:var(--muted);text-decoration:none}.bk40:hover{color:var(--fg)}
.pcv40{max-width:980px;margin:clamp(40px,5vw,64px) auto 0}
.pcv40 .cv40{aspect-ratio:21/9;border-radius:24px}
.ar40{padding-top:clamp(40px,5vw,70px)}
.prose40{max-width:680px;margin:0 auto;display:grid;gap:22px}
.prose40 p{font-size:clamp(17px,1.35vw,19px);line-height:1.72;color:var(--fg-2)}
.prose40 h2{font-size:clamp(24px,2.3vw,30px);letter-spacing:-.03em;line-height:1.15;color:var(--fg);margin-top:18px}
.prose40 blockquote{margin:14px 0;padding:22px 0 22px 26px;border-left:3px solid var(--accent);display:grid;grid-template-columns:auto;gap:10px}
.prose40 blockquote .qk{width:26px;height:26px}.prose40 blockquote .qk .ykm{width:26px;height:26px}
.prose40 blockquote p{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.25;letter-spacing:-.03em;color:var(--fg)}
.ae40{max-width:680px;margin:clamp(48px,6vw,72px) auto 0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 22px;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 40px 80px -56px rgba(40,30,120,.5)}
.aek{width:40px;height:40px}.aek .ykm{width:40px;height:40px}
.ae40 b{display:block;font-weight:500;font-size:16px;color:var(--fg)}.ae40 p{font-size:14px;color:var(--muted);margin-top:2px}
@media (max-width:640px){.ae40{grid-template-columns:auto minmax(0,1fr)}.ae40 .btn{grid-column:1/-1;justify-self:start}}
.pos40{max-width:680px;margin:clamp(40px,5vw,56px) auto 0;display:grid;gap:10px}
.pos40>small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.po40{display:grid;gap:3px;padding:16px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.po40 small{font-size:12.5px;color:var(--accent);font-weight:500}.po40 b{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-.02em;color:var(--fg)}
.po40:hover b{color:var(--accent)}

/* contact */
.ct40{padding-top:clamp(20px,3vw,40px)}
.ct40 .ygrid2{align-items:start}
.em40{display:grid;gap:10px;justify-items:start;width:100%;padding:24px 26px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 40px 80px -56px rgba(40,30,120,.5)}
.em40 small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.em40 .ema{font-family:var(--display);font-weight:500;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;color:var(--fg);user-select:all;-webkit-user-select:all;word-break:break-all}
.cp40{appearance:none;border:0;font:inherit;font-size:14px;font-weight:500;height:38px;padding:0 16px;border-radius:99px;background:var(--btn-bg);color:var(--btn-fg);cursor:pointer}
.sd40{margin-top:22px;width:100%}
.sd40>b{display:block;font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.02em;color:var(--fg);margin-bottom:12px}
.sd40 ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sd40 li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--fg-2)}.sd40 li .tk40{margin-top:2px}
.nx40{padding-block:clamp(40px,5vw,70px)}

@media (max-width:640px){
  .ots40{grid-template-columns:repeat(2,minmax(0,1fr))}
  .an40 .acs{grid-template-columns:1fr}
  .br40{grid-template-columns:88px minmax(0,1fr)}
  .sgr div{grid-template-columns:88px minmax(0,1fr) auto}
  .jr40 .js{display:none}
  .lc40.ltop,.lc40.lbot{width:100%}
  .pcl{display:none}
}
.ph40,.pa40{position:relative;z-index:1}main>article{position:relative;z-index:1}


/* ===== accessibility pass ===== */
/* skip link: first Tab stop on every page, shown only when focused */
.skip{position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top,0px));z-index:70;display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:10px;background:var(--fg);color:#fff;font-size:14px;font-weight:500;transform:translateY(-200%);transition:transform .2s}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the closing band: a deeper field so its white text reads at 4.5:1 (3:1 for the heading) */
.end24{background:radial-gradient(80% 70% at 30% 30%,#7A66EA 0%,#5E49DC 45%,#4F3CCB 100%)}
.end24 .ze1{background:rgba(255,255,255,.1)}
.end24 .ze2{background:rgba(185,170,255,.22)}
.end24 p,.end24 .zfine{color:#fff}
.end24 .zfine a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.end24 :focus-visible{outline-color:#fff}
.em40 a.ema:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}

/* legibility floor: nothing that carries information is set below 12px */
@media (max-width:480px){.vph small,.sg40>small{letter-spacing:.02em;text-wrap:balance}.vph{align-items:flex-start}.vph .vdot{margin-top:5px}}
.eyebrow,.foot h2,.zd26 .yclk small,.zd30 .yev .ybx2 small,.kn38 .ysrcs small,.kn38 .ybiz,.kn38 .ymsg small,.im30 .ybig3 small,.im30 .yil,.im34 .yc34 .yic3.yav,.im35 .yex34 small,.im35 .yexm34 small,.sy38 .yfh small,.sy38 .ytag,.sy38 .ysb,.sy38 .yworks small,.vph small,.pl40,.hd40 small,.hob small,.hon small,.lch small,.an40 .aa small,.an40 .ab i,.tmm .tfr,.ot40 small,.bmx,.sg40>small,.sgt .tav,.pch span,.pcl,.pos40>small,.em40 small{font-size:12px}
@media (min-width:901px){.im34 .yc34 .ytop small{font-size:12px}}
@media (max-width:700px){.zd30 .yev .yfx i span{font-size:12px}}

/* hero film: play/pause and a text version, under the laptop */
.fctl{position:relative;z-index:1;margin-top:clamp(16px,2.2vw,26px);text-align:center}
.fbtn,.ftx>summary{display:inline-flex;align-items:center;gap:8px;height:36px;margin:0 4px;padding:0 15px;border:0;border-radius:99px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2) inset;font:500 13.5px/1 var(--text);color:var(--fg-2);cursor:pointer;vertical-align:middle;list-style:none}
.ftx>summary::-webkit-details-marker{display:none}
.fbtn:hover,.ftx>summary:hover{color:var(--fg);background:var(--ghost-hover)}
.fbtn svg,.ftx>summary svg{width:13px;height:13px;flex:none}
.fbtn .fpa,.fbtn.on .fpl{display:none}
.fbtn.on .fpa{display:block}
html:not(.js) .fbtn{display:none}
.ftx{display:inline}
.ftx>summary svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ftx[open]>summary svg{transform:rotate(180deg)}
.ftxb{display:block;max-width:680px;margin:18px auto 0;padding:20px 24px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;text-align:left}
.ftxb p{font-size:14.5px;color:var(--muted)}
.ftxb ol{margin:12px 0 0;padding-left:20px;display:grid;gap:10px}
.ftxb li{font-size:15px;line-height:1.55;color:var(--fg-2)}
.ftxb li b{font-weight:500;color:var(--fg)}

/* one switch for looping motion (footer, and next to the two looping scenes on the homepage) */
.mtg{appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.mtg:hover{color:var(--fg)}
.zd26 .yclk .mtg,.im30 .ybig3 .mtg{pointer-events:auto;margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.zd26 .yclk .mtg{display:block;margin-left:auto}
html:not(.js) .mtg,html:not(.js) .mtgw{display:none!important}
@media (prefers-reduced-motion:reduce){.mtg,.mtgw{display:none!important}}
@media (max-width:900px){.zd26 .yclk .mtg{margin-left:0}}
/* paused by the switch, or off screen: CSS loops hold still */
html.still .end24 .zeb,html.still .hm40 .hr2,html.still .zd30 .yev .ytl::before,html.still .zd30 .yev .ytl::after,html.still .im35 .yhd3::before,
.zoff .zeb,.zoff .hr2,.zoff .ytl::before,.zoff .ytl::after,.zoff .yhd3::before{animation-play-state:paused!important}

/* a day, handled — with reduced motion (or without JavaScript) the seven jobs sit still, finished, in a grid */
.zd26.zd30.ystatic .ypin,html:not(.js) .zd26.zd30 .ypin{display:flex;flex-direction:column;height:auto;overflow:visible}
.zd26.zd30.ystatic .yhud,html:not(.js) .zd26.zd30 .yhud{order:-1;position:relative;inset:auto;width:100%;padding-bottom:0}
.zd26.zd30.ystatic .ytun,html:not(.js) .zd26.zd30 .ytun{position:relative;inset:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px;width:100%;max-width:var(--maxw);margin:clamp(24px,3vw,36px) auto 0;padding-inline:var(--gut);-webkit-mask-image:none;mask-image:none}
.zd26.zd30.ystatic .yfc,.zd26.zd30.ystatic .yrg,.zd26.zd30.ystatic .glow26,html:not(.js) .zd26.zd30 .yfc,html:not(.js) .zd26.zd30 .yrg,html:not(.js) .zd26.zd30 .glow26{display:none}
.zd26.zd30.ystatic .t29 .yev,html:not(.js) .zd26.zd30 .t29 .yev{position:relative;transform:none!important;opacity:1!important;visibility:visible!important;white-space:normal;flex-wrap:wrap;align-items:flex-start;row-gap:10px}
.zd26.zd30.ystatic .yev .yfx,html:not(.js) .zd26.zd30 .yev .yfx{position:static;transform:none;flex-direction:row;flex-wrap:wrap;align-items:center;flex-basis:100%;padding-left:58px}
.zd26.zd30.ystatic .yev .yfx i,html:not(.js) .zd26.zd30 .yev .yfx i{opacity:1;transform:none;transition:none}
.zd26.zd30.ystatic .yfin,html:not(.js) .zd26.zd30 .yfin{position:relative;left:auto;top:auto;transform:none;opacity:1;width:100%;margin:clamp(32px,4vw,52px) auto 0;padding-inline:var(--gut)}
@media (max-width:700px){.zd26.zd30.ystatic .yev .yfx,html:not(.js) .zd26.zd30 .yev .yfx{padding-left:42px}}
/* legal pages (privacy, terms, trust, accessibility): the blog post article, plus sub-headings, lists and contents */
.doc40 section{display:grid;gap:14px;scroll-margin-top:96px}
.doc40 .prose40>section.lgg{gap:22px;padding-top:34px;border-top:1px solid var(--line)}
.doc40 .prose40>section.lgg>section{gap:10px}
.doc40 .prose40 h2{margin-top:0}
.doc40 h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em;line-height:1.25;color:var(--fg)}
.doc40 h4{margin:4px 0 0;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.doc40 ul,.doc40 ol{margin:0;padding-left:22px;display:grid;gap:8px;font-size:clamp(16px,1.25vw,17.5px);line-height:1.6;color:var(--fg-2)}
.doc40 p a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.doc40 .eyebrow{color:var(--muted)}
.doc40 dl{margin:0;display:grid;gap:12px}
.doc40 dt{font-weight:500;color:var(--fg)}
.doc40 dd{margin:2px 0 0;font-size:16px;line-height:1.6;color:var(--body)}
.toc40{display:grid;gap:8px;padding:16px 20px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset}
.prose40 .toc40 p{font-size:15px;line-height:1.5;color:var(--muted)}
.toc40 summary{cursor:pointer;font-weight:500;font-size:15.5px;color:var(--fg)}
.toc40 ol{margin-top:12px;font-size:15px}
.toc40 ul{margin:8px 0 6px;padding-left:18px;gap:6px;font-size:14.5px}
.toc40 a{color:var(--fg-2)}
.toc40 a:hover{color:var(--fg);text-decoration:underline}
.lgend{display:grid;gap:10px;justify-items:start;padding-top:28px;border-top:1px solid var(--line)}
/* footer: legal links in the bottom line */
.legal .legal-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.legal .legal-links a{color:var(--muted)}
.legal .legal-links a:hover{color:var(--fg)}

/* contact form (/contact): the email card's frame, plain fields. Field edges are #8A8A95 (3.4:1 on white) so they
   read as fields (WCAG 1.4.11); errors use the handover red. The honeypot (.cf40h) is off screen and hidden from
   assistive technology. */
.cf40{gap:16px}
.ytxt .cf40 h2{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;line-height:1.6;text-transform:uppercase;color:var(--faint)}
.ct40 .yvis{display:grid;gap:34px}
.ct40 .yvis .sd40{margin-top:0}
.cf40f{display:grid;gap:6px;width:100%}
.cf40f label{font-size:15px;font-weight:500;color:var(--fg)}
.cf40f label span{font-weight:400;color:var(--muted)}
.cf40f input,.cf40f select,.cf40f textarea{width:100%;min-height:46px;margin:0;padding:10px 14px;border:1px solid #8A8A95;border-radius:12px;background:var(--surface);color:var(--fg);font:400 16px/1.5 var(--text)}
.cf40f textarea{min-height:132px;resize:vertical}
.cf40f select{appearance:none;-webkit-appearance:none;padding-right:40px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233D3D47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px}
.cf40f :is(input,select,textarea):focus-visible{outline-offset:2px;border-radius:12px}
.cf40f [aria-invalid="true"]{border-color:var(--hand);box-shadow:0 0 0 1px var(--hand) inset}
.cf40e{font-size:14px;color:var(--hand)}
.cf40e:empty{display:none}
.cf40h{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cf40s{width:100%;font-size:15px;color:var(--gain)}
.cf40s:not(:empty){padding:12px 14px;border-radius:12px;background:var(--gain-bg)}
.cf40s.bad{color:var(--hand)}
.cf40s.bad:not(:empty){background:var(--hand-bg)}
.cf40a{display:flex;flex-wrap:wrap;gap:10px}
.cf40a .btn[aria-disabled="true"]{opacity:.7;cursor:progress}
.ph40 .lead a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

/* analytics consent banner: a bar fixed to the bottom of the screen (shown by consent.js on a first visit, or from
   "Analytics preferences" in the footer). While it shows, html.cs-open reserves its height (--cs-h, set by consent.js):
   the page can scroll past it, focus scrolls clear of it, and the homepage chapter pill moves up above it. Not printed. */
.cs40{position:fixed;left:0;right:0;bottom:0;z-index:45;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}
.cs40:focus{outline:none}
.cs40 .wrap{max-width:calc(900px + 2 * var(--gut))}
.cs40b{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding:18px 22px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,0 24px 60px -28px rgba(23,23,29,.45),0 4px 14px -6px rgba(23,23,29,.12)}
.cs40:focus-visible .cs40b{outline:2px solid var(--signal);outline-offset:3px}
.cs40x{display:grid;gap:2px;flex:1 1 320px}
.cs40t{font-weight:500;color:var(--fg)}
.cs40x p+p{font-size:14.5px;line-height:1.5;color:var(--body);max-width:68ch}
.cs40x a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.cs40a{display:flex;flex-wrap:wrap;gap:10px}
html.cs-open:not(.cs-flow){scroll-padding-bottom:calc(var(--cs-h,0px) + 16px)}
html.cs-open:not(.cs-flow) body{padding-bottom:var(--cs-h,0px)}
html.cs-open:not(.cs-flow) .chp28{bottom:calc(var(--cs-h,0px) + 6px)}
/* where the bar would take more than 40% of the screen (consent.js): back in the page flow above the footer */
html.cs-flow .cs40{position:relative;z-index:1;padding-block:clamp(24px,3vw,36px);pointer-events:auto}
@media print{.cs40{display:none!important}html.cs-open:not(.cs-flow) body{padding-bottom:0}}
@media (max-width:560px){.cs40b{padding:16px;gap:12px;border-radius:18px}.cs40x{flex-basis:100%}.cs40a{width:100%}.cs40a .btn{flex:1 1 0;justify-content:center}}
@media (prefers-reduced-motion:no-preference){
  html:not(.still) .cs40b{transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
  @starting-style{html:not(.still) .cs40b{opacity:0;transform:translateY(16px)}}
}
.legal .cpref{appearance:none;border:0;background:none;padding:0;font:inherit;color:var(--muted);cursor:pointer}
.legal .cpref:hover{color:var(--fg)}
/* about · team (photo, name, role, summary, LinkedIn; side by side on phones), the company facts, and the four ways to work with Koltra */
.pcx40 h2.eyebrow{font-size:12px;line-height:1.6;letter-spacing:.16em}
.tm41{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.tp41{display:grid;gap:8px;align-content:start;padding:24px;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset}
.tp41 img{width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--surface-2);margin-bottom:8px}
.tp41 h3,.wk41 h3{font-weight:500;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.02em;line-height:1.2;color:var(--fg)}
.tp41 p{font-size:15px;line-height:1.55;color:var(--body)}
.tp41 .lnk23,.wk41 .lnk23{justify-self:start;margin-top:4px}
@media (max-width:900px){.tm41{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tm41{grid-template-columns:1fr}}
@media (max-width:560px){.tp41{grid-template-columns:64px minmax(0,1fr);column-gap:16px;row-gap:6px;padding:20px}.tp41 img{width:64px;height:64px;grid-row:span 2;margin:0;align-self:center}.tp41 h3{align-self:end}.tp41 .eyebrow{align-self:start}.tp41 p,.tp41 .lnk23{grid-column:1/-1}.tp41 p{margin-top:6px}}
.fx41{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;justify-content:center}
a.ch40{color:var(--fg)}
a.ch40:hover{box-shadow:0 0 0 1px var(--line-2) inset}
/* product status ("Live with pilots") beside the product name */
.st41{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px}
.pkt .st41{justify-content:flex-start}
/* neutral tool icons (your calendar, CRM, accounting system, team chat) where brand marks were */
.hoh>.yi{width:22px;height:22px;flex:none;color:var(--accent)}
.tmh .yi{width:18px;height:18px;color:var(--accent)}
.sy38 .ynd.ysm .ytl .yi{width:15px;height:15px}
/* footer: trademark line under the legal row */
.tmk41{margin-top:10px;font-size:13px;color:var(--faint)}
/* in-page navigation during a concierge call (src/scripts/routing.js, Astro's router): it announces each new page's
   title in .astro-route-announcer (aria-live), which is read, not shown; and the new page replaces the old one at
   once, as on a page load, with no view-transition animation (none to hold for reduced motion or Pause motion) */
.astro-route-announcer{position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}

/* the concierge (src/scripts/concierge.js): the launcher at the bottom right, and the conversation panel it opens,
   a card there (a sheet along the bottom on phones, never taller than 60% of the screen, so the page the agent shows
   stays in view). The nav stays clear above both, and while the consent bar is fixed to the bottom
   (html.cs-open:not(.cs-flow)) both sit above it. The launcher needs main.js (html.js); without it the "Talk to
   Koltra" buttons are plain links to /contact. The orb is the panel's state: it breathes while listening, a light
   turns round it while thinking, and while the agent speaks it follows its voice (--lv, 0 to 1, set by the script);
   all of that holds still under reduced motion and Pause motion (html.still). */
:root{--kc-r:24px;--kc-b:calc(24px + env(safe-area-inset-bottom,0px));--kc-top:calc(72px + env(safe-area-inset-top,0px) + 12px)}
html.cs-open:not(.cs-flow){--kc-b:calc(var(--cs-h,0px) + 12px)}
/* the launcher shows once consent.js has placed the bar or found it isn't needed (html.cs-done; main.js sets it at
   load if consent.js didn't): until then it is laid out but hidden, so on a first visit it doesn't appear at the
   bottom and then jump up above the bar */
html.js:not(.cs-done) .kc-go{visibility:hidden}
/* the end of every page keeps room for the launcher, so the footer's last line and Pause motion are never under it:
   they end 12px above it (while the bar is fixed to the bottom, body's padding already keeps the bar's height) */
@media screen{
  html.js footer{padding-bottom:calc(var(--kc-b) + 60px)}
  html.js.cs-open:not(.cs-flow) footer{padding-bottom:72px}
}
/* without JavaScript there is no launcher, and no empty "Talk to Koltra" landmark either; but a conversation's panel
   (in the dock, concierge.js) stays should main.js fail during it, so the visitor can still end it */
html:not(.js) .kc-dock:not(:has(.kc)){display:none}
.kc-go{position:fixed;right:var(--kc-r);bottom:var(--kc-b);z-index:48;display:none;align-items:center;gap:10px;height:48px;padding:0 18px 0 8px;border-radius:99px;background:var(--surface);color:var(--fg);font-size:14.5px;font-weight:500;letter-spacing:-.005em;box-shadow:0 0 0 1px var(--line-2) inset,0 18px 40px -22px rgba(23,23,29,.45),0 2px 8px -3px rgba(23,23,29,.1);transition:box-shadow .25s,transform .25s var(--ease)}
html.js .kc-go{display:inline-flex}
html.js .kc-go[hidden]{display:none}
.kc-go:hover{box-shadow:0 0 0 1px var(--on-line) inset,0 22px 44px -22px rgba(115,82,220,.5),0 2px 8px -3px rgba(23,23,29,.1);transform:translateY(-1px)}
.kc-go:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:99px}
.kc-go .kc-orb{width:32px;height:32px;display:grid;place-items:center;color:#fff}
.kc-go .kc-orb svg{width:16px;height:16px;position:relative}
.kc-orb{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#D9D2FF 0,#9C88F6 30%,#7352DC 62%,#4A3AC2 100%);box-shadow:inset 0 -4px 10px rgba(40,22,120,.35),0 6px 16px -6px rgba(115,82,220,.6)}
.kc .kc-orb{transform:scale(calc(1 + var(--lv,0) * .14));transition:filter .4s,opacity .4s}
.kc .kc-orb::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(closest-side,rgba(139,111,234,.42),rgba(139,111,234,0));opacity:calc(.25 + var(--lv,0) * .75);transform:scale(calc(.92 + var(--lv,0) * .4))}
.kc .kc-orb i{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.kc .kc-orb i::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,0) 0 58%,rgba(255,255,255,.7) 80%,rgba(255,255,255,0) 94%);opacity:0;transition:opacity .3s}
.kc[data-act="thinking"] .kc-orb i::after{opacity:1;animation:kc-turn 1.5s linear infinite}
.kc[data-act="listening"] .kc-orb{animation:kc-breathe 4.4s ease-in-out infinite}
.kc[data-phase="connecting"] .kc-orb::before{animation:kc-pulse 1.8s ease-in-out infinite}
.kc[data-phase="blocked"] .kc-orb,.kc[data-phase="error"] .kc-orb,.kc[data-phase="ended"] .kc-orb{filter:grayscale(1);opacity:.45}
@keyframes kc-turn{to{transform:rotate(1turn)}}
@keyframes kc-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes kc-pulse{0%,100%{opacity:.15;transform:scale(.88)}50%{opacity:.75;transform:scale(1.14)}}

.kc{position:fixed;right:var(--kc-r);bottom:var(--kc-b);z-index:48;width:360px;max-width:calc(100vw - 2 * var(--kc-r));max-height:calc(100vh - var(--kc-b) - var(--kc-top));display:flex;flex-direction:column;border-radius:22px;background:var(--surface);color:var(--fg);box-shadow:0 0 0 1px var(--line) inset,0 32px 72px -32px rgba(23,23,29,.45),0 6px 18px -8px rgba(23,23,29,.14);overflow:hidden;font-size:15px;line-height:1.5}
@supports (height:1dvh){.kc{max-height:calc(100dvh - var(--kc-b) - var(--kc-top))}}
.kc[hidden],.kc [hidden]{display:none!important}
.kc-hd{flex:none;display:flex;align-items:center;gap:12px;padding:14px 12px 10px 16px}
.kc-id{flex:1;min-width:0}
.kc-name{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.02em;line-height:1.25}
.kc-st{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);line-height:1.5;margin-top:1px}
.kc[data-phase="blocked"] .kc-st,.kc[data-phase="error"] .kc-st,.kc[data-phase="ended"] .kc-st{color:var(--muted)}
.kc-x,.kc-lt,.kc-b,.kc-end,.kc-in button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kc-x:focus-visible,.kc-lt:focus-visible,.kc-b:focus-visible,.kc-end:focus-visible,.kc-in button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.kc-x{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--fg-2);transition:background .2s,color .2s}
.kc-x:hover{background:var(--chip-bg);color:var(--fg)}
.kc-x svg{width:16px;height:16px}
.kc-bd{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:14px;padding:4px 18px 16px}
.kc-cap{min-height:5.6em}
.kc-say{font-family:var(--display);font-size:16.5px;line-height:1.5;letter-spacing:-.012em;color:var(--fg)}
.kc-say.kc-ph{color:var(--muted)}
.kc-you{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--body)}
.kc-you.kc-live .kc-yt{color:var(--muted)}
.kc-who{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:8px}
.kc-msg{display:grid;gap:4px;padding-top:2px}
.kc-mt{font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.02em;line-height:1.3}
.kc-md{font-size:14.5px;line-height:1.5;color:var(--body)}
.kc-ma{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kc-now{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;padding:8px 12px 9px 11px;border-radius:12px;background:var(--on-bg);box-shadow:0 0 0 1px var(--on-line) inset;font-size:13.5px;line-height:1.35;color:var(--fg)}
.kc-now svg{grid-row:span 2;width:16px;height:16px;color:var(--hl0)}
.kc-nl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hl0);line-height:1.6}
.kc-nt{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:500}
.kc-log{padding-top:14px;border-top:1px solid var(--line)}
.kc[data-mode="chat"] .kc-log{padding-top:0;border-top:0}
.kc-log ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kc-e p{font-size:14.5px;line-height:1.5;color:var(--fg-2);overflow-wrap:anywhere}
.kc-e .kc-who{display:block;margin:0 0 2px}
.kc-e-you{justify-self:end;max-width:86%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--chip-bg)}
.kc-e-you p{color:var(--fg)}
.kc-e-page p{font-size:12.5px;color:var(--muted)}
.kc-in{flex:none;display:flex;align-items:center;gap:8px;padding:0 12px 12px 14px}
.kc-in input{flex:1;min-width:0;height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--surface-2);box-shadow:0 0 0 1px var(--line-2) inset;font:inherit;font-size:16px;color:var(--fg)}
.kc-in input::placeholder{color:var(--muted);opacity:1}
.kc-in input:focus-visible{outline:2px solid var(--signal);outline-offset:1px;border-radius:12px}
.kc-in button{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--btn-bg);color:var(--btn-fg);transition:background .2s}
.kc-in button:hover{background:var(--btn-hover)}
.kc-in button svg{width:16px;height:16px}
.kc-ai{flex:none;margin:0;padding:0 14px 8px;font-size:12px;line-height:1.45;color:var(--muted)}
.kc-ai a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kc-ai a:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:2px}
.kc-ft{flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px 12px 10px;border-top:1px solid var(--line)}
.kc-lt{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:10px;font-size:13.5px;color:var(--fg-2);transition:background .2s,color .2s}
.kc-lt:hover{background:var(--chip-bg);color:var(--fg)}
.kc-lt svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.kc-lt[aria-expanded="false"] svg{transform:rotate(180deg)}
.kc-ctl{display:flex;align-items:center;gap:8px;margin-left:auto}
.kc-b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface-2);color:var(--fg);box-shadow:0 0 0 1px var(--line) inset;transition:background .2s,color .2s}
.kc-b:hover{background:var(--cover)}
.kc-b svg{width:20px;height:20px}
.kc-mute .kc-off,.kc-mute[aria-pressed="true"] .kc-on{display:none}
.kc-mute[aria-pressed="true"] .kc-off{display:block}
.kc-mute[aria-pressed="true"]{background:var(--fg);color:#fff;box-shadow:none}
.kc-key[aria-pressed="true"]{background:var(--on-bg);color:var(--hl0);box-shadow:0 0 0 1px var(--on-line) inset}
.kc-end{height:40px;padding:0 16px;border-radius:12px;font-size:14px;font-weight:500;color:var(--hand);background:var(--hand-bg);transition:background .2s,color .2s}
.kc-end:hover{background:var(--hand);color:#fff}
@media (max-width:560px){
  :root{--kc-r:16px}
  .kc-go{height:46px;padding:0 16px 0 7px;font-size:14px}
  .kc{left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:22px 22px 0 0;max-height:min(60vh,calc(100vh - var(--kc-top)));padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 0 0 1px var(--line) inset,0 -20px 50px -28px rgba(23,23,29,.4)}
  html.cs-open:not(.cs-flow) .kc{left:8px;right:8px;bottom:calc(var(--cs-h,0px) + 8px);border-radius:22px;padding-bottom:0;max-height:min(60vh,calc(100vh - var(--cs-h,0px) - 8px - var(--kc-top)))}
  @supports (height:1dvh){
    .kc{max-height:min(60dvh,calc(100dvh - var(--kc-top)))}
    html.cs-open:not(.cs-flow) .kc{max-height:min(60dvh,calc(100dvh - var(--cs-h,0px) - 8px - var(--kc-top)))}
  }
  .kc-hd{padding-top:12px}
  .kc-cap{min-height:4.5em}
  /* the page keeps room for the sheet at its end, so nothing stays under it, and focus scrolls clear of it */
  html.kc-open body{padding-bottom:var(--kc-h,0px)}
  html.kc-open.cs-open:not(.cs-flow) body{padding-bottom:calc(var(--cs-h,0px) + var(--kc-h,0px) + 8px)}
  html.kc-open{scroll-padding-bottom:calc(var(--kc-h,0px) + 16px)}
  html.kc-open.cs-open:not(.cs-flow){scroll-padding-bottom:calc(var(--cs-h,0px) + var(--kc-h,0px) + 24px)}
}
@media print{.kc-go,.kc{display:none!important}}
html.still .kc *,html.still .kc *::before,html.still .kc *::after,html.still .kc .kc-orb{animation:none!important}
html.still .kc .kc-orb,html.still .kc .kc-orb::before{transform:none}
@media (prefers-reduced-motion:reduce){
  .kc *,.kc *::before,.kc *::after,.kc .kc-orb,.kc-go{animation:none!important;transition:none!important}
  .kc .kc-orb,.kc .kc-orb::before,.kc-go:hover{transform:none}
}