/* colorconnect.html: page styles (v3, 9 Oct 2026, owned by the ColorConnect builder). Every rule is scoped to this page
   (body.page-colorconnect or a cc- class that only exists here). Markup: page_colorconnect() in tools/content.py,
   tools/liveboard.html and the ill_cc_ region of tools/illustrations.py. Kit: pages-v3.css / pages-v3.js.
   Motion policy: the HTML is the final frame. Things wait hidden only while JavaScript runs, motion is allowed and the
   page is not paused (the kit's gate); one-shots play once, the map follows the scroll, nothing repeats by itself. */

.cc-defs{position:absolute;width:0;height:0;overflow:hidden}
body.page-colorconnect{--cc-run:#64A932;--cc-mr:#e3b000;--cc-muted:#4b5450}

/* ================================================================ hero: the real ColorConnect dashboard on a desktop display
   (Hugues's mockup, 9 Oct 2026: address bar emptied, avatar initials removed, white ground cut out with its floor shadow).
   The screen turns on once: a black layer over the screen area fades out (percentages measured on the image) */
body.page-colorconnect .kt-hero-visual.cc-hero-vis,body.page-colorconnect .kt-hero-visual.cc-hero-vis>*{max-height:none}
.cc-shot{position:relative;margin:0}
.cc-shot-frame{position:relative}
.cc-shot-frame img{display:block;width:100%;max-width:100%;height:auto}
.cc-shot-off{position:absolute;left:1.38%;top:1.65%;right:1.44%;bottom:27.57%;border-radius:2px;background:#0b0b0d;opacity:0;pointer-events:none}
.cc-shot-cap{max-width:52ch;margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--kt-t3)}
@media (prefers-reduced-motion:no-preference){
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-shot:not(.is-played) .cc-shot-off{opacity:1}
  html.kt-js:not([data-motion="paused"]) .cc-shot.is-played .cc-shot-off{transition:opacity 1s ease .45s}
}

/* ================================================================ 01: the home's scroll map, with a close-up per step */
/* the step cards stay hidden here: the close-up panels carry the steps (and the phone strip of cards is gone) */
body.page-colorconnect .sysmap .sm-steps{display:none!important}
body.page-colorconnect .sm-track+.cc-panels-grid{margin-top:24px}
body.page-colorconnect .cc-panels-grid+.sm-note{margin-top:18px}
/* 760 to 1000 px: the landscape diagram fits the width (no sideways strip), its labels stay at 12 px or more */
@media (min-width:760px) and (max-width:1000px){
  body.page-colorconnect .sm-scroll .sm-stage{min-width:0}
  body.page-colorconnect .sm-land .sm-l{font-size:22.5px}body.page-colorconnect .sm-land .sm-l.hub{font-size:24px}
  body.page-colorconnect .sm-land .sm-s{font-size:21.5px}body.page-colorconnect .sm-land .sm-wt{font-size:21px}
  body.page-colorconnect .sm-land .sm-mk-b{transform:scale(1.5)}
}
@supports (container-type:size){
@media (prefers-reduced-motion:no-preference) and (min-height:761px) and (min-width:900px) and (max-width:1000px){
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .sm-track .sm-stage{flex-basis:calc((100cqw - 50px) * .4 + 24px)}
}
/* live, 1280 px and wider: the diagram on 9 columns, the active close-up on 3, inside the pinned frame */
@media (prefers-reduced-motion:no-preference) and (min-height:761px) and (min-width:1280px){
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .sm-track>.sysmap{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);column-gap:28px;align-content:center;align-items:center}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .sm-track .sm-frame{grid-column:1;grid-row:1;container-type:inline-size}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .sm-track .cc-panels-side{display:grid;grid-column:2;grid-row:1}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .cc-panels-grid{display:none}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .sm-track .sm-land .sm-l{font-size:19.5px}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .sm-track .sm-land .sm-l.hub{font-size:21px}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .sm-track .sm-land .sm-s,
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .sm-track .sm-land .sm-wt{font-size:18px}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .sm-track .sm-land .sm-mk-b{transform:scale(1.25)}
}
/* live, 900 to 1279 px and at least 900 px tall: the active close-up under the caption */
@media (prefers-reduced-motion:no-preference) and (min-height:900px) and (min-width:900px) and (max-width:1279px){
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .sm-track .cc-panels-side{display:grid;flex:none}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .cc-panels-grid{display:none}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .cc-panels-side .cc-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"h v" "t v" "p v";column-gap:28px;align-content:center;padding:20px 24px}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .cc-panels-side .cc-panel-h{grid-area:h}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .cc-panels-side .cc-panel>h3{grid-area:t}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .cc-panels-side .cc-panel>p{grid-area:p}
  html.sm-js:not([data-motion=paused]):not(.hs-static) body.page-colorconnect .cc-panels-side .cc-v{grid-area:v;align-self:center}
}
}

