/* =========================================================
   CASE · SIL GROUP — sells the result, not the design
   ========================================================= */
.sx-h { font-weight: 500; font-size: clamp(2.5rem, min(5.6vw, 80.64px), 6.2rem); line-height: 1; letter-spacing: -.04em; max-width: 20ch; }
.sx-h .mute { display: block; color: var(--mist); }

/* draft flag: figures taken from the layout, not yet confirmed by the client */
.sx-draft { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .78rem; line-height: 1.35; color: #F2C14E; }
.sx-draft i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #F2C14E; }

/* HERO */
.sx-hero { position: relative; overflow: hidden; background: #0E0F11; color: #E3E7ED; padding: calc(76px + clamp(28px, min(4vw, 57.6px), 56px)) max(var(--gx), env(safe-area-inset-right, 0px)) 0 max(var(--gx), env(safe-area-inset-left, 0px)); }
.sx-hero::before { content: ""; position: absolute; left: 50%; bottom: -10%; width: 120%; height: 62%; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 60%, rgba(226, 73, 43, .34), transparent 70%); pointer-events: none; }
.sx-hero > * { position: relative; }
.sx-hero .crumbs { color: #9CA2AD; margin-bottom: clamp(20px, min(2.4vw, 34.56px), 32px); }
.sx-hero__h { font-weight: 500; font-size: clamp(3rem, min(9vw, 129.6px), 10.6rem); line-height: .98; letter-spacing: -.045em; }
.sx-hero__h b { font-weight: inherit; font-variant-numeric: tabular-nums; }
.sx-l { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.sx-l i { display: block; font-style: normal; }
.js .sx-l i { animation: sxUp 1.1s var(--ease) both; }
.js .sx-l:nth-child(2) i { animation-delay: .1s; } .js .sx-l:nth-child(3) i { animation-delay: .2s; }
@keyframes sxUp { from { transform: translateY(105%); } to { transform: none; } }
.sx-l--m { color: #6F7580; }
.sx-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-top: clamp(28px, min(3.4vw, 48.96px), 48px); }
.sx-hero__lead { max-width: 52ch; color: #B7BCC5; font-size: clamp(1.02rem, min(1.25vw, 18px), 1.25rem); line-height: 1.45; }
.sx-hero__cta { flex: none; }
.sx-goal { margin-top: clamp(28px, min(3.4vw, 48.96px), 48px); }
.sx-goal__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; font-size: .95rem; color: #B7BCC5; }
.sx-goal__top b { font-weight: 500; font-size: 1.5rem; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.sx-goal__bar { height: 6px; margin: 12px 0 12px; background: rgba(227, 231, 237, .14); overflow: hidden; }
.sx-goal__bar i, .sx-card__bar i { display: block; height: 100%; width: 43%; background: var(--signal); transform-origin: left; }
.js .sx-goal__bar i { animation: sxBar 2s var(--ease) .3s both; }
@keyframes sxBar { from { transform: scaleX(0); } to { transform: none; } }
.sx-hero__shot { position: relative; left: 0; top: 0; width: 100%; margin: clamp(40px, min(5vw, 72px), 72px) 0 calc(clamp(40px, min(8vw, 115.2px), 140px) * -1); box-shadow: 0 -30px 100px -30px rgba(0, 0, 0, .9); }
.sx-hero__shot img { display: block; width: 100%; height: auto; }

/* SHIFT */
.sx-shift { padding: var(--sec) max(var(--gx), env(safe-area-inset-right, 0px)) var(--sec) max(var(--gx), env(safe-area-inset-left, 0px)); }
.sx-table { margin-top: clamp(40px, min(5vw, 72px), 72px); border-top: 1px solid var(--line); }
.sx-tr { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, .9fr) minmax(0, 1.4fr); gap: 16px clamp(16px, min(3vw, 43.2px), 48px); align-items: baseline; padding: clamp(18px, min(2.2vw, 31.68px), 30px) 0; border-bottom: 1px solid var(--line); color: var(--slate); font-size: clamp(1rem, min(1.3vw, 18.72px), 1.3rem); line-height: 1.3; }
.sx-tr > span:nth-child(2) { color: #8C929C; text-decoration: line-through; text-decoration-color: rgba(226, 73, 43, .6); text-decoration-thickness: 1px; }
.sx-tr > b { font-weight: 500; font-size: clamp(1.3rem, min(2.3vw, 33.12px), 2.3rem); letter-spacing: -.025em; line-height: 1.1; color: var(--graphite); }
.sx-tr--head { padding-block: 12px; font-size: .86rem; }
.sx-tr--head > span:nth-child(2) { text-decoration: none; }
.sx-tr--head > span:nth-child(3) { color: var(--signal); font-weight: 600; }
.js .sx-table .sx-tr:not(.sx-tr--head) { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .sx-table .sx-tr.in { opacity: 1; transform: none; }

/* CAMPAIGN */
.sx-camp { background: #0E0F11; color: #E3E7ED; padding: var(--sec) max(var(--gx), env(safe-area-inset-right, 0px)) var(--sec) max(var(--gx), env(safe-area-inset-left, 0px)); }
.sx-camp__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, min(6vw, 86.4px), 110px); align-items: center; }
.sx-camp .sx-h .mute, .sx-mob .sx-h .mute { color: #6F7580; }
.sx-camp__p { margin-top: 24px; max-width: 46ch; color: #B7BCC5; font-size: clamp(1rem, min(1.25vw, 18px), 1.2rem); line-height: 1.45; }
.sx-camp__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(32px, min(4vw, 57.6px), 56px); padding-top: 24px; border-top: 1px solid rgba(227, 231, 237, .16); }
.sx-camp__nums b { display: block; font-weight: 500; font-size: clamp(3rem, min(6vw, 86.4px), 6.4rem); line-height: .95; letter-spacing: -.055em; color: var(--signal); }
.sx-camp__nums span { display: block; margin-top: 12px; max-width: 30ch; font-size: .92rem; line-height: 1.4; color: #B7BCC5; }
.sx-card { padding: clamp(22px, min(2.6vw, 37.44px), 36px); border-radius: 20px; background: #F1F3F6; color: #0E0F11; box-shadow: 0 60px 120px -40px rgba(226, 73, 43, .45); }
.sx-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.sx-card__live { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 500; }
.sx-card__live i { width: 8px; height: 8px; border-radius: 50%; background: #2EBA70; box-shadow: 0 0 0 0 rgba(46, 186, 112, .5); animation: sxPulse 1.8s infinite; }
@keyframes sxPulse { to { box-shadow: 0 0 0 10px rgba(46, 186, 112, 0); } }
.sx-card__top b { font-weight: 500; font-size: clamp(3rem, min(5.4vw, 77.76px), 5.6rem); line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.sx-card__bar { height: 8px; margin: 14px 0 12px; background: rgba(14, 15, 17, .1); overflow: hidden; }
.sx-card__bar i { transform: scaleX(0); transition: transform 2s var(--ease) .2s; }
.sx-card.in .sx-card__bar i { transform: none; }
.sx-card dl { margin: 0; }
.sx-card dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(14, 15, 17, .1); font-size: .95rem; }
.sx-card dt { color: var(--slate); }
.sx-card dd { margin: 0; text-align: right; font-weight: 500; }
.sx-card dd b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-card .sx-draft { margin-top: 14px; color: #9A6B00; }
.sx-card .sx-draft i { background: #D29A12; }

/* DECISIONS */
.sx-dec { padding: var(--sec) max(var(--gx), env(safe-area-inset-right, 0px)) 0 max(var(--gx), env(safe-area-inset-left, 0px)); }
.sx-dec__list { margin: clamp(40px, min(5vw, 72px), 72px) 0 0; padding: 0; list-style: none; }
.sx-d { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, min(5vw, 72px), 96px); align-items: center; padding-block: clamp(40px, min(5vw, 72px), 80px); border-top: 1px solid var(--line); }
.sx-d--flip .sx-d__txt { order: 2; }
.sx-d__n { font-size: .86rem; font-weight: 600; color: var(--signal); }
.sx-d h3 { margin-top: 14px; font-weight: 500; font-size: clamp(2rem, min(3.6vw, 51.84px), 3.8rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.sx-d__txt > p { margin-top: 18px; max-width: 46ch; color: var(--slate); font-size: clamp(1rem, min(1.2vw, 17.28px), 1.15rem); line-height: 1.45; }
.sx-d__txt > p.sx-d__fix { padding-left: 16px; border-left: 2px solid var(--signal); color: var(--graphite); }
.sx-d__fix em { display: block; margin-bottom: 6px; font-style: normal; font-size: .78rem; font-weight: 600; color: var(--signal); }
.sx-d__vis { min-width: 0; }
.sx-d__vis .browser { position: relative; left: 0; top: 0; width: 100%; box-shadow: 0 50px 100px -44px rgba(14, 15, 17, .55); }
.sx-d__vis .browser img { display: block; width: 100%; height: auto; }

/* chain */
.kx-chain { position: relative; height: 480px; padding: 0; }
.kx-nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.kx-nodes::before, .kx-nodes::after { content: ""; position: absolute; left: 13px; top: 3%; height: 88%; width: 2px; background: var(--line); }
.kx-nodes::after { background: var(--signal); transform-origin: top; transform: scaleY(var(--k, 0)); }
.kx-nodes li { position: absolute; z-index: 1; top: var(--y); left: 0; display: grid; grid-template-columns: 28px auto; column-gap: 18px; align-items: center; opacity: .28; transform: translateX(-8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.kx-nodes li i { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; font-style: normal; font-size: .64rem; font-weight: 700; background: var(--steel); color: var(--slate); border: 1px solid var(--line); transition: background .4s, color .4s; }
.kx-nodes li b { font-weight: 500; font-size: clamp(1.1rem, min(1.6vw, 23.04px), 1.5rem); letter-spacing: -.025em; line-height: 1.15; }
.kx-nodes li span { font-size: .86rem; color: var(--slate); }
.kx-nodes li.on { opacity: 1; transform: none; }
.kx-nodes li.on i { background: var(--signal); color: #0E0F11; border-color: var(--signal); }
.kx-nodes li.key.on i { box-shadow: 0 0 0 7px rgba(226, 73, 43, .18); }

/* doors */
.sx-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sx-door { display: flex; flex-direction: column; min-height: clamp(340px, min(30vw, 432px), 460px); padding: clamp(20px, min(2.2vw, 31.68px), 32px); border-radius: 16px; background: #0E0F11; color: #E3E7ED; transition: transform .6s var(--ease); }
.sx-door--a { background: var(--signal); color: #0E0F11; }
.sx-door:hover { transform: translateY(-8px); }
.sx-door > span { font-size: .92rem; font-weight: 500; }
.sx-door > b { margin-top: 10px; font-weight: 500; font-size: clamp(2.6rem, min(4.6vw, 66.24px), 4.8rem); line-height: 1; letter-spacing: -.055em; }
.sx-door ul { margin: auto 0 0; padding: 24px 0 0; list-style: none; font-size: .92rem; line-height: 1.35; }
.sx-door li { padding: 10px 0; border-top: 1px solid rgba(227, 231, 237, .18); }
.sx-door--a li { border-top-color: rgba(14, 15, 17, .22); }

/* walk through the landing */
.kx-scroll { position: relative; height: 340vh; background: var(--steel); }
.kx-scroll__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, min(5vw, 72px), 80px); align-items: center; padding: 100px max(var(--gx), env(safe-area-inset-right, 0px)) 32px max(var(--gx), env(safe-area-inset-left, 0px)); }
.kx-scroll__txt { display: grid; gap: clamp(20px, min(2.6vw, 37.44px), 36px); }
.kx-scroll__txt .sx-h { font-size: clamp(2.2rem, min(4vw, 57.6px), 4.6rem); }
.kx-ch { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.kx-ch li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--mist); transition: color .3s, padding .4s var(--ease); }
.kx-ch li b { display: block; font-weight: 500; font-size: clamp(1.05rem, min(1.5vw, 21.6px), 1.45rem); letter-spacing: -.02em; }
.kx-ch li span { display: block; height: 0; overflow: hidden; font-size: .9rem; opacity: 0; transition: opacity .3s, height .4s var(--ease); }
.kx-ch li.on { color: var(--graphite); padding-left: 14px; box-shadow: inset 3px 0 0 var(--signal); }
.kx-ch li.on span { height: 1.5em; opacity: 1; color: var(--slate); }
.kx-mac { position: relative; left: 0; top: 0; width: 100%; height: min(78vh, 760px); display: flex; flex-direction: column; box-shadow: 0 50px 100px -40px rgba(14, 15, 17, .5); }
.kx-mac .browser__bar { flex: none; }
.kx-mac__view { flex: 1; position: relative; overflow: hidden; background: #000; }
.kx-mac__view img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(var(--ty, 0px)); will-change: transform; }
.kx-mac__bar { position: absolute; right: -14px; top: 30px; bottom: 0; width: 3px; background: var(--line); }
.kx-mac__bar i { display: block; width: 100%; height: calc(var(--p, 0) * 100%); background: var(--signal); }

/* phone */
.sx-mob { background: #0E0F11; color: #E3E7ED; overflow: hidden; padding: var(--sec) max(var(--gx), env(safe-area-inset-right, 0px)) 0 max(var(--gx), env(safe-area-inset-left, 0px)); }
.sx-mob__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, min(5vw, 72px), 96px); align-items: start; }
.sx-mob .btn { margin-top: 32px; }
.kx-phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, min(3vw, 43.2px), 40px); margin-bottom: -120px; }
.kx-phone { flex: none; width: clamp(200px, min(21vw, 302.4px), 300px); aspect-ratio: 390 / 844; padding: 10px; border-radius: 44px; background: #23262B; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.kx-phone--up { margin-top: 56px; }
.kx-phone__v { position: relative; height: 100%; overflow: hidden; border-radius: 34px; background: #000; container-type: size; }
.kx-phone__v img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.kx-phone__v img.auto { animation: kxPhone 26s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes kxPhone { 0%, 6% { transform: translateY(0); } 100% { transform: translateY(calc(-100% + 100cqh)); } }

.cdet { padding-block: 0 clamp(48px, min(6vw, 86.4px), 88px); }
.cdet .cnext > span { font-size: .86rem; color: var(--slate); }

@media (max-width: 1100px) {
  .sx-camp__grid, .sx-d, .sx-mob__grid { grid-template-columns: minmax(0, 1fr); }
  .sx-d--flip .sx-d__txt { order: 0; }
  .kx-scroll { height: auto; } .kx-scroll__pin { position: relative; height: auto; grid-template-columns: minmax(0, 1fr); padding-block: var(--sec); }
  .kx-mac { height: 70vh; }
  .kx-mac__view img { animation: kxPhone 40s cubic-bezier(.45, 0, .55, 1) infinite alternate; container-type: normal; }
  .kx-mac__view { container-type: size; }
  .kx-mac__bar { display: none; }
  .kx-ch li span { height: 1.5em; opacity: 1; color: var(--slate); }
  .kx-ch li { color: var(--graphite); }
  .kx-ch li.on { padding-left: 0; box-shadow: none; }
}
@media (max-width: 720px) {
  .sx-hero__h { font-size: min(15.4vw, 221.76px); }
  .sx-hero__cta { width: 100%; justify-content: space-between; }
  .sx-goal__top { flex-direction: column; }
  .sx-tr { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sx-tr--head { display: none; }
  .sx-tr > span:first-child { font-size: .8rem; font-weight: 600; color: var(--signal); }
  .sx-camp__nums, .sx-doors { grid-template-columns: minmax(0, 1fr); }
  .sx-door { min-height: 0; }
  .kx-phone:not(.kx-phone--up) { display: none; }
  .kx-phone--up { margin-top: 0; width: 72%; }
  .kx-phones { margin-bottom: -80px; }
  .kx-chain { height: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .sx-l i, .js .sx-goal__bar i, .kx-phone__v img.auto, .kx-mac__view img { animation: none !important; }
  .js .sx-table .sx-tr:not(.sx-tr--head) { opacity: 1; transform: none; }
  .sx-card__bar i { transform: none; }
}

/* Cyrillic needs looser tracking than the shared CTA title */
.cta .cta__h { letter-spacing: -.04em; line-height: 1; max-width: 18ch; }


/* cases without confirmed numbers yet: result slots */
.sx-hero__h--t { font-size: clamp(2.8rem, min(7.6vw, 109.44px), 9rem); line-height: 1; }
.sx-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(28px, min(3.4vw, 48.96px), 48px); border-top: 1px solid rgba(227, 231, 237, .16); }
.sx-res > div { padding: 18px 20px 0 0; border-right: 1px solid rgba(227, 231, 237, .16); }
.sx-res > div:not(:first-child) { padding-left: 20px; }
.sx-res > div:last-child { border-right: 0; }
.sx-res b { display: block; font-weight: 500; font-size: clamp(2.6rem, min(5vw, 72px), 5.4rem); line-height: 1; color: var(--signal); }
.sx-res span { display: block; margin-top: 8px; font-size: .95rem; color: #B7BCC5; }
.sx-draft--res { margin-top: 16px; }
.sx-hero__shot--m { max-width: 1000px; margin-inline: auto; }
.sx-hero__shot--p { margin-inline: 0; }
.sx-hero__shot--p img { display: block; width: 100%; height: auto; }
.sx-fig { margin: 0; overflow: hidden; }
.sx-fig img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.sx-fig:hover img { transform: scale(1.03); }
.sx-fig--w { background: #fff; display: grid; place-items: center; }
.sx-fig--w img { width: min(70%, 460px); }
.sx-door--cert { min-height: clamp(320px, min(26vw, 374.4px), 420px); }
.sx-lang { padding: clamp(24px, min(3vw, 43.2px), 40px); background: #EEF1F4; }
.sx-lang .sl__h { font-size: clamp(2rem, min(3.6vw, 51.84px), 3.8rem); margin-top: 24px; }
.sx-lang .ci-chips button { border-color: var(--line); }
.sx-d__vis .mo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-d__vis .mo__s { min-height: 150px; }
.sx-d__vis .mo__line { margin-top: 0; }
.ci__h { letter-spacing: -.04em; line-height: 1; max-width: 20ch; }
.ci__h .mute { display: block; }
@media (max-width: 720px) {
  .sx-hero__h--t { font-size: min(12.5vw, 180px); }
  .sx-res { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .sx-res > div, .sx-res > div:not(:first-child) { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-right: 0; border-top: 1px solid rgba(227, 231, 237, .16); }
  .sx-res span { margin-top: 0; }
  .sx-res b { font-size: 2rem; }
}
.cta .cta__h .mute { display: block; }
/* the result on the case page itself: the same figure as on the home page */
.sx-hero__fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin-top: clamp(28px, min(3.4vw, 48.96px), 48px); padding-top: 18px; border-top: 1px solid rgba(227, 231, 237, .16); }
.sx-hero__fig b { font-family: var(--fd); font-stretch: 112%; font-weight: 500; font-size: clamp(2.4rem, min(5vw, 72px), 4.5rem); letter-spacing: -.035em; line-height: 1; color: #E3E7ED; white-space: nowrap; }
.sx-hero__fig span { color: #B7BCC5; font-size: clamp(1rem, min(1.2vw, 17.28px), 1.15rem); }