/* Compact, illustrative product states inside the existing editorial timeline. */
.kr-process .kr-process__signal[hidden] { display:none; }
.kr-process .kr-motion-example {
  grid-column: 3;
  width: 100%;
  max-width: 370px;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.8), rgba(234,239,243,.6));
  box-shadow: inset 0 0 0 3px rgba(113,130,150,.08), 0 10px 28px rgba(46,55,66,.05);
  color: #2a2534;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (min-width:851px) {
  .kr-process .kr-process__steps article {
    grid-template-columns: minmax(100px,.48fr) minmax(220px,1fr) minmax(260px,1.1fr);
    grid-template-rows: auto 1fr;
    gap: 12px 28px;
  }
  .kr-process .kr-process__steps article > span { grid-column:1; grid-row:1; }
  .kr-process .kr-process__steps article > h3 { grid-column:2; grid-row:1; }
  .kr-process .kr-process__steps article > p { grid-column:2; grid-row:2; }
  .kr-process .kr-motion-example { grid-column:3; grid-row:1 / span 2; }
}
.kr-motion-example__head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kr-motion-example__label { flex:1 1 auto; min-width:0; color:#474453; font-size:12px; font-weight:700; line-height:1.35; }
.kr-motion-example__status { flex:0 1 auto; max-width:60%; padding:5px 8px; border:1px solid rgba(107,133,160,.14); border-radius:999px; background:rgba(223,235,239,.78); color:#57757f; font-size:9px; font-weight:700; line-height:1.2; text-align:center; }
.kr-motion-example__progress { position:relative; display:flex; align-items:center; justify-content:space-between; height:12px; margin:13px 2px 0; }
.kr-motion-example__progress::before,.kr-motion-example__progress > span { position:absolute; left:0; right:0; height:2px; border-radius:4px; content:''; }
.kr-motion-example__progress::before { background:rgba(111,137,163,.14); }
.kr-motion-example__progress > span { display:block; background:linear-gradient(90deg,#94aacd,#88b8bd); transform-origin:left center; }
.kr-motion-example__progress > i { position:relative; width:7px; height:7px; box-sizing:border-box; border:1px solid #9fb8c6; border-radius:50%; background:#f8fbfc; }
.kr-motion-example__rows { margin-top:10px; border-top:1px solid rgba(79,91,108,.09); }
.kr-motion-example__row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid rgba(79,91,108,.08); font-size:11px; line-height:1.4; }
.kr-motion-example__row > span { color:#86818b; }
.kr-motion-example__row > strong { min-width:0; color:#4b4652; font-size:11px; font-weight:600; text-align:right; }
.kr-motion-example__toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:38px; margin-top:10px; padding:0 10px; border:1px solid rgba(111,125,161,.16); border-radius:10px; background:rgba(255,255,255,.6); color:#566891; font:600 11px/1.3 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align:left; cursor:pointer; transition:background-color .22s ease, border-color .22s ease, color .22s ease; }
.kr-motion-example__toggle:hover { border-color:rgba(107,126,175,.32); background:rgba(244,247,255,.95); color:#3e5585; }
.kr-motion-example__toggle:focus-visible { outline:2px solid #788bbf; outline-offset:3px; }
.kr-motion-example__arrow { display:inline-block; font-size:14px; transition:transform .22s ease; }
.kr-motion-example__toggle:hover .kr-motion-example__arrow,.kr-motion-example__toggle:focus-visible .kr-motion-example__arrow { transform:translate(2px,-2px); }
.kr-motion-example__toggle[aria-expanded="true"] .kr-motion-example__arrow { transform:rotate(45deg); }
.kr-motion-example__detail { margin-top:10px; padding:10px 11px; border-radius:10px; background:rgba(232,237,244,.72); color:#645f6c; font-size:11px; line-height:1.55; }
.kr-motion-example__detail[hidden] { display:none; }
.kr-motion-example__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.kr-motion-example__note { color:#97929c; font-size:9px; line-height:1.2; }
.kr-motion-example__replay { padding:4px 2px; border:0; background:transparent; color:#7e85a0; font:600 10px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor:pointer; }
.kr-motion-example__replay:hover { color:#506696; }
.kr-motion-example__replay:focus-visible { outline:2px solid #788bbf; outline-offset:3px; }
@media (max-width:850px) { .kr-process .kr-motion-example { grid-column:2; } }
@media (max-width:600px) { .kr-process .kr-motion-example { grid-column:1; max-width:none; margin-top:8px; } }
@media (prefers-reduced-motion:reduce) { .kr-motion-example__toggle,.kr-motion-example__arrow { transition:none; } .kr-motion-example__replay { display:none; } }

/* A compact journey: one stage in focus, with all four stages one click away. */
.kr-value { padding-top:clamp(84px,7vw,104px);padding-bottom:clamp(84px,7vw,104px); }
.kr-process,.kr-cases,.kr-faq { padding-top:clamp(88px,8vw,112px);padding-bottom:clamp(88px,8vw,112px); }
.kr-demo { padding-top:clamp(96px,8vw,112px);padding-bottom:clamp(96px,9vw,120px); }
.kr-value__intro,.kr-cases__heading { margin-bottom:clamp(42px,5vw,64px); }
.kr-process__intro,.kr-demo__heading { margin-bottom:clamp(40px,5vw,64px); }
.kolrelay-task-platforms { margin-bottom:24px; }
.kr-process__tabs { position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px;padding-bottom:15px; }
.kr-process__tabs::before,.kr-process__tabs::after { content:"";position:absolute;bottom:0;left:0;height:3px;border-radius:99px;pointer-events:none; }
.kr-process__tabs::before { width:100%;background:rgba(105,125,150,.13); }
.kr-process__tabs::after { width:var(--kr-process-progress,25%);background:linear-gradient(90deg,#68bbb9,#899fe1 70%,#aa8bcf);transition:width .42s cubic-bezier(.22,1,.36,1); }
.kr-process__tab { display:flex;align-items:center;gap:10px;min-width:0;min-height:56px;padding:9px 14px;border:1px solid rgba(82,94,105,.1);border-radius:15px;background:rgba(255,255,255,.32);color:#766e79;font:700 11px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.06em;text-align:left;cursor:pointer;transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease; }
.kr-process__tab-number { display:grid;place-items:center;flex:0 0 33px;height:33px;border:1px solid rgba(95,113,144,.15);border-radius:50%;background:rgba(255,255,255,.65);color:#7c8799;font-size:10px;letter-spacing:0; }
.kr-process__tab[aria-selected="true"] { border-color:rgba(100,122,159,.32);background:linear-gradient(120deg,rgba(222,244,240,.8),rgba(239,237,255,.9));color:#302b3b;box-shadow:inset 0 0 0 2px rgba(255,255,255,.65),0 8px 22px rgba(65,91,123,.08); }
.kr-process__tab[aria-selected="true"] .kr-process__tab-number { border-color:rgba(112,140,183,.34);background:#eaf1f8;color:#506b96; }
.kr-process__tab:hover { background:rgba(255,255,255,.72); }
.kr-process__tab:focus-visible { outline:2px solid #788bbf;outline-offset:3px; }
.kr-process .kr-process__steps[data-interactive]::before { display:none; }
.kr-process .kr-process__steps[data-interactive] > article[hidden] { display:none !important; }
.kr-process .kr-process__steps[data-interactive] > article:not([hidden]) {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);grid-template-rows:auto auto 1fr;
  align-items:start;column-gap:clamp(30px,6vw,90px);row-gap:12px;min-height:260px;
  padding:clamp(28px,4vw,48px) !important;border:1px solid rgba(255,255,255,.9) !important;border-radius:25px;
  background:linear-gradient(135deg,rgba(255,255,255,.65),rgba(232,238,239,.52));
  box-shadow:inset 0 0 0 3px rgba(110,126,135,.07),0 12px 34px rgba(46,55,56,.04);
}
.kr-process .kr-process__steps[data-interactive] > article::before { display:none; }
.kr-process .kr-process__steps[data-interactive] > article > span { grid-column:1;grid-row:1;padding:0;color:#858493; }
.kr-process .kr-process__steps[data-interactive] > article > h3 { grid-column:1;grid-row:2;margin:0;font-size:clamp(24px,2.5vw,32px);line-height:1.2; }
.kr-process .kr-process__steps[data-interactive] > article > p { grid-column:1;grid-row:3;max-width:410px;font-size:15px;line-height:1.7; }
.kr-process .kr-process__steps[data-interactive] .kr-motion-example { grid-column:2;grid-row:1 / span 3;max-width:none;align-self:center; }
.kr-process__trust { margin-top:clamp(56px,7vw,88px); }
@media(max-width:700px) {
  .kr-value,.kr-process,.kr-cases,.kr-faq { padding-top:72px;padding-bottom:72px; }
  .kr-demo { padding-top:80px;padding-bottom:84px; }
  .kr-process__intro,.kr-demo__heading { margin-bottom:34px; }
  .kr-process__tabs { grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:12px; }
  .kr-process__tab { min-height:52px;padding:8px 10px;font-size:10px; }
  .kr-process .kr-process__steps[data-interactive] > article:not([hidden]) { grid-template-columns:1fr;grid-template-rows:auto;gap:11px;min-height:0;padding:25px 22px !important;border-radius:21px; }
  .kr-process .kr-process__steps[data-interactive] > article > span,
  .kr-process .kr-process__steps[data-interactive] > article > h3,
  .kr-process .kr-process__steps[data-interactive] > article > p,
  .kr-process .kr-process__steps[data-interactive] .kr-motion-example { grid-column:1;grid-row:auto; }
  .kr-process .kr-process__steps[data-interactive] .kr-motion-example { margin-top:10px; }
  .kr-process__trust { margin-top:48px; }
}
@media(prefers-reduced-motion:reduce) { .kr-process__tab,.kr-process__tabs::after { transition:none; } }

/* Color feedback follows the element under the pointer or keyboard focus. */
.kolrelay-task-platform { transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease,color .24s ease; }
.kr-value__column h3,.kr-cases__grid h3,.kr-faq__list summary,.kr-process__steps h3 { transition:color .24s ease; }
.kr-demo__features button,.kr-demo__keyboard button { transition:background-color .24s ease,border-color .24s ease,color .24s ease; }
@media (hover:hover) and (pointer:fine) {
  .kolrelay-nav-link:hover { color:#514b9d !important;background:rgba(105,101,173,.09); }
  .kolrelay-task-platform:hover { color:#4d5684; }
  .kolrelay-task-platform:hover .platform-icon { border-color:#fff;box-shadow:0 0 0 1px rgba(119,139,179,.3),inset 0 1px 0 #fff,0 12px 24px rgba(46,55,66,.1);transform:translateY(-2px); }
  .kr-value__column:hover h3,.kr-cases__grid article:hover h3 { color:#4d6980; }
  .kr-process__tab:hover { color:#4c6090;border-color:rgba(107,129,173,.3); }
  .kr-process__steps article:hover h3 { color:#4d6980; }
  .kr-faq__list summary:hover { color:#59669c; }
  .kr-faq__list summary:hover span { color:#59669c;border-color:rgba(107,126,175,.4);background:rgba(255,255,255,.55); }
  .kr-demo__features button:hover { color:#bfe9f0;border-color:rgba(174,229,239,.28);background:rgba(174,229,239,.1); }
  .kr-demo__keyboard button:hover { color:#276f9b;background:#fff; }
}
.kr-value__column:focus-within h3,.kr-cases__grid article:focus-within h3,.kr-process__steps article:focus-within h3 { color:#4d6980; }
.kr-faq__list summary:focus-visible { outline:2px solid #788bbf;outline-offset:4px;border-radius:4px;color:#59669c; }
@media(prefers-reduced-motion:reduce) {
  .kolrelay-task-platform,.kr-value__column h3,.kr-cases__grid h3,.kr-faq__list summary,.kr-process__steps h3,.kr-demo__features button,.kr-demo__keyboard button { transition:none; }
}