/* close-up panels: shared look */
.cc-panels{display:grid;gap:16px;min-width:0}
.cc-panels-side{display:none}
.cc-panel{position:relative;min-width:0;display:flex;flex-direction:column;gap:12px;padding:22px 22px 24px;border-radius:24px;background:var(--kt-card);border:1px solid rgba(22,24,22,.08);color:var(--kt-ink)}
.cc-panel-h{display:flex;align-items:center;gap:10px}
.cc-panel-n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c);color:var(--kt-ink);font-size:15px;font-weight:700;line-height:1}
.cc-panel:nth-child(3) .cc-panel-n{background:var(--kt-red-d);color:#fff}   /* ink on the base red is 4.3:1 */
.cc-panel-h .mono{font-size:12px;letter-spacing:.16em;color:var(--kt-t3)}
.cc-panel>h3{margin:0;font-size:22px;font-weight:600;line-height:1.15;letter-spacing:-.025em}
.cc-panel>p{margin:0;font-size:16px;line-height:1.55;color:var(--kt-t2)}
.cc-v{position:relative;min-width:0;padding:14px;border-radius:16px;background:#fff;border:1px solid rgba(22,24,22,.08);font-variant-numeric:tabular-nums}
.cc-panel .cc-v p{margin:0}
/* the side copy: one panel at a time, crossfading with the step */
.cc-panels-side .cc-panel{grid-area:1/1;background:var(--tint);border-color:transparent;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s var(--kt-out),transform .45s var(--kt-out),visibility 0s linear .45s}
.cc-panels-side .cc-panel.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* the grid copy: under the map in the static views, the step shown on the map is tinted */
.cc-panels-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.cc-panels-grid .cc-panel{grid-column:span 2;transition:background-color .35s,border-color .35s}
.cc-panels-grid .cc-panel:nth-child(n+4){grid-column:span 3}
.cc-panels-grid[data-step] .cc-panel.is-on{background:var(--tint);border-color:transparent}
@media (max-width:999px){.cc-panels-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-panels-grid .cc-panel,.cc-panels-grid .cc-panel:nth-child(n+4){grid-column:auto}.cc-panels-grid .cc-panel:last-child{grid-column:1/-1}}
/* phones: compact rows, the number on the left */
@media (max-width:759px){
  .cc-panels-grid{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--kt-line-strong)}
  body.page-colorconnect .sm-track+.cc-panels-grid{margin-top:28px}
  .cc-panels-grid .cc-panel,.cc-panels-grid .cc-panel:last-child{grid-column:auto;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;row-gap:8px;padding:20px 0;border:0;border-bottom:1px solid var(--kt-line);border-radius:0;background:none}
  .cc-panels-grid[data-step] .cc-panel.is-on{background:none}
  .cc-panels-grid .cc-panel-h{grid-column:1;grid-row:1/span 3;align-self:start}
  .cc-panels-grid .cc-panel-h .mono{display:none}
  .cc-panels-grid .cc-panel>h3{grid-column:2;grid-row:1;font-size:19px;padding-top:3px}
  .cc-panels-grid .cc-panel>p{grid-column:2;grid-row:2}
  .cc-panels-grid .cc-v{grid-column:2;grid-row:3;margin-top:4px}
  .cc-panels-grid[data-step] .cc-panel.is-on .cc-panel-n{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--kt-ink)}
}

