/* ColorLoop v3 kit (9 Oct 2026): the shared design system of the offer pages, privacy and the Academy.
   Markup: tools/page_kit.py (K.*). Motion: pages-v3.js (window.KT). Loaded after pages.css and pages-fx.css.
   Rules: the HTML is the final frame; motion only hides it while it waits to play (html.kt-js, motion allowed,
   not paused, no fallback). Nothing here repeats by itself. Text colors stay AA on their grounds. */

/* ---------------------------------------------------------------- tokens */
:root{
  --kt-ink:#141416;--kt-btn:#1D1D1F;--kt-paper:#f4f3ec;--kt-white:#fff;--kt-card:#f7f7f4;--kt-dark:#141416;
  --kt-line:rgba(22,24,22,.13);--kt-line-strong:rgba(22,24,22,.4);
  --kt-t2:#33393a;--kt-t3:#4b5052;--kt-t4:#5b6064;--kt-d1:#f5f5f7;--kt-d2:rgba(255,255,255,.72);
  --kt-blue:#19AAE3;--kt-pink:#FAA1DB;--kt-red:#F50C0C;--kt-yellow:#FBCB05;--kt-green:#64A932;
  --kt-blue-t:#e3f3fb;--kt-pink-t:#fbe3f1;--kt-red-t:#fde3e1;--kt-yellow-t:#fdf3c4;--kt-green-t:#e8f3df;
  --kt-blue-d:#0b7fb3;--kt-pink-d:#c2468f;--kt-red-d:#c90808;--kt-yellow-d:#9a7400;--kt-green-d:#3f7f1d;
  --kt-out:cubic-bezier(.16,1,.3,1);--kt-io:cubic-bezier(.65,0,.35,1);--kt-pop:cubic-bezier(.34,1.56,.64,1);
  --kt-shadow:0 24px 48px -24px rgba(20,22,24,.35);
  --kt-head:64px;--kt-top:calc(var(--kt-head) + 24px)
}
@media (max-width:760px){:root{--kt-head:80px}}
.kt-acc-ink{--kt-acc:var(--kt-ink);--kt-acc-t:var(--kt-paper);--kt-acc-d:var(--kt-ink)}
.kt-acc-blue{--kt-acc:var(--kt-blue);--kt-acc-t:var(--kt-blue-t);--kt-acc-d:var(--kt-blue-d)}
.kt-acc-pink{--kt-acc:var(--kt-pink);--kt-acc-t:var(--kt-pink-t);--kt-acc-d:var(--kt-pink-d)}
.kt-acc-red{--kt-acc:var(--kt-red);--kt-acc-t:var(--kt-red-t);--kt-acc-d:var(--kt-red-d)}
.kt-acc-yellow{--kt-acc:var(--kt-yellow);--kt-acc-t:var(--kt-yellow-t);--kt-acc-d:var(--kt-yellow-d)}
.kt-acc-green{--kt-acc:var(--kt-green);--kt-acc-t:var(--kt-green-t);--kt-acc-d:var(--kt-green-d)}

/* ---------------------------------------------------------------- page scope */
body.kt{background:var(--kt-paper);color:var(--kt-ink)}
body.kt main{overflow-x:clip}
body.kt .mono{font-variant-numeric:tabular-nums}
/* pills everywhere outside the home hero: primary #1D1D1F, secondary a ghost outline */
body.kt main .button{border-radius:999px;justify-content:center;gap:10px;transform:none}
body.kt main .button:not(.ghost):not(.ck-start){background:var(--kt-btn);border-color:var(--kt-btn);color:#fff}
body.kt main .button:not(.ghost):not(.ck-start):hover{background:#000;border-color:#000;box-shadow:none;transform:none}
body.kt main .button.ghost{background:transparent;color:var(--kt-ink);border:1px solid var(--kt-ink)}
body.kt main .button.ghost:hover{background:var(--kt-ink);color:#fff;box-shadow:none;transform:none}
body.kt main .button:not(.ck-start){min-height:44px;padding:10px 22px;font-size:16px;font-weight:500;line-height:1.2}
body.kt main .pg-actions .button{min-height:44px;padding:0 22px}
.kt-dark .button:not(.ghost):not(.ck-start){background:#fff!important;border-color:#fff!important;color:var(--kt-ink)!important}
.kt-dark .button.ghost{color:#fff!important;border-color:rgba(255,255,255,.7)!important}
.kt-dark .button.ghost:hover{background:#fff!important;color:var(--kt-ink)!important}
/* text links: "Explore ..." with an underline and an arrow */
.kt-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:500;color:inherit;text-decoration:none}
.kt-link span:first-child,.kt-link>:not(svg){border-bottom:1.5px solid currentColor}
.kt-link::after{content:"→";transition:transform .2s var(--kt-out)}
.kt-link:hover::after{transform:translateX(3px)}
.kt-note{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--kt-t4);max-width:72ch}
.kt-dark .kt-note{color:var(--kt-d2)}

/* ---------------------------------------------------------------- hero */
.kt-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--kt-paper);padding:clamp(40px,6vw,88px) var(--pg-gut) clamp(40px,5vw,72px)}
/* one halftone field in the page accent, top right, faded out before the text column */
.kt-hero::before{content:"";position:absolute;z-index:-1;top:0;right:0;width:60%;height:min(100%,720px);pointer-events:none;
  background:url(assets/kt/halftone-ink.svg) right top/auto no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.kt-hero.kt-acc-blue::before{background-image:url(assets/kt/halftone-blue.svg)}
.kt-hero.kt-acc-pink::before{background-image:url(assets/kt/halftone-pink.svg)}
.kt-hero.kt-acc-yellow::before{background-image:url(assets/kt/halftone-yellow.svg)}
.kt-hero.kt-acc-green::before{background-image:url(assets/kt/halftone-green.svg)}
.kt-hero.kt-acc-red::before{background-image:url(assets/kt/halftone-ink.svg)}
.kt-hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 clamp(28px,4.4vw,64px)}
.kt-eyebrow{display:flex;align-items:center;gap:12px;margin:0;min-width:0}
.kt-reg{flex:none;width:28px;height:28px;color:var(--kt-ink)}
.kt-eyebrow .mono{font-size:12px;letter-spacing:.16em;color:var(--kt-t3);line-height:1.3}
.kt-logo{display:block;height:34px;width:auto}
.kt-hero-top #motion-toggle{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:40px;padding:0 16px;border:1px solid var(--kt-line);border-radius:999px;background:rgba(255,255,255,.72);
  font:500 12px/1 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--kt-ink);cursor:pointer;white-space:nowrap}
.kt-hero-top #motion-toggle:hover{background:#fff;border-color:var(--kt-line-strong)}
.kt-hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.kt-hero-text{grid-column:1/span 6;min-width:0}
.kt-hero-visual{grid-column:7/span 6;min-width:0;position:relative}
.kt-hero h1{margin:0;font-size:clamp(48px,6.6vw,104px);font-weight:600;line-height:.95;letter-spacing:-.06em;max-width:12ch;text-wrap:balance;color:var(--kt-ink)}
.kt-hero h1>span:not([class]),.kt-hero h1 .kt-dot{color:var(--kt-red)}
.kt-hero .kt-lead{margin:clamp(20px,2.4vw,32px) 0 0;max-width:36ch;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--kt-t2);text-wrap:pretty}
.kt-hero-actions{margin-top:clamp(24px,3vw,36px)}
/* hero pills at 52 px: "main" matches the specificity of the 44 px .pg-actions rule above (the hero actions are a
   .pg-actions too), and this rule comes later, so it wins on every kit hero */