/* step 1: the color preview, its four separations (dot screens at their angles), the ink coverage of each plate */
.cc-v-file{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:14px}
.cc-thumb{display:block;width:56px;line-height:0;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(22,24,22,.2)}
.cc-thumb svg,.cc-sep svg{display:block;width:100%;height:auto}
.cc-seps{display:flex;gap:8px;min-width:0}
.cc-sep{display:flex;flex-direction:column;align-items:center;gap:5px;width:28px}
.cc-sep svg{background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(22,24,22,.16)}
.cc-sep b{font:600 12px/1 var(--mono,monospace);color:var(--kt-t3)}
.cc-cov-w{grid-column:1/-1;display:block;min-width:0;padding-top:12px;border-top:1px solid var(--kt-line)}
.cc-v-lab{display:block;margin:0 0 8px;font:500 12px/1.2 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--kt-t3)}
.cc-cov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
.cc-cov-r{display:grid;grid-template-columns:12px minmax(0,1fr);align-items:center;gap:6px}
.cc-cov-r b{font:600 12px/1 var(--mono,monospace);color:var(--kt-t3)}
.cc-cov-r span{display:block;height:7px;border-radius:4px;background:#eceee9;overflow:hidden}
.cc-cov-r i{display:block;height:100%;border-radius:4px;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--v))}
/* step 2: the production calendar */
.cc-cal{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));grid-auto-rows:auto;row-gap:6px;column-gap:4px;align-items:center;font-size:12px;line-height:1.2;color:var(--kt-t3)}
.cc-cal-d{grid-row:1;text-align:center;font-family:var(--mono,monospace);letter-spacing:.04em}
.cc-cal-p{grid-column:1;padding-right:6px;white-space:nowrap;color:var(--kt-t2)}
.cc-cal-b{display:block;height:16px;border-radius:5px;background:#e3e6e1}
.cc-cal-job{background:var(--kt-pink);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--kt-pink-d)}
.cc-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid rgba(22,24,22,.18);font-size:14px;font-weight:600;line-height:1.2;color:var(--kt-ink)}
.cc-chip-ic{flex:none;width:16px;height:16px}
.cc-cal-chip{margin-top:12px}
/* step 3: the preset in ColorLoop, with the two messages of the interface */
.cc-v-pre{display:grid;gap:12px}
.cc-keys{display:flex;align-items:center;gap:12px}
.cc-keys svg{flex:none;width:92px;height:auto}
.cc-keys b{font:500 12px/1.3 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--kt-t3)}
.cc-key{transform-box:fill-box;transform-origin:50% 100%}
.cc-pills{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cc-pills li{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#ecf5e5;font-size:14px;font-weight:500;line-height:1.3;color:var(--kt-ink)}
.cc-ok{flex:none;width:18px;height:18px}
/* step 4: one tile of the shop floor screen */
.cc-mtile{display:grid;gap:10px}
.cc-mtile-r{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px}
.cc-mtile-n{font-size:15px;font-weight:600}
.cc-mtile-m{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cc-mtile-m b{display:block;font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.cc-mtile-m span{display:block;margin-top:2px;font-size:12px;color:var(--cc-muted)}
.cc-mtile-q{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid #e3e8e5}
.cc-mtile-q .cc-spark{display:block}
/* step 5: the customer portal, through a secure link */
.cc-link{display:grid;gap:12px}
.cc-link-r{display:flex;align-items:center;gap:12px}
.cc-lock{flex:none;width:28px;height:30px;color:var(--kt-ink);overflow:visible}
.cc-lock-s{transform-box:view-box}
.cc-link-r b{display:block;font-size:15px;font-weight:600}
.cc-link-r small{display:block;margin-top:2px;font-size:13px;color:var(--kt-t3)}
.cc-link-job{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--kt-line);font-size:14px;color:var(--kt-t2)}
/* the side copy plays each close-up once when its step comes up (scroll-driven, never by itself) */
@media (prefers-reduced-motion:no-preference){
  .cc-panels-side .cc-panel:not(.is-on) :is(.cc-sep,.cc-cal-chip,.cc-pills li,.cc-link-job){opacity:0;transform:translateY(8px);transition:opacity 0s .45s,transform 0s .45s}
  .cc-panels-side .cc-panel:not(.is-on) :is(.cc-cal-job,.cc-mtile-q .cc-grade){opacity:0;transform:scale(.4);transition:opacity 0s .45s,transform 0s .45s}
  .cc-panels-side .cc-panel:not(.is-on) .cc-cov-r i{transform:scaleX(0);transition:transform 0s .45s}
  .cc-panels-side .cc-panel:not(.is-on) .cc-key{transform:scaleY(.25);transition:transform 0s .45s}
  .cc-panels-side .cc-panel:not(.is-on) .cc-lock-s{transform:translateY(-4px);transition:transform 0s .45s}
  .cc-panels-side .cc-panel.is-on :is(.cc-sep,.cc-cal-chip,.cc-pills li,.cc-link-job){transition:opacity .35s ease var(--cc-d,.3s),transform .5s var(--kt-out) var(--cc-d,.3s)}
  .cc-panels-side .cc-panel.is-on :is(.cc-cal-job,.cc-mtile-q .cc-grade){transition:opacity .25s ease .3s,transform .5s var(--kt-pop) .3s}
  .cc-panels-side .cc-panel.is-on .cc-cov-r i{transition:transform .8s var(--kt-out) calc(.35s + var(--cc-d,0s))}
  .cc-panels-side .cc-panel.is-on .cc-key{transition:transform .6s var(--kt-out) calc(.15s + var(--j) * .03s)}
  .cc-panels-side .cc-panel.is-on .cc-lock-s{transition:transform .45s var(--kt-pop) .5s}
  .cc-panels-side .cc-sep:nth-child(1){--cc-d:.15s}.cc-panels-side .cc-sep:nth-child(2){--cc-d:.22s}.cc-panels-side .cc-sep:nth-child(3){--cc-d:.29s}.cc-panels-side .cc-sep:nth-child(4){--cc-d:.36s}
  .cc-panels-side .cc-cov-r:nth-child(2) i{--cc-d:.08s}.cc-panels-side .cc-cov-r:nth-child(3) i{--cc-d:.16s}.cc-panels-side .cc-cov-r:nth-child(4) i{--cc-d:.24s}
  .cc-panels-side .cc-cal-chip{--cc-d:.55s}.cc-panels-side .cc-pills li:nth-child(2){--cc-d:.6s}.cc-panels-side .cc-link-job{--cc-d:.65s}
}

/* ================================================================ 02: offset and flexo, at the press */
.cc-procs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.cc-proc{display:flex;flex-direction:column;min-width:0;border-top:2px solid var(--kt-ink);border-radius:0 0 24px 24px;background:#fff}
.cc-play{min-width:0}
.cc-proc .kt-tech.cc-tech{padding:clamp(20px,2.6vw,36px) clamp(18px,2.6vw,36px) 4px;border:0;border-radius:0;background:transparent}
.cc-proc .kt-tech .ill-key{margin-top:18px}
.cc-art{position:relative}
.cc-art>svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:700px){.cc-art>svg{width:calc(100% + 24px);margin:0 -12px}
  /* the drawing bleeds 12 px on each side here: the overlays follow it */
  .cc-rise-off{left:calc(85.2% + 8.4px)}.cc-web{left:calc(11.3% - 9.3px);width:calc(77.4% + 18.6px)}}
.cc-lane{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:36px;margin:0 0 20px}
.cc-lane-off{justify-content:flex-end}
.cc-lane-flx{justify-content:center}
.cc-up{gap:8px;min-height:34px;padding:0 14px;border:0;font-size:14px}
.cc-up .cc-chip-ic{color:var(--kt-blue-d)}
.cc-lane-cap{font-size:13px;color:var(--kt-t4)}
.cc-rise{position:absolute;width:0;top:-20px;border-left:2px dashed var(--kt-ink);pointer-events:none}
.cc-rise-off{left:85.2%;height:calc(6.1% + 20px)}
.cc-rise-flx{left:50%;height:calc(28% + 20px)}
.cc-web{position:absolute;left:11.3%;width:77.4%;top:47.8%;height:0;pointer-events:none}
.cc-web i{position:absolute;left:0;top:-3px;width:9%;height:6px;border-radius:3px;background:var(--kt-blue);opacity:0}
.cc-proc-t{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;padding:24px clamp(20px,2.6vw,36px) clamp(24px,2.8vw,36px)}
.cc-proc-t .mono{font-size:12px;letter-spacing:.16em;color:var(--kt-t3)}
.cc-proc-t h3{margin:0;font-size:clamp(24px,2.2vw,32px);font-weight:600;line-height:1.1;letter-spacing:-.035em}
.cc-proc-t .pg-checks{margin-top:6px}
.cc-proc-t .pg-checks li{font-size:16px;padding:13px 0 13px 32px}
.cc-proc-t .pg-checks li::before{top:15px}
.cc-proc-t .kt-link{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.cc-procs{grid-template-columns:minmax(0,1fr)}}
/* the offset drawing's two flow labels would fall under 12 px in cards up to 545 px: they give way to the legend there
   (the kit does it up to 460 px), and the large "Ink-key settings" label stays at 12 px or more on the smallest phones */
@container (max-width:545px){
  .cc-proc .kt-tech .ot-lab-t,.cc-proc .kt-tech .ot-flow-measure .ot-lab,.cc-proc .kt-tech .ot-flow-correct .ot-lab{display:none}
  .cc-proc .kt-tech .ot-lab-n{display:inline}
}
@container (max-width:340px){.cc-proc .kt-tech .ot-lab-n{font-size:32px}}
@keyframes cc-web{0%{opacity:0;transform:translateX(0)}8%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(1011%)}}
@keyframes cc-ghost{0%{transform:none;opacity:1}55%{transform:translate(144px,-19px);opacity:1}62%{transform:translate(144px,-19px);opacity:0}63%{transform:none;opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  /* waiting to play (the played state keeps an inset() clip: a transition from inset() to none would jump) */
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-play:not(.is-played) :is(.ot-sheet .ot-flow,.ot-sheet .ot-ah){clip-path:inset(0 100% 0 0)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-play:not(.is-played) .ot-table rect{opacity:0}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-play:not(.is-played) .ot-head{transform:translateX(-112px)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-play:not(.is-played) .ot-flow-measure{clip-path:inset(100% 0 0 0)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-play:not(.is-played) .ot-flow-correct{clip-path:inset(0 0 100% 0)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-play:not(.is-played) .ot-link{clip-path:inset(0 0 0 100%)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-play:not(.is-played) .cc-rise{clip-path:inset(100% 0 0 0)}
  /* playing (offset: the pulled sheet, the scan, measurements up, corrections down, ink keys, then back to ColorConnect) */
  html.kt-js:not([data-motion="paused"]) .cc-play.is-played :is(.ot-sheet .ot-flow,.ot-sheet .ot-ah){clip-path:inset(-16px);transition:clip-path .45s var(--kt-io)}
  html.kt-js:not([data-motion="paused"]) .cc-play.is-played .ot-ghost{animation:cc-ghost .9s var(--kt-io) both}
  html.kt-js:not([data-motion="paused"]) .cc-play.is-played .ot-table rect{transition:opacity .25s ease .5s}
  html.kt-js:not([data-motion="paused"]) .cc-play.is-played .ot-head{transition:transform .7s var(--kt-io) .5s}
  html.kt-js:not([data-motion="paused"]) .cc-play.is-played .ot-flow-measure{clip-path:inset(-16px);transition:clip-path .35s var(--kt-io) 1.15s}
  html.kt-js:not([data-motion="paused"]) .cc-play.is-played .ot-flow-correct{clip-path:inset(-16px);transition:clip-path .35s var(--kt-io) 1.45s}
  html.kt-js:not([data-motion="paused"]) .cc-play.is-played .ot-link{clip-path:inset(-16px);transition:clip-path .6s var(--kt-io) 1.7s}
  html.kt-js:not([data-motion="paused"]) .cc-play.is-played .cc-rise-off{clip-path:inset(-16px);transition:clip-path .3s var(--kt-io) 1.85s}
  /* flexo: one pass of the web from the unwind to the rewind reel, then the job and status go up to ColorConnect */
  html.kt-js:not([data-motion="paused"]) .cc-play.is-played .cc-web i{animation:cc-web 1.5s var(--kt-io) .2s both}
  html.kt-js:not([data-motion="paused"]) .cc-play.is-played .cc-rise-flx{clip-path:inset(-16px);transition:clip-path .3s var(--kt-io) 1.65s}
}
.kt-tech .ot-ghost{transform-box:view-box}
.kt-tech .ot-head{transform-box:view-box}

/* ================================================================ 03: color history, a sample record */
.cc-hist{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:36px;align-items:start}
/* the side blocks of 03, 05 and 06 sit on the lead's column of the section head (8 / span 5), the art under the H2 (1 / span 7) */
.cc-rec{grid-column:1/span 7}
.cc-hist-side{grid-column:8/span 5;padding-top:8px}
.cc-say{margin:0 0 16px;font-size:clamp(22px,2vw,28px);font-weight:600;line-height:1.25;letter-spacing:-.025em;color:var(--kt-ink);text-wrap:balance}
.cc-hist-side>p:not(.cc-say){margin:0 0 18px;font-size:17px;line-height:1.6;color:var(--kt-t2)}
@media (max-width:900px){.cc-rec,.cc-hist-side{grid-column:1/-1}.cc-hist-side{padding-top:0}}
.cc-tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--kt-line-strong);font:500 12px/1 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--kt-t3)}
.kt-card.cc-rec .cc-rec-t{margin:14px 0 0;font-size:clamp(20px,1.8vw,26px);line-height:1.2}
.cc-rec-t span{font-weight:400;color:var(--kt-t4)}
.cc-rec-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center;margin-top:24px}
.cc-ring{position:relative;width:clamp(118px,11vw,150px);aspect-ratio:1}
.cc-ring svg{display:block;width:100%;height:100%}
.cc-ring-bg{fill:none;stroke:#e2e5df;stroke-width:10}
.cc-ring-v{fill:none;stroke:var(--kt-green);stroke-width:10;stroke-linecap:round;stroke-dasharray:.94 1;stroke-dashoffset:0}
.cc-ring-g{position:absolute;left:0;right:0;top:22%;text-align:center;font-size:clamp(38px,3.6vw,50px);font-weight:700;line-height:1;letter-spacing:-.04em}
.cc-ring-s{position:absolute;left:0;right:0;top:61%;text-align:center;font-size:13px;line-height:1;color:var(--kt-t3)}
.cc-ring-s b{font-weight:600;color:var(--kt-ink)}
.cc-rec-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--kt-line-strong)}
.cc-rec-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--kt-line);font-size:16px;line-height:1.4}
.cc-rec-rows span{color:var(--kt-t2)}
.cc-rec-rows b{font-weight:600;text-align:right}
.cc-conv{margin:28px 0 0}
.cc-conv-cap{margin:0 0 12px;font-size:13px;color:var(--kt-t3)}
.cc-conv-plot{position:relative;aspect-ratio:480/150}
.cc-conv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cc-conv-axis{fill:none;stroke:var(--kt-line-strong);stroke-width:1.5}
.cc-conv-tol{fill:none;stroke:var(--kt-green-d);stroke-width:1.5;stroke-dasharray:6 5}
.cc-conv-drop{fill:none;stroke:var(--kt-ink);stroke-width:1.2;stroke-dasharray:3 4}
.cc-conv-line{fill:none;stroke:var(--kt-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cc-conv-pin{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--kt-green);box-shadow:0 0 0 2.5px #fff,0 0 0 4px var(--kt-ink)}
.cc-conv-40{position:absolute;top:calc(88% + 6px);transform:translateX(-50%);font-size:12px;font-weight:600;line-height:1;color:var(--kt-ink)}
.cc-conv-tl{position:absolute;right:0;transform:translateY(calc(-100% - 4px));font-size:12px;font-weight:600;line-height:1;color:var(--kt-green-d)}
.cc-conv-x{display:flex;justify-content:space-between;margin:10px 0 0;font-size:12px;color:var(--kt-t3)}
@media (max-width:520px){.cc-rec-body{grid-template-columns:minmax(0,1fr);justify-items:start}}
@media (prefers-reduced-motion:no-preference){
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-rec:not(.is-played) .cc-ring-v{stroke-dashoffset:.94}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-rec:not(.is-played) .cc-conv-drop{opacity:0}
  html.kt-js:not([data-motion="paused"]) .cc-rec.is-played .cc-ring-v{transition:stroke-dashoffset 1.2s var(--kt-out) .2s}
  html.kt-js:not([data-motion="paused"]) .cc-rec.is-played .cc-conv-drop{transition:opacity .3s ease 1.4s}
}

/* ================================================================ 04: from production to evidence (dark) */
/* kit fix, this page only: the light kicker rule of pages-v3.css outranks its dark variant (grey 2.3:1 text on the dark band) */
body.page-colorconnect .kt-dark .section-kicker:not(#contact .section-kicker){border-top-color:rgba(255,255,255,.2)}
body.page-colorconnect .kt-dark .section-kicker:not(#contact .section-kicker) .mono{color:#a3a7ab}
.cc-ev{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;align-items:center}
.cc-ev-flow{position:relative;grid-column:1/span 7;min-width:0}
.cc-pass{grid-column:8/span 5}
.cc-ev-steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cc-ev-step{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;min-width:0}
.cc-ev-ic{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:16px;background:#26303a;box-shadow:inset 0 0 0 1.5px var(--kt-blue);transition:background-color .4s,box-shadow .4s}
.cc-ev-ic .kt-pic{color:#f5f5f7}
.cc-ev-ic .kt-pic .cl-tint{fill:var(--kt-blue);opacity:.6}
.cc-ev-t{display:block;min-width:0}
.cc-ev-t b{display:block;font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.015em;color:#f5f5f7}
.cc-ev-t small{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.72)}
.cc-ev-rail{position:absolute;top:27px;left:12.5%;right:-24px;height:2px;background:rgba(255,255,255,.24);container-type:inline-size}
.cc-ev-dot{position:absolute;left:0;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--kt-yellow);box-shadow:0 0 0 5px rgba(251,203,5,.22);opacity:0}
.cc-ev-link{display:none}
@keyframes cc-ev-x{0%{opacity:0;transform:translateX(0)}8%{opacity:1}88%{opacity:1;transform:translateX(100cqw)}100%{opacity:0;transform:translateX(100cqw)}}
@keyframes cc-ev-y{0%{opacity:0;transform:translateY(0)}8%{opacity:1}88%{opacity:1;transform:translateY(100cqh)}100%{opacity:0;transform:translateY(100cqh)}}
.cc-pass{position:relative;min-width:0;padding:clamp(22px,2.6vw,32px);border-radius:24px;background:#fff;color:var(--kt-ink);box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.cc-pass-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cc-pass-h .mono{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--kt-t3)}
.cc-pass-h h3{margin:8px 0 0;font-size:clamp(24px,2.2vw,30px);font-weight:600;line-height:1.1;letter-spacing:-.03em;color:var(--kt-ink)}
.cc-pass-art{flex:none;width:84px;height:auto;margin:-6px -4px 0 0}
.cc-pass-rows{margin:20px 0 0;border-top:1px solid var(--kt-line-strong)}
.cc-pass-rows>div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--kt-line)}
.cc-pass-rows dt{font-size:15px;color:var(--kt-t2)}
.cc-pass-rows dd{margin:0;font-size:15px;font-weight:600;text-align:right;color:var(--kt-ink)}
.cc-pass-rows dd.cc-todo{padding:3px 10px;border-radius:999px;border:1.5px dashed var(--kt-yellow-d);font-size:14px;font-weight:500;color:var(--kt-t2)}
.cc-qr{display:flex;align-items:center;gap:16px;margin:18px 0 0}
.cc-qr svg{flex:none;width:84px;height:84px;border-radius:4px;box-shadow:0 0 0 1px var(--kt-line)}
.cc-qr figcaption{font-size:13px;line-height:1.45;color:var(--kt-t4)}
.cc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:clamp(48px,6vw,80px);padding-top:32px;border-top:1px solid var(--kt-line)}
.kt-dark .cc-tiles{border-top-color:rgba(255,255,255,.16)}
.kt-dark .cc-tiles .kt-pbox{background:#26303a}
.cc-ev-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;margin-top:32px}
.cc-ev-foot .kt-note{margin:0;max-width:70ch;font-size:15px}
.kt-dark .kt-link{color:#fff}
@media (max-width:1100px){.cc-ev-flow,.cc-pass{grid-column:1/-1}.cc-pass{max-width:560px}.cc-ev-rail{right:12.5%}}
/* narrow: the four steps stacked, the dot runs down */
@media (max-width:640px){
  .cc-ev-steps{grid-template-columns:minmax(0,1fr);gap:22px}
  .cc-ev-step{flex-direction:row;align-items:center;gap:16px;text-align:left}
  .cc-ev-rail{top:28px;bottom:28px;left:27px;right:auto;width:2px;height:auto;container-type:size}
}
@media (max-width:760px){.cc-tiles{grid-template-columns:minmax(0,1fr);gap:22px}.cc-tiles .kt-ptile{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start}.cc-tiles .kt-pbox{grid-row:1/span 2}.cc-tiles .kt-ptile h3{margin-top:4px}}
@media (prefers-reduced-motion:no-preference){
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-ev:not(.is-played) .cc-ev-ic{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
  html.kt-js:not([data-motion="paused"]) .cc-ev.is-played .cc-ev-ic{transition:background-color .35s ease calc(.15s + var(--i) * .3s),box-shadow .35s ease calc(.15s + var(--i) * .3s)}
  html.kt-js:not([data-motion="paused"]) .cc-ev.is-played .cc-ev-dot{animation:cc-ev-x 1.4s var(--kt-io) both}
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){
  html.kt-js:not([data-motion="paused"]) .cc-ev.is-played .cc-ev-dot{animation-name:cc-ev-y}
  .cc-ev-dot{left:50%;top:0;margin:-7px 0 0 -7px}
}

/* ================================================================ 07: questions (the period takes the page accent, like the other H2s) */
#colorconnect-faq h2 .kt-dot{color:var(--kt-blue-d)}

/* ================================================================ 05: modules */
.cc-mod{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;align-items:end}
.cc-mod .kt-layers{grid-column:1/span 7}
.cc-mod-side{grid-column:8/span 5}
.cc-mod-side p{margin:0 0 6px;font-size:17px;line-height:1.55;color:var(--kt-t2)}
@media (max-width:1000px){.cc-mod .kt-layers,.cc-mod-side{grid-column:1/-1}}

/* ================================================================ 06: installed in your print shop */
.cc-inst{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:36px;align-items:center}
.cc-shop{grid-column:1/span 7;margin:0}
.cc-inst-side{grid-column:8/span 5}
.cc-inst-side .pg-checks li{font-size:16px;padding:13px 0 13px 32px}
.cc-inst-side .pg-checks li::before{top:15px}
.cc-inst-side .kt-note{margin-top:16px}
@media (max-width:1000px){.cc-shop,.cc-inst-side{grid-column:1/-1}}
.cc-shop-art{position:relative;container-type:inline-size}
.cc-shop-art svg{display:block;width:100%;height:auto;overflow:visible;color:var(--kt-ink)}
.cc-shop .pic .cl-tint{fill:var(--kt-blue);opacity:.3}
.cc-sh-bld{fill:#f7f7f4;stroke:var(--kt-ink);stroke-width:2.5;stroke-linejoin:round}
.cc-sh-floor{fill:none;stroke:var(--kt-ink);stroke-width:2.5;stroke-linecap:round}
.cc-sh-w{fill:none;stroke:var(--kt-blue-d);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cc-sh-dash{fill:none;stroke:var(--kt-ink);stroke-width:2.5;stroke-dasharray:7 7;stroke-linecap:round}
.cc-shop .sm-tile.cc-sh-hub{fill:#fff;stroke:var(--kt-ink);stroke-width:2.2}
.cc-sh-shackle{transform-box:view-box}
.cc-sh-l{position:absolute;transform:translateX(-50%);font-size:13px;font-weight:500;line-height:1.25;color:var(--kt-t2);white-space:nowrap;pointer-events:none}
.cc-sh-start{transform:none}
.cc-sh-end{transform:translateX(-100%);text-align:right}
.cc-sh-b{font-weight:600;color:var(--kt-ink)}
.cc-sh-mono{font:500 12px/1.25 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--kt-t3)}
.cc-l-short{display:none}
@container (max-width:520px){
  .cc-sh-l{font-size:12px}
  .cc-l-long{display:none}.cc-l-short{display:inline}
  .cc-sh-wide{display:none}
  .cc-l-short b{font-weight:600;color:var(--kt-ink)}
}
.cc-tiles-sec{margin-top:clamp(48px,6vw,72px)}
.cc-cra{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 40px;margin-top:clamp(40px,5vw,64px);padding:22px 0;border-top:1px solid var(--kt-line-strong);border-bottom:1px solid var(--kt-line)}
.cc-cra p{margin:0;max-width:80ch;font-size:15px;line-height:1.6;color:var(--kt-t2)}
.cc-cra p strong{font-weight:600;color:var(--kt-ink)}
@media (max-width:760px){.cc-cra{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:no-preference){
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-shop:not(.is-played) .cc-sh-link{clip-path:inset(0 100% 0 0)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-shop:not(.is-played) .cc-sh-shackle{transform:translateY(-8px)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .cc-shop:not(.is-played) .cc-sh-bld{fill-opacity:0}
  html.kt-js:not([data-motion="paused"]) .cc-shop.is-played .cc-sh-bld{transition:stroke-dashoffset .9s var(--kt-io),fill-opacity .5s ease .5s}
  html.kt-js:not([data-motion="paused"]) .cc-shop.is-played .cc-sh-link{clip-path:inset(-16px);transition:clip-path .6s var(--kt-io) 1.35s}
  html.kt-js:not([data-motion="paused"]) .cc-shop.is-played .cc-sh-shackle{transition:transform .45s var(--kt-pop) 1.95s}
}

/* ================================================================ idle: the map's own motion (packets, lit pictograms) stops
   after 5 s without scroll, pointer or key (page-colorconnect.js), and comes back with the next one */
body.cc-idle .sysmap,body.cc-idle .sysmap *{animation-play-state:paused!important}