body.kt main .kt-hero-actions .button{min-height:52px;padding:0 26px}
.kt-hero-note{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--kt-t4)}
@media (max-width:900px){
  .kt-hero-text,.kt-hero-visual{grid-column:1/-1}
  .kt-hero-visual{margin-top:clamp(32px,6vw,48px)}
  .kt-hero h1{max-width:14ch}
}
@media (max-width:760px){
  .kt-hero{padding-top:20px;padding-bottom:40px}
  .kt-hero::before{width:72%;height:150px;-webkit-mask-image:linear-gradient(205deg,#000 5%,transparent 62%);mask-image:linear-gradient(205deg,#000 5%,transparent 62%);opacity:.75}   /* phones: behind the eyebrow row only */
  .kt-hero-top{margin-bottom:22px}
  .kt-logo{height:26px}
  .kt-hero-top #motion-toggle{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;font-size:15px;letter-spacing:0}
  .kt-hero-top #motion-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .kt-hero .kt-lead{margin-top:16px}
  .kt-hero-actions{margin-top:22px}
  .kt-hero-visual{max-height:46vh;margin-top:32px}
  .kt-hero-visual>*{max-height:46vh}
}
@media (max-width:420px){body.kt .kt-hero-actions{gap:10px}body.kt .kt-hero-actions .button{padding:0 16px;flex:1 1 auto}}

/* ---------------------------------------------------------------- sections */
.kt-sec{position:relative;padding:clamp(72px,9vw,128px) var(--pg-gut);border-top:0}
.kt-white{background:#fff;color:var(--kt-ink)}
.kt-paper{background:var(--kt-paper);color:var(--kt-ink)}
.kt-dark{background:var(--kt-dark);color:var(--kt-d1)}
/* kicker: the home's component, 12px mono everywhere, on dark too (the closing keeps its own) */
body.kt .section-kicker:not(#contact .section-kicker){display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:1px solid var(--kt-line-strong);padding-top:16px;margin:0 0 clamp(28px,4vw,48px)}
body.kt .section-kicker:not(#contact .section-kicker) .mono{display:inline;margin:0;font-size:12px;letter-spacing:.16em;line-height:1.4;color:var(--kt-t3)}
/* dark bands: the same :not() as the light rule above, so this variant outranks it (it used to lose: grey text at 2.3:1) */
body.kt .kt-dark .section-kicker:not(#contact .section-kicker){border-top-color:rgba(255,255,255,.2)}
body.kt .kt-dark .section-kicker:not(#contact .section-kicker) .mono{color:#a3a7ab}
@media (max-width:479px){body.kt .section-kicker:not(#contact .section-kicker)>.mono:last-child:not(:first-child){display:none}}
/* section header: H2 on columns 1 to 7, the lead on 8 to 12, bottom-aligned (the home's savings pattern) */
.kt-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin:0 0 clamp(36px,5vw,72px)}
.kt-head h2{grid-column:1/span 7;margin:0;font-size:clamp(36px,4.8vw,72px);font-weight:600;line-height:.98;letter-spacing:-.055em;text-wrap:balance;color:inherit}
.kt-head-solo h2{grid-column:1/span 9}
.kt-head .kt-lead{grid-column:8/span 5;margin:0;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--kt-t2);text-wrap:pretty}
.kt-head h2>span:not([class]),.kt-head h2 .kt-dot,.kt-faq h2 .kt-dot{color:var(--kt-red)}
.kt-head h2[data-dot="green"] .kt-dot{color:var(--kt-green)}
.kt-head h2[data-dot="blue"] .kt-dot{color:var(--kt-blue-d)}
.kt-head h2[data-dot="pink"] .kt-dot{color:var(--kt-pink-d)}
.kt-head h2[data-dot="yellow"] .kt-dot{color:var(--kt-yellow-d)}
.kt-head h2[data-dot="ink"] .kt-dot{color:var(--kt-ink)}
.kt-dark .kt-head h2 .kt-dot,.kt-dark .kt-head h2>span:not([class]),.kt-dark h2 .kt-dot{color:var(--kt-yellow)}
.kt-dark .kt-head h2[data-dot="pink"] .kt-dot{color:var(--kt-pink)}
.kt-dark .kt-head h2[data-dot="blue"] .kt-dot{color:var(--kt-blue)}
.kt-dark .kt-head h2[data-dot="green"] .kt-dot{color:var(--kt-green)}
.kt-dark .kt-head h2[data-dot="red"] .kt-dot{color:var(--kt-red)}
.kt-dark .kt-lead{color:var(--kt-d2)}
@media (max-width:900px){.kt-head{grid-template-columns:minmax(0,1fr)}.kt-head h2,.kt-head .kt-lead,.kt-head-solo h2{grid-column:1}.kt-head .kt-lead{margin-top:18px}}
.kt-sec h3{color:inherit}

/* ---------------------------------------------------------------- numbers */
.kt-figs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px;border-top:1px solid var(--kt-line-strong)}
.kt-fig{container-type:inline-size;margin:0;padding-top:24px;display:flex;flex-direction:column;min-width:0;color:var(--kt-ink)}
.kt-dark .kt-fig{color:var(--kt-d1)}
.kt-fig small{font-size:clamp(17px,1.4vw,20px);font-weight:500;line-height:1.3;color:var(--kt-t2)}
.kt-fig .kt-num{display:block;margin:4px 0 12px;font-size:min(clamp(56px,7vw,112px),19cqi);font-weight:600;line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kt-fig span{font-size:clamp(18px,1.6vw,24px);font-weight:600;line-height:1.25;letter-spacing:-.02em}
.kt-src{margin:clamp(20px,2.4vw,32px) 0 0;max-width:72ch;font-size:14px;line-height:1.55;color:var(--kt-t4)}
.kt-dark .kt-figs{border-top-color:rgba(255,255,255,.2)}
.kt-dark .kt-fig small,.kt-dark .kt-src{color:var(--kt-d2)}
@media (max-width:760px){.kt-figs{grid-template-columns:minmax(0,1fr);gap:0}.kt-fig{padding:20px 0;border-bottom:1px solid var(--kt-line)}.kt-dark .kt-fig{border-bottom-color:rgba(255,255,255,.14)}.kt-fig .kt-num{font-size:min(64px,17cqi)}}

/* ---------------------------------------------------------------- steps */
.kt-steps-wrap{position:relative}
.kt-rail{display:block;height:3px;margin:0 0 clamp(24px,3vw,36px);border-radius:3px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--kt-red) 0 20%,var(--kt-pink) 20% 40%,var(--kt-blue) 40% 60%,var(--kt-yellow) 60% 80%,var(--kt-green) 80% 100%)}
.kt-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:24px}
.kt-steps>li{display:flex;flex-direction:column;gap:10px;min-width:0}
.kt-step-n{display:block;font:600 clamp(40px,4vw,60px)/1 Inter,system-ui,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px var(--kt-blue-d)}
.kt-steps>li:nth-child(4n+2) .kt-step-n{-webkit-text-stroke-color:var(--kt-pink-d)}
.kt-steps>li:nth-child(4n+3) .kt-step-n{-webkit-text-stroke-color:var(--kt-green-d)}
.kt-steps>li:nth-child(4n+4) .kt-step-n{-webkit-text-stroke-color:var(--kt-red-d)}
.kt-steps h3{margin:8px 0 0;font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.03em}
.kt-steps p{margin:0;font-size:17px;line-height:1.55;color:var(--kt-t2)}
.kt-steps .text-link,.kt-steps .kt-link{align-self:flex-start;margin-top:auto}
.kt-dark .kt-step-n{-webkit-text-stroke-color:var(--kt-blue)}
.kt-dark .kt-steps>li:nth-child(4n+2) .kt-step-n{-webkit-text-stroke-color:var(--kt-pink)}
.kt-dark .kt-steps>li:nth-child(4n+3) .kt-step-n{-webkit-text-stroke-color:var(--kt-green)}
.kt-dark .kt-steps>li:nth-child(4n+4) .kt-step-n{-webkit-text-stroke-color:var(--kt-red)}
.kt-dark .kt-steps p{color:var(--kt-d2)}
@media (max-width:1000px){.kt-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}}
@media (max-width:600px){.kt-steps{grid-template-columns:minmax(0,1fr);row-gap:28px}}

/* ---------------------------------------------------------------- pictograms and picto tiles */
.kt-pic{display:block;width:32px;height:32px;flex:none;color:var(--kt-ink);overflow:visible}
.kt-pic .cl-tint{fill:var(--kt-acc,var(--kt-blue));opacity:.35}
.kt-pic .cl-tint,.kt-pic .cl-line{transform-box:fill-box;transform-origin:center}
.kt-pbox{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:16px;background:var(--kt-acc-t,var(--kt-blue-t))}
.kt-ptile{display:flex;flex-direction:column;gap:8px;min-width:0}
.kt-ptile h3{margin:10px 0 0;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.kt-ptile p{margin:0;font-size:16px;line-height:1.55;color:var(--kt-t2)}
.kt-dark .kt-pbox{background:rgba(255,255,255,.09)}
.kt-dark .kt-pic{color:var(--kt-d1)}
.kt-dark .kt-pic .cl-tint{opacity:.55}
.kt-dark .kt-ptile p{color:var(--kt-d2)}
@keyframes kt-tint{from{transform:scale(.7)}}
@keyframes kt-line{from{transform:translateY(24px)}}   /* 24 units of the 256 grid: 3px at 32px */
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="paused"]) .kt-pic.kt-pic-play .cl-tint{animation:kt-tint .5s var(--kt-pop)}
  html:not([data-motion="paused"]) .kt-pic.kt-pic-play .cl-line{animation:kt-line .5s var(--kt-out)}
}

/* ---------------------------------------------------------------- cards, chips */
.kt-card{position:relative;min-width:0;border-radius:24px;padding:clamp(24px,3vw,36px);background:#fff;border:1px solid rgba(22,24,22,.08)}
.kt-white .kt-card{background:var(--kt-card)}
.kt-card.kt-card-tint{background:var(--kt-tint);border-color:transparent}
.kt-dark .kt-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.kt-card h3{margin:0;font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.03em}
.kt-card>.mono{display:block;margin:0 0 10px;font-size:12px;letter-spacing:.16em;color:var(--kt-t3)}
.kt-card p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--kt-t2)}
.kt-card .pg-checks,.kt-card .pg-actions,.kt-card>.button{margin-top:20px}
.kt-card .pg-checks li{font-size:16px;padding:14px 0 14px 32px}
.kt-card .pg-checks li::before{top:16px}
.kt-dark .kt-card>.mono{color:#a3a7ab}
.kt-dark .kt-card p{color:var(--kt-d2)}
.kt-char{display:inline-block;vertical-align:bottom;margin-top:14px;line-height:0}
.kt-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--kt-line-strong);font-size:13px;font-weight:500;line-height:1;color:var(--kt-ink);white-space:nowrap}
.kt-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:var(--kt-shadow);font-size:14px;font-weight:600;color:var(--kt-ink);white-space:nowrap}

/* ---------------------------------------------------------------- product render and callouts */
.kt-device{position:relative;margin:0}
.kt-device-frame{position:relative}
.kt-device picture,.kt-device img{display:block;width:100%;height:auto}
.kt-device img{filter:drop-shadow(0 24px 24px rgba(20,22,24,.2))}
.kt-device-ov{position:absolute;inset:0;pointer-events:none}
.kt-device-ov>*{pointer-events:auto}
.kt-cap{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--kt-t4)}
.kt-dark .kt-cap{color:var(--kt-d2)}
.kt-callout{position:absolute;box-sizing:border-box;border:2px solid #fff;border-radius:8px;box-shadow:0 0 0 2px rgba(20,20,22,.88)}
.kt-callout-n{position:absolute;left:-14px;top:-14px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--kt-ink);color:#fff;font:600 14px/1 Inter,system-ui,sans-serif;box-shadow:0 0 0 2px #fff}
.kt-callout-l{position:absolute;left:0;top:calc(100% + 10px);display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--kt-ink);color:#fff;font-size:13px;font-weight:600;white-space:nowrap}

/* ---------------------------------------------------------------- segmented control (phones) */
.kt-seg{display:none}
[data-kt-panel][hidden]{display:none!important}
@media (max-width:760px){
  html.kt-js .kt-seg{display:flex;gap:4px;margin:0 0 20px;padding:4px;border-radius:999px;background:rgba(20,20,22,.07)}
  .kt-dark .kt-seg{background:rgba(255,255,255,.1)}
  .kt-seg button{flex:1 1 0;min-width:0;min-height:44px;margin:0;padding:0 10px;border:0;border-radius:999px;background:transparent;font:500 15px/1.2 Inter,system-ui,sans-serif;color:var(--kt-t2);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .kt-seg button[aria-selected="true"]{background:#fff;color:var(--kt-ink);box-shadow:0 1px 3px rgba(20,20,22,.14)}
  .kt-seg button:focus-visible{outline:2px solid var(--kt-ink);outline-offset:2px}
}

/* ---------------------------------------------------------------- module layers (base at the bottom) */
.kt-layers{display:flex;flex-direction:column-reverse;gap:14px}
.kt-layer{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"i t" "i l";gap:10px 20px;align-items:center;padding:20px 24px;border-radius:20px;min-width:0}
.kt-layer>.kt-pbox{grid-area:i;align-self:start}
.kt-layer-t{grid-area:t;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.kt-layer h3{margin:0;font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.025em}
.kt-layer-list{grid-area:l;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:16px;line-height:1.5}
.kt-layer-list li{position:relative;padding-left:14px}
.kt-layer-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:currentColor}
.kt-layer.is-on{background:var(--kt-ink);color:#fff}
.kt-layer.is-on .kt-pbox{background:rgba(255,255,255,.12)}
.kt-layer.is-on .kt-pic{color:#fff}
.kt-layer.is-off{border:1.5px dashed var(--kt-line-strong);color:var(--kt-ink)}
.kt-layer.is-off .kt-layer-list{color:var(--kt-t2)}
.kt-dark .kt-layer.is-on{background:#fff;color:var(--kt-ink)}
.kt-dark .kt-layer.is-on .kt-pbox{background:var(--kt-paper)}
.kt-dark .kt-layer.is-on .kt-pic{color:var(--kt-ink)}
.kt-dark .kt-layer.is-off{border-color:rgba(255,255,255,.4);color:var(--kt-d1)}
.kt-dark .kt-layer.is-off .kt-layer-list{color:var(--kt-d2)}
.kt-dark .kt-badge{border-color:rgba(255,255,255,.5);color:var(--kt-d1)}
@media (max-width:600px){.kt-layer{grid-template-columns:44px minmax(0,1fr);gap:8px 14px;padding:16px 18px}.kt-layer>.kt-pbox{width:44px;height:44px;border-radius:12px}.kt-layer .kt-pbox .kt-pic{width:26px;height:26px}.kt-layer-list{flex-direction:column;gap:4px}}

/* ---------------------------------------------------------------- scroll scenes
   Default (static: phones, short or narrow windows, reduced motion, paused, ?static, no JS): the stage shows its final
   frame and the beats follow as a list. Live: the stage sticks (7/12) while the beats scroll by (5/12). */
.kt-scene{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:32px;align-items:start}
.kt-stage{grid-column:1/span 7;min-width:0;position:relative}
.kt-beats{grid-column:8/span 5;list-style:none;margin:0;padding:0;display:grid;gap:28px;align-content:start;min-width:0}
.kt-beats>li{min-width:0}
@media (max-width:900px){.kt-scene{grid-template-columns:minmax(0,1fr)}.kt-stage,.kt-beats{grid-column:1}}
@media (prefers-reduced-motion:no-preference) and (min-height:761px) and (min-width:900px){
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .kt-scene{row-gap:0}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .kt-stage{position:sticky;top:var(--kt-top);height:calc(100svh - var(--kt-top) - 96px);display:flex;flex-direction:column;justify-content:center}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .kt-beats{gap:0}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .kt-beats>li{min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0 24px 24px;border-left:3px solid var(--kt-line);transition:border-color .4s var(--kt-out),color .4s var(--kt-out)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .kt-beats>li:not(.is-on){color:var(--kt-t4)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .kt-beats>li.is-on{border-left-color:var(--kt-acc,var(--kt-ink))}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .kt-dark .kt-beats>li{border-left-color:rgba(255,255,255,.16)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .kt-dark .kt-beats>li:not(.is-on){color:#9ea3a7}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .kt-dark .kt-beats>li.is-on{border-left-color:var(--kt-acc,var(--kt-yellow))}
}

/* ---------------------------------------------------------------- technical drawings (offset_tech, flexo_tech)
   The static rules of the old ColorConnect cards (sysmap.css .sm-tech, pages-fx.css .ill), without any loop. */
.kt-tech{position:relative;margin:0;container-type:inline-size;padding:clamp(18px,3.2vw,42px);border-radius:24px;background:#fbfbf8;border:1px solid var(--kt-line)}
.kt-tech>svg{display:block;width:100%;height:auto;overflow:visible}
.kt-tech .tx{font-family:Inter,system-ui,-apple-system,sans-serif;letter-spacing:-.01em}
.kt-tech .tx.halo{paint-order:stroke;stroke:#fbfbf8;stroke-width:6px;stroke-linejoin:round}
.kt-tech .mk circle{fill:var(--kt-ink)}
.kt-tech .mk text{fill:#fff;font:700 12px Inter,system-ui,sans-serif}
.kt-tech .lead{opacity:.55}
.kt-tech .ot-flow{fill:none;stroke:var(--kt-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 7}
.kt-tech .ot-ah{fill:var(--kt-ink)}
.kt-tech .ot-ghost{fill:#fff;stroke:var(--kt-ink);stroke-width:2;stroke-dasharray:5 4}
.kt-tech .ot-lab{font-weight:600;fill:var(--kt-ink)}
.kt-tech .ot-lab-n{display:none}
.kt-tech .sm-tech .cl-cyl,.kt-tech .sm-tech .cl-roll,.kt-tech .sm-tech .cl-head,.kt-tech .sm-tech .sm-k{transform-box:fill-box}
.kt-tech .sm-tech .cl-cyl,.kt-tech .sm-tech .cl-roll{transform-origin:center}
.kt-tech .sm-tech .sm-k{transform-origin:50% 100%}
.kt-tech .sm-tech .cl-arrow,.kt-tech .sm-tech .sm-arc-n{display:none}
.kt-tech .sm-tech .mk{transform-box:fill-box;transform-origin:center}
.kt-tech .ill-key{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;padding:0;list-style:none;font-size:14px;color:var(--kt-t3)}
.kt-tech .ill-key li{display:inline-flex;align-items:center;gap:8px}
.kt-tech .ill-key b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--kt-ink);color:#fff;font-size:12px}
@container (max-width:540px){.kt-tech .sm-tech .mk{transform:scale(1.2)}.kt-tech .sm-tech .lead{stroke-width:2}.kt-tech .ot-flow{stroke-width:3.4}}
/* narrow cards: the arc label grows, the two short flow labels give way to the legend, callouts grow (offset: 1.5x at most) */
@container (max-width:460px){.kt-tech .sm-tech .mk{transform:scale(1.5)}.kt-tech .sm-tech .sm-arc-t,.kt-tech .ot-lab-t,.kt-tech .ot-flow-measure .ot-lab,.kt-tech .ot-flow-correct .ot-lab{display:none}.kt-tech .sm-tech .sm-arc-n,.kt-tech .ot-lab-n{display:inline}.kt-tech .sm-tech .lead{stroke-width:2.6}.kt-tech .ot-flow{stroke-width:4.2;stroke-dasharray:9 8}.kt-tech .ot-ghost{stroke-width:3}}
@container (max-width:360px){.kt-tech .sm-tech .mk{transform:scale(1.85)}.kt-tech .sm-tech .ot-callouts .mk{transform:scale(1.5)}.kt-tech .sm-tech .lead{stroke-width:3}}
@media (max-width:700px){.kt-tech>.sm-tech-svg{width:calc(100% + 24px);margin:0 -12px}}

/* ---------------------------------------------------------------- large press pictograms (K.press) */
.kt-press{container-type:inline-size}
.kt-press svg{display:block;width:100%;height:auto;overflow:visible;color:var(--kt-ink)}
.kt-press .pic{stroke-width:var(--kt-sw)}
.kt-press .cl-tint{opacity:.2}
@container (max-width:480px){.kt-press .pic{stroke-width:calc(var(--kt-sw) * 1.5)}}

/* ---------------------------------------------------------------- FAQ */
.kt-faq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.kt-faq-grid>h2{grid-column:1/span 5;margin:0;font-size:clamp(36px,4.8vw,72px);font-weight:600;line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.kt-faq-grid>.pg-faq{grid-column:7/span 6}
.kt-faq .pg-faq summary{font-size:18px;min-height:44px;align-items:center}
.kt-faq .pg-faq p{font-size:17px;line-height:1.6;color:var(--kt-t2)}
.kt-faq .pg-faq p a{color:var(--kt-ink);text-decoration:underline;text-underline-offset:3px}
.kt-dark .pg-faq{border-top-color:rgba(255,255,255,.4)}
.kt-dark .pg-faq details{border-bottom-color:rgba(255,255,255,.14)}
.kt-dark .pg-faq p{color:var(--kt-d2)}
.kt-dark .pg-faq p a{color:#fff}
@media (max-width:900px){.kt-faq-grid{grid-template-columns:minmax(0,1fr);row-gap:28px}.kt-faq-grid>h2,.kt-faq-grid>.pg-faq{grid-column:1}}
/* phones: the "+" moves to the left of the question, so the right corner stays clear of the help agent */
@media (max-width:760px){
  .kt-faq .pg-faq summary{justify-content:flex-start;gap:14px;font-size:17px}
  .kt-faq .pg-faq summary span{order:-1;flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--kt-line-strong);font-size:16px;line-height:1}
  .kt-faq .pg-faq p{padding-left:38px;font-size:16px}
}

/* ---------------------------------------------------------------- closing (#contact): the home's section, same ground and spacing */
/* measured on the home at 1920 to 375 px: 88 px above and below (56 / 64 px on phones), a 3 px top rule, kicker 17 / 34 px (14 / 30 px) */
body.kt #contact{padding:88px var(--pg-gut);background:#141416;color:#f5f6f1;border-top:3px solid #1d1d1f}
body.kt #contact>.section-kicker{border-color:#ffffff35;padding-top:17px;margin-bottom:34px}
@media (max-width:760px){body.kt #contact{padding:56px var(--pg-gut) 64px}body.kt #contact>.section-kicker{padding-top:14px;margin-bottom:30px}}

/* ---------------------------------------------------------------- one-shot motion (data-kt-play)
   Hidden only while it waits to play: JavaScript running (kt-js), motion allowed, not paused, no fallback. */
.kt-draw{stroke-dasharray:1}
@media (prefers-reduced-motion:no-preference){
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) [data-kt-play]:not(.is-played) .kt-draw{stroke-dashoffset:1}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) [data-kt-play]:not(.is-played) .kt-fade{opacity:0}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) [data-kt-play]:not(.is-played) .kt-rise{opacity:0;transform:translateY(16px)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) [data-kt-play]:not(.is-played) .kt-drop{opacity:0;transform:translateY(-20px)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) [data-kt-play]:not(.is-played) .kt-pop{opacity:0;transform:scale(.6)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) [data-kt-play]:not(.is-played) .kt-wipe{clip-path:inset(0 100% 0 0)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) [data-kt-play]:not(.is-played) .kt-grow{transform:scaleX(0)}
  html.kt-js:not([data-motion="paused"]) [data-kt-play].is-played .kt-draw{transition:stroke-dashoffset var(--t,.9s) var(--kt-io) var(--d,0s)}
  html.kt-js:not([data-motion="paused"]) [data-kt-play].is-played .kt-fade{transition:opacity var(--t,.4s) ease var(--d,0s)}
  html.kt-js:not([data-motion="paused"]) [data-kt-play].is-played .kt-rise{transition:opacity var(--t,.5s) var(--kt-out) var(--d,0s),transform var(--t,.5s) var(--kt-out) var(--d,0s)}
  html.kt-js:not([data-motion="paused"]) [data-kt-play].is-played .kt-drop{transition:opacity var(--t,.5s) var(--kt-out) var(--d,0s),transform var(--t,.5s) var(--kt-out) var(--d,0s)}
  html.kt-js:not([data-motion="paused"]) [data-kt-play].is-played .kt-pop{transition:opacity var(--t,.4s) ease var(--d,0s),transform var(--t,.5s) var(--kt-pop) var(--d,0s)}
  /* an explicit end inset: a transition from inset() to none jumps, inset() to inset() animates */
  html.kt-js:not([data-motion="paused"]) [data-kt-play].is-played .kt-wipe{clip-path:inset(0 0 0 0);transition:clip-path var(--t,.8s) var(--kt-io) var(--d,0s)}
  html.kt-js:not([data-motion="paused"]) [data-kt-play].is-played .kt-grow{transition:transform var(--t,.9s) var(--kt-io) var(--d,0s)}
}
.kt-pop,.kt-grow{transform-box:fill-box;transform-origin:center}
.kt-grow{transform-origin:0 50%}
.kt-rail.kt-grow{transform-box:border-box}