body.blue #process.phone-process { padding: 55px 0px 0px; background: rgb(16, 44, 103); overflow: clip; }
body.blue #process.phone-process > .container { position: relative; max-width: 1240px; min-height: 0px; }
body.blue #process.phone-process .process-scene { position: relative; display: flex; flex-direction: column; height: calc(100svh - var(--phone-pin-top,100px)); min-height: 650px; overflow: hidden; }
body.blue #process.phone-process .section-heading { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0px; margin: 0px; flex-shrink: 0; padding-top: 12px; }
body.blue #process.phone-process .section-heading .eyebrow { font-size: 9px; color: rgb(164, 190, 230); margin-bottom: 15px; }
body.blue #process.phone-process .section-heading h2 { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.1; max-width: 850px; margin: 0px; color: rgb(239, 245, 255); }
body.blue #process.phone-process #step-text { font-size: 17px; line-height: 1.6; max-width: 650px; min-height: 55px; margin: 20px 0px 12px; color: rgb(193, 209, 235); letter-spacing: -0.02em; }
body.blue #process.phone-process .process-current { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 10px; color: rgb(159, 185, 224); min-height: 26px; margin-bottom: 22px; }
body.blue #process.phone-process #active-step-title { display: none; }
body.blue #process.phone-process .process-current .text-link { margin: 0px; font-size: 10px; padding: 3px 0px; color: rgb(212, 227, 251); }
body.blue #process.phone-process .step-list { --stage-size: 42px; position: relative; display: flex; justify-content: space-between; gap: 18px; border: 0px; padding: 0px; margin: 0px auto; width: min(100%, 1000px); flex-shrink: 0; isolation: isolate; }
body.blue #process.phone-process .step-list::before { content: ""; position: absolute; left: calc(var(--stage-size)/2); right: calc(var(--stage-size)/2); top: calc(var(--stage-size)/2); height: 1px; background: rgba(107, 139, 185, 0.3); z-index: -1; }
body.blue #process.phone-process .step-list::after { display: none; }
body.blue #process.phone-process .step-button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; min-height: 92px; width: var(--stage-size); flex: 0 0 var(--stage-size); padding: 0px; background: none; border: 0px; text-align: center; color: rgb(141, 169, 209); cursor: pointer; }
body.blue #process.phone-process .step-number { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; width: var(--stage-size); height: var(--stage-size); margin: 0px; background: rgb(16, 44, 103); border: 1px solid rgb(110, 144, 189); border-radius: 50%; padding: 0px; font-size: 9px; color: rgb(157, 183, 220); transition: background-color 0.25s, color 0.25s, border-color 0.25s; flex-shrink: 0; }
body.blue #process.phone-process .step-number > svg { width: 15px; height: 15px; stroke-width: 1.5; }
body.blue #process.phone-process .step-label { flex: 0 0 auto; width: 175px; align-self: center; }
body.blue #process.phone-process .step-label strong { display: block; font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; max-width: none; }
body.blue #process.phone-process .step-label small { display: block; font-size: 9px; line-height: 1.5; margin-top: 3px; color: rgb(145, 172, 212); }
body.blue #process.phone-process .step-button:first-child .step-label { align-self: flex-start; text-align: left; }
body.blue #process.phone-process .step-button:last-child .step-label { align-self: flex-end; text-align: right; }
body.blue #process.phone-process .step-button.active { color: rgb(239, 245, 255); }
body.blue #process.phone-process .step-button.active .step-number { background: rgb(227, 237, 255); border-color: rgb(227, 237, 255); color: rgb(16, 44, 103) !important; }
body.blue #process.phone-process .step-button.complete .step-number { border-color: rgb(175, 199, 239); color: rgb(224, 235, 255); }
body.blue #process.phone-process .step-button:last-child.active .step-number { background: rgb(87, 217, 163); border-color: rgb(87, 217, 163); color: rgb(8, 62, 48) !important; }
body.blue #process.phone-process .step-button:last-child.active .step-label { color: rgb(121, 231, 185); }
body.blue #process.phone-process .phone-demo-caption { text-align: center; margin: 12px 0px 8px; font-size: 9px; line-height: 1.5; color: rgb(159, 183, 219); flex-shrink: 0; }
body.blue #process.phone-process .process-layout { display: flex; justify-content: center; position: static; top: auto; width: 100%; padding: 0px; flex: 1 1 0%; min-height: 0px; max-width: none; margin: 0px; gap: 0px; }
body.blue #process.phone-process .step-panel { display: block; align-self: stretch; padding: 0px; min-height: 0px; min-width: 0px; width: min(620px, 100%); height: 100%; }
body.blue #process.phone-process .process-footnote { position: static; font-size: 9px; line-height: 1.6; max-width: 700px; text-align: center; color: rgb(148, 172, 209); margin: 0px auto; padding: 14px 0px 22px; }
.phone-crop { display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 100%; padding: 18px 12px 0px; overflow: hidden; position: relative; }
.iphone-mockup { position: relative; width: min(560px, 100%); min-width: 0px; aspect-ratio: 9 / 18.6; padding: 9px; border: 1px solid rgb(155, 167, 187); border-radius: 65px; background: rgb(17, 24, 36); box-shadow: rgb(6, 12, 24) 0px 0px 0px 2px, rgba(3, 13, 41, 0.333) 0px 24px 75px, rgb(81, 92, 107) 0px 0px 0px 2px inset; flex-shrink: 0; transform: none; }
.iphone-screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 55px; background: rgb(231, 237, 244); color: rgb(22, 37, 68); overflow: hidden; isolation: isolate; }
.iphone-side-key { position: absolute; background: rgb(136, 151, 173); width: 3px; left: -4px; border-radius: 2px; }
.iphone-key-one { top: 140px; height: 35px; }
.iphone-key-two { top: 195px; height: 75px; }
.iphone-statusbar { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 60px; height: 60px; flex-shrink: 0; padding: 16px 28px 7px; font-size: 16px; font-weight: 600; background: rgb(247, 249, 252); color: rgb(20, 32, 57); }
.iphone-statusbar > svg { width: 68px; height: 19px; }
.iphone-island { width: 130px; height: 34px; background: rgb(7, 13, 23); border-radius: 24px; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
.telegram-header { display: flex; align-items: center; gap: 12px; min-height: 73px; height: 73px; flex-shrink: 0; padding: 9px 21px 13px 18px; background: rgb(247, 249, 252); border-bottom: 1px solid rgb(211, 222, 235); }
.telegram-back { font-size: 45px; line-height: 1; font-family: Inter, Arial, sans-serif; font-weight: 300; color: rgb(39, 135, 207); margin-right: 4px; }
.telegram-header-avatar { height: 44px; width: 44px; min-width: 44px; background: rgb(49, 141, 207); border-radius: 50%; display: grid; place-items: center; color: rgb(255, 255, 255); font-size: 14px; font-weight: 600; letter-spacing: -0.5px; }
.telegram-header > div { min-width: 0px; flex: 1 1 0%; }
.telegram-header strong { display: block; font-size: 17px; letter-spacing: -0.025em; font-weight: 600; }
.telegram-header small { display: block; font-size: 12px; color: rgb(117, 137, 164); margin-top: 4px; }
.telegram-header-more { font-size: 14px; letter-spacing: 2px; color: rgb(49, 138, 204); }
.telegram-stage-label { display: flex; justify-content: space-between; gap: 12px; padding: 11px 20px; font-size: 11px; color: rgb(107, 132, 161); background: rgb(239, 244, 249); border-bottom: 1px solid rgb(216, 226, 237); flex-shrink: 0; }
.telegram-messages { display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; min-height: 100px; height: 360px; padding: 14px 15px 22px; overflow: hidden; pointer-events: none; background: rgb(231, 237, 244); scrollbar-width: none; overscroll-behavior: contain; }
.telegram-messages::-webkit-scrollbar { display: none; }
.telegram-messages > * { flex-shrink: 0; }
.telegram-day { align-self: center; border-radius: 15px; padding: 5px 11px; margin-bottom: 1px; background: rgb(214, 225, 237); font-size: 10px; color: rgb(117, 139, 166); line-height: 1.3; }
.telegram-message { max-width: 91%; padding: 13px 15px 9px; border-radius: 17px; box-shadow: rgba(27, 53, 85, 0.08) 0px 1px 1px; }
.telegram-out { align-self: flex-end; background: rgb(212, 234, 255); border-bottom-right-radius: 5px; }
.telegram-in { align-self: flex-start; background: rgb(255, 255, 255); border-bottom-left-radius: 5px; }
.telegram-speaker { display: block; font-size: 11px; font-weight: 600; color: rgb(39, 132, 196); margin-bottom: 6px; }
.blue .telegram-message p { font-family: Inter, Arial, sans-serif; font-size: 15px; line-height: 1.5; letter-spacing: -0.012em; margin: 0px; color: rgb(38, 62, 90); }
.telegram-message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 6px; font-size: 9px; color: rgb(121, 152, 180); }
.telegram-message-meta svg { width: 13px; height: 13px; color: rgb(90, 154, 195); }
.telegram-file { display: flex; align-items: center; align-self: flex-start; gap: 11px; max-width: 91%; padding: 13px 15px; background: rgb(255, 255, 255); border-radius: 17px 17px 17px 5px; box-shadow: rgba(27, 53, 85, 0.08) 0px 1px 1px; }
.telegram-file-icon { display: grid; place-items: center; flex-shrink: 0; background: rgb(224, 239, 251); color: rgb(45, 138, 202); width: 38px; height: 42px; border-radius: 7px; }
.telegram-file-icon svg { width: 24px; height: 24px; }
.telegram-file strong { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; display: block; }
.telegram-file small { font-size: 10px; color: rgb(124, 144, 170); display: block; margin-top: 4px; }
.blue .telegram-status h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.35; color: rgb(33, 71, 110); margin: 0px 0px 7px; }
.blue .telegram-status p { font-size: 14px; line-height: 1.5; color: rgb(83, 111, 141); }
.telegram-compose, .iphone-home-bar { display: none; }
@media (prefers-reduced-motion: no-preference) {
  body.blue.motion-ready #process.phone-process > .container { min-height: 360svh; }
  body.blue.motion-ready #process.phone-process .process-scene { position: sticky; top: var(--phone-pin-top,100px); }
  body.blue.motion-ready #process.phone-process .process-layout { position: static; padding: 0px; top: auto; }
  body.blue.motion-ready #process.phone-process .process-footnote { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 100%; }
}
@media (min-width: 701px) and (max-height: 800px) {
  body.blue #process.phone-process .process-scene { min-height: 560px; }
  body.blue #process.phone-process .section-heading h2 { font-size: 34px; }
  body.blue #process.phone-process .section-heading .eyebrow { margin-bottom: 10px; }
  body.blue #process.phone-process #step-text { font-size: 15px; min-height: 48px; margin-top: 12px; }
  body.blue #process.phone-process .process-current { margin-bottom: 12px; }
  .iphone-statusbar { height: 48px; min-height: 48px; }
  .telegram-header { height: 58px; min-height: 58px; }
  .iphone-island { height: 28px; top: 8px; }
}
@media (max-width: 700px) {
  body.blue #process.phone-process { padding-top: 35px; }
  body.blue #process.phone-process .process-scene { min-height: 570px; }
  body.blue #process.phone-process .section-heading h2 { font-size: 29px; }
  body.blue #process.phone-process .section-heading .eyebrow { font-size: 8px; margin-bottom: 10px; }
  body.blue #process.phone-process #step-text { font-size: 13px; line-height: 1.5; min-height: 60px; margin: 14px 0px 8px; max-width: 420px; }
  body.blue #process.phone-process .process-current { gap: 10px; font-size: 8px; margin-bottom: 14px; }
  body.blue #process.phone-process .process-current .text-link { font-size: 8px; }
  body.blue #process.phone-process .step-list { --stage-size: 34px; gap: 5px; }
  body.blue #process.phone-process .step-button { min-height: 84px; gap: 8px; }
  body.blue #process.phone-process .step-label { width: 64px; }
  body.blue #process.phone-process .step-label strong { font-size: 8px; line-height: 1.35; }
  body.blue #process.phone-process .step-label small { font-size: 6px; max-width: 64px; }
  body.blue #process.phone-process .step-number { font-size: 7px; gap: 2px; }
  body.blue #process.phone-process .step-number > svg { width: 12px; height: 12px; }
  body.blue #process.phone-process .phone-demo-caption { font-size: 7px; margin: 8px 0px 4px; }
  .phone-crop { padding: 12px 7px 0px; }
  .iphone-mockup { width: min(390px, 100%); border-radius: 45px; padding: 7px; }
  .iphone-screen { border-radius: 37px; }
  .iphone-statusbar { min-height: 40px; height: 40px; font-size: 11px; padding: 10px 18px 5px; }
  .iphone-island { width: 90px; height: 24px; top: 7px; }
  .iphone-statusbar > svg { width: 46px; height: 15px; }
  .telegram-header { min-height: 54px; height: 54px; padding: 7px 11px 9px; gap: 8px; }
  .telegram-back { font-size: 32px; }
  .telegram-header-avatar { height: 30px; width: 30px; min-width: 30px; font-size: 10px; }
  .telegram-header strong { font-size: 13px; }
  .telegram-header small { font-size: 9px; }
  .telegram-stage-label { padding: 8px 12px; font-size: 8px; }
  .telegram-messages { padding: 10px; gap: 8px; }
  .telegram-message { padding: 10px 12px 7px; }
  .telegram-speaker { font-size: 8px; }
  .blue .telegram-message p { font-size: 12px; }
  .telegram-message-meta { font-size: 7px; }
  .telegram-file { padding: 10px 12px; gap: 8px; }
  .telegram-file strong { font-size: 11px; }
  .telegram-file small { font-size: 8px; }
  .telegram-file-icon { width: 28px; height: 32px; }
  .blue .telegram-status h3 { font-size: 13px; }
  .blue .telegram-status p { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  body.blue #process.phone-process > .container { min-height: 0px !important; }
  body.blue #process.phone-process .process-scene { position: relative !important; top: auto !important; }
  body.blue #process.phone-process .process-layout { position: static !important; }
  .phone-scroll-hint { display: none; }
}
body.blue #process.phone-process .phone-crop { perspective: 1400px; padding-top: 22px; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 91%, transparent 100%); }
body.blue #process.phone-process .iphone-mockup { width: min(560px, 100%); aspect-ratio: 560 / 1190; padding: 13px; border: 0px; border-radius: 13.5% / 6.35%; background: transparent; box-shadow: rgba(3, 8, 23, 0.467) 0px 28px 65px; transform: translateY(var(--phone-exit-y,0px)) scale(var(--phone-exit-scale,1)) rotateX(var(--phone-exit-tilt,0deg)); transform-origin: 50% 65%; will-change: transform; isolation: isolate; }
body.blue #process.phone-process .iphone-mockup::before { content: ""; position: absolute; inset: 0px; z-index: 3; background: url("assets/iphone-graphite-frame.svg") center center / 100% 100% no-repeat; pointer-events: none; }
body.blue #process.phone-process .iphone-screen { border-radius: 12% / 5.7%; background: rgb(231, 237, 244); box-shadow: rgb(5, 6, 8) 0px 0px 0px 4px; isolation: isolate; }
body.blue #process.phone-process .iphone-screen::after { content: ""; position: absolute; inset: 0px; z-index: 5; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.125) 0.1%, rgba(255, 255, 255, 0.024) 12%, transparent 33%); border-radius: inherit; box-shadow: rgba(255, 255, 255, 0.13) 0px 1px 2px inset; }
body.blue #process.phone-process .iphone-island { width: 118px; height: 32px; top: 10px; background: rgb(3, 4, 7); box-shadow: rgba(255, 255, 255, 0.04) 0px 0px 0px 1px, rgb(0, 0, 0) 0px 1px 2px inset; }
body.blue #process.phone-process .iphone-island::after { content: ""; position: absolute; right: 10px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgb(26, 41, 74), rgb(7, 11, 19) 45%, rgb(1, 2, 3) 70%); box-shadow: rgb(10, 11, 14) 0px 0px 0px 2px; }
body.blue #process.phone-process .iphone-side-key { left: -3px; width: 3px; background: linear-gradient(90deg, rgb(17, 18, 21), rgb(125, 126, 130), rgb(27, 28, 32)); box-shadow: rgb(0, 0, 0) 0px 1px 1px; z-index: -1; }
body.blue #process.phone-process .iphone-mockup::after { content: ""; position: absolute; right: -3px; top: 235px; width: 3px; height: 86px; border-radius: 2px; background: linear-gradient(90deg, rgb(25, 26, 30), rgb(119, 120, 123), rgb(20, 21, 25)); z-index: -1; }
@media (max-width: 700px) {
  body.blue #process.phone-process .iphone-mockup { width: min(390px, 100%); padding: 9px; }
  body.blue #process.phone-process .iphone-island { width: 84px; height: 24px; top: 7px; }
  body.blue #process.phone-process .iphone-island::after { right: 7px; top: 7px; width: 8px; height: 8px; }
  body.blue #process.phone-process .iphone-mockup::after { top: 165px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  body.blue #process.phone-process .iphone-mockup { transform: none; will-change: auto; }
}
body.blue #process.phone-process .process-current { display: none; }
body.blue #process.phone-process .section-heading { padding-top: 8px; }
body.blue #process.phone-process #step-text { min-height: 52px; margin: 16px 0px 20px; }
body.blue #process.phone-process .phone-demo-caption { margin: 8px 0px 0px; }
@media (min-width: 1000px) {
  body.blue #process.phone-process .section-heading h2 br { display: none; }
  body.blue #process.phone-process .section-heading h2 br::after { content: " "; }
}
@media (min-width: 701px) and (max-height: 800px) {
  body.blue #process.phone-process .section-heading h2 { font-size: 32px; }
  body.blue #process.phone-process #step-text { font-size: 14px; min-height: 44px; margin: 12px 0px 16px; }
  body.blue #process.phone-process .step-button { min-height: 82px; }
  body.blue #process.phone-process .phone-crop { padding-top: 18px; }
}
body.blue #process.phone-process { background: rgb(0, 0, 0); padding-top: 65px; color: rgb(255, 255, 255); }
body.blue #process.phone-process .section-heading > .eyebrow { display: none; }
body.blue #process.phone-process .section-heading h2 { font-size: clamp(36px, 4.1vw, 62px); max-width: 1150px; line-height: 1.08; letter-spacing: -0.045em; color: rgb(255, 255, 255); }
body.blue #process.phone-process #step-text { font-size: 18px; line-height: 1.5; color: rgb(239, 239, 239); max-width: 710px; min-height: 60px; margin: 26px 0px 28px; }
body.blue #process.phone-process .step-list { width: min(820px, 90%); --stage-size: 44px; }
body.blue #process.phone-process .step-list::before { background: rgb(55, 55, 57); }
body.blue #process.phone-process .step-number { background: rgb(23, 23, 25); border-color: rgb(68, 68, 70); color: rgb(169, 169, 175); }
body.blue #process.phone-process .step-number > svg { width: 20px; height: 20px; stroke-width: 1.6; }
body.blue #process.phone-process .step-button { color: rgb(155, 155, 161); min-height: 88px; }
body.blue #process.phone-process .step-button.active { color: rgb(255, 255, 255); }
body.blue #process.phone-process .step-button.active .step-number { background: rgb(255, 255, 255); border-color: rgb(255, 255, 255); color: rgb(17, 17, 17) !important; }
body.blue #process.phone-process .step-button.complete .step-number { border-color: rgb(119, 119, 119); color: rgb(204, 204, 204); }
body.blue #process.phone-process .step-label small { color: rgb(140, 140, 147); }
body.blue #process.phone-process .phone-demo-caption, body.blue #process.phone-process .process-footnote { color: rgb(134, 134, 140); }
body.blue #process.phone-process .iphone-mockup { box-shadow: rgb(0, 0, 0) 0px 20px 60px; }
body.blue #process.phone-process .iphone-screen, body.blue #process.phone-process .telegram-messages { background: rgb(12, 13, 15); color: rgb(255, 255, 255); }
body.blue #process.phone-process .iphone-statusbar, body.blue #process.phone-process .telegram-header { background: rgb(17, 18, 20); color: rgb(246, 246, 248); }
body.blue #process.phone-process .telegram-header { border-color: rgb(37, 38, 43); }
body.blue #process.phone-process .telegram-header strong { color: rgb(245, 245, 247); }
body.blue #process.phone-process .telegram-header small { color: rgb(142, 145, 155); }
body.blue #process.phone-process .telegram-header-avatar { background: rgb(44, 47, 53); color: rgb(255, 255, 255); }
body.blue #process.phone-process .telegram-back, body.blue #process.phone-process .telegram-header-more { color: rgb(159, 200, 255); }
body.blue #process.phone-process .telegram-stage-label { background: rgb(23, 24, 28); border-color: rgb(40, 41, 47); color: rgb(155, 157, 167); }
body.blue #process.phone-process .telegram-day { background: rgb(33, 35, 41); color: rgb(160, 164, 175); }
body.blue #process.phone-process .telegram-in, body.blue #process.phone-process .telegram-file { background: rgb(36, 38, 44); box-shadow: none; }
body.blue #process.phone-process .telegram-out { background: rgb(35, 71, 106); box-shadow: none; }
body.blue #process.phone-process .telegram-message p, body.blue #process.phone-process .telegram-status p { color: rgb(224, 227, 235); }
body.blue #process.phone-process .telegram-status h3, body.blue #process.phone-process .telegram-file strong { color: rgb(255, 255, 255); }
body.blue #process.phone-process .telegram-speaker { color: rgb(159, 200, 255); }
body.blue #process.phone-process .telegram-file-icon { background: rgb(51, 62, 78); color: rgb(168, 207, 255); }
body.blue #process.phone-process .telegram-file small, body.blue #process.phone-process .telegram-message-meta { color: rgb(156, 169, 187); }
@media (min-width: 701px) and (max-height: 800px) {
  body.blue #process.phone-process .section-heading h2 { font-size: 40px; }
  body.blue #process.phone-process #step-text { font-size: 16px; min-height: 48px; margin: 20px 0px 22px; }
  body.blue #process.phone-process .step-button { min-height: 82px; }
}
@media (max-width: 700px) {
  body.blue #process.phone-process { padding-top: 40px; }
  body.blue #process.phone-process .section-heading h2 { font-size: 32px; }
  body.blue #process.phone-process #step-text { font-size: 14px; min-height: 63px; margin: 18px 0px 20px; }
  body.blue #process.phone-process .step-list { --stage-size: 36px; width: 100%; }
  body.blue #process.phone-process .step-number > svg { width: 17px; height: 17px; }
  body.blue #process.phone-process .step-button { min-height: 86px; }
}
body.blue #process.phone-process .phone-crop { perspective: none; mask-image: none; padding-top: 44px; }
body.blue #process.phone-process .iphone-mockup { width: min(460px, 100%); transform: translate3d(0,var(--phone-exit-y,0px),0); transform-origin: center center; background: rgb(3, 3, 4); box-shadow: none; }
body.blue #process.phone-process .iphone-screen::after { display: none; }
body.blue #process.phone-process .iphone-statusbar > span:first-child { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0px; }
body.blue #process.phone-process #telegram-stage-index { white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; letter-spacing: 0px; }
body.blue #process.phone-process .step-list { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); width: min(820px, 100%); gap: 12px; }
body.blue #process.phone-process .step-list::before { left: 10%; right: 10%; }
body.blue #process.phone-process .step-button { width: 100%; min-width: 0px; flex: 1 1 auto; align-items: center; }
body.blue #process.phone-process .step-label, body.blue #process.phone-process .step-button:first-child .step-label, body.blue #process.phone-process .step-button:last-child .step-label { width: 100%; min-width: 0px; align-self: center; text-align: center; }
body.blue #process.phone-process .step-button.active .step-number { background: rgb(255, 255, 255); border-color: rgb(255, 255, 255); color: rgb(17, 17, 17) !important; }
body.blue #process.phone-process .step-button:last-child.active .step-number { background: rgb(87, 217, 163); border-color: rgb(87, 217, 163); color: rgb(8, 62, 48) !important; }
body.blue .number-item { min-width: 0px; }
body.blue .number-item strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 700px) {
  body.blue #process.phone-process > .container { width: calc(100% - 40px); }
  body.blue #process.phone-process .process-scene { min-height: 0px; height: calc(100svh - var(--phone-pin-top,140px)); padding-bottom: 0px; }
  body.blue #process.phone-process .section-heading h2 { font-size: clamp(27px, 7.5vw, 32px); line-height: 1.08; }
  body.blue #process.phone-process #step-text { font-size: 14px; min-height: 63px; margin: 18px 0px 8px; }
  body.blue #process.phone-process .process-current { display: flex; font-size: 10px; color: rgb(161, 161, 166); margin: 0px 0px 20px; min-height: 16px; }
  body.blue #process.phone-process .process-current > #step-count, body.blue #process.phone-process .process-current > #active-step-title, body.blue #process.phone-process .process-current > #next-step { display: none; }
  body.blue #process.phone-process .step-list { gap: 6px; --stage-size: 36px; }
  body.blue #process.phone-process .step-button { min-height: 74px; gap: 9px; }
  body.blue #process.phone-process .step-label strong { font-size: 9px; line-height: 1.35; word-break: normal; overflow-wrap: normal; }
  body.blue #process.phone-process .step-label small { display: none; }
  body.blue #process.phone-process .phone-demo-caption { font-size: 8px; line-height: 1.45; margin: 6px 0px 0px; }
  body.blue #process.phone-process .phone-scroll-hint { display: none; }
  body.blue #process.phone-process .phone-crop { padding: 26px 7px 0px; }
  body.blue #process.phone-process .iphone-mockup { width: min(340px, 100%); }
  body.blue #process.phone-process .iphone-statusbar { height: 40px; min-height: 40px; font-size: 11px; padding: 10px 16px 5px; }
  body.blue #process.phone-process .iphone-statusbar > svg { width: 46px; flex-shrink: 0; }
  body.blue #process.phone-process .telegram-stage-label { align-items: center; gap: 10px; font-size: 9px; }
  body.blue .number-item strong { font-size: clamp(58px, 19vw, 80px); line-height: 1.1; letter-spacing: -0.065em; }
  body.blue .numbers-layout { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 30px 20px; }
  body.blue .numbers-layout > div:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  body.blue #process.phone-process .iphone-mockup { transform: none; }
}
@media (max-width: 700px) {
  body.blue.process-in-view .mobile-sticky { display: none; }
  body.blue .geo-visual { overflow: clip; }
}
body.blue #process.phone-process .step-number { align-self: center; }
body.blue #process.phone-process .process-scene { overflow: visible; isolation: isolate; }
body.blue #process.phone-process .process-scene::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 50%; width: 100vw; transform: translateX(-50%); background:linear-gradient(180deg,#000 0%,#000006 17%,#010629 36%,#061b67 52%,#0752bb 67%,#68b6f3 81%,#d0efff 92%,#a8dbff 100%); z-index: -1; pointer-events: none; }
body.blue #process.phone-process .process-layout { overflow: hidden; }
body.blue #process.phone-process .iphone-mockup { aspect-ratio: 870 / 1807; padding: 0px; background: transparent; border: 0px; border-radius: 0px; box-shadow: none; }
body.blue #process.phone-process .iphone-mockup::before { background: url("assets/iphone-user-frame.png") center center / 100% 100% no-repeat; z-index: 6; }
body.blue #process.phone-process .iphone-mockup::after, body.blue #process.phone-process .iphone-side-key { display: none; }
body.blue #process.phone-process .iphone-screen { position: absolute; left: 8.2%; top: 3.85%; width: 83.6%; height: 92.5%; border-radius: 14% / 6.3%; box-shadow: none; }
body.blue #process.phone-process .iphone-island { visibility: hidden; }
body.blue #process.phone-process .iphone-statusbar { height: 59px; min-height: 59px; padding-top: 20px; padding-bottom: 10px; font-size: 13px; padding-inline: 22px; }
body.blue #process.phone-process .iphone-statusbar > svg { width: 53px; height: 16px; }
body.blue #process.phone-process .telegram-header { height: 65px; min-height: 65px; padding: 8px 13px 12px; gap: 8px; }
body.blue #process.phone-process .telegram-header-avatar { width: 34px; height: 34px; min-width: 34px; font-size: 11px; }
body.blue #process.phone-process .telegram-header strong { font-size: 14px; }
body.blue #process.phone-process .telegram-header small { font-size: 10px; }
@media (max-width: 700px) {
  body.blue #process.phone-process .iphone-statusbar { height: 45px; min-height: 45px; padding: 13px 15px 8px; font-size: 10px; }
  body.blue #process.phone-process .iphone-statusbar > svg { width: 39px; height: 13px; }
  body.blue #process.phone-process .telegram-header { height: 52px; min-height: 52px; padding: 6px 9px 9px; gap: 6px; }
  body.blue #process.phone-process .telegram-header-avatar { width: 28px; height: 28px; min-width: 28px; font-size: 9px; }
  body.blue #process.phone-process .telegram-header strong { font-size: 12px; }
  body.blue #process.phone-process .telegram-header small { font-size: 8px; }
  body.blue #process.phone-process .telegram-header-more { font-size: 10px; }
}

/* Telegram light theme inside the device. */
body.blue #process.phone-process .iphone-screen,body.blue #process.phone-process .telegram-messages{background:#edf2f6;color:#182433}
body.blue #process.phone-process .iphone-statusbar,body.blue #process.phone-process .telegram-header{background:#fafcfe;color:#17212d}
body.blue #process.phone-process .telegram-header{border-color:#dce4ed}
body.blue #process.phone-process .telegram-header strong{color:#17212d}
body.blue #process.phone-process .telegram-header small{color:#7a8b9c}
body.blue #process.phone-process .telegram-header-avatar{background:#3390ec;color:#fff}
body.blue #process.phone-process .telegram-back,body.blue #process.phone-process .telegram-header-more{color:#248bea}
body.blue #process.phone-process .telegram-stage-label{background:#f4f7fa;border-color:#dce4ed;color:#75899e}
body.blue #process.phone-process .telegram-day{background:#dce6ef;color:#74879a}
body.blue #process.phone-process .telegram-in,body.blue #process.phone-process .telegram-file{background:#fff;box-shadow:0 1px 2px #18334e0c}
body.blue #process.phone-process .telegram-out{background:#d9ebff;box-shadow:0 1px 2px #18334e0c}
body.blue #process.phone-process .telegram-message p,body.blue #process.phone-process .telegram-status p{color:#243648}
body.blue #process.phone-process .telegram-status h3,body.blue #process.phone-process .telegram-file strong{color:#172c42}
body.blue #process.phone-process .telegram-speaker{color:#2487d8}
body.blue #process.phone-process .telegram-file-icon{background:#3390ec;color:#fff;border-radius:50%}
body.blue #process.phone-process .telegram-file small,body.blue #process.phone-process .telegram-message-meta{color:#7d93a9}
body.blue #process.phone-process .telegram-message-meta svg{color:#4c9ad5}

/* Readable process navigation: larger symbols, labels and stronger contrast. */
body.blue #process.phone-process .step-list{width:min(1120px,100%);--stage-size:60px;gap:18px}
body.blue #process.phone-process .step-list:before{background:#a4b1c166}
body.blue #process.phone-process .step-button{min-height:132px;gap:13px;color:#c8d0dd}
body.blue #process.phone-process .step-number{background:#22262e;border-color:#8793a8;color:#e1e7f0}
body.blue #process.phone-process .step-number>svg{width:28px;height:28px;stroke-width:1.7}
body.blue #process.phone-process .step-label strong{font-size:16px;line-height:1.4;font-weight:500;letter-spacing:-.02em}
body.blue #process.phone-process .step-label small{font-size:13px;line-height:1.45;color:#b2bfd2;margin-top:6px}
body.blue #process.phone-process .step-button.active .step-label strong{font-weight:650;color:#fff}
body.blue #process.phone-process .phone-crop{padding-top:28px}
@media(min-width:701px) and (max-width:1050px){body.blue #process.phone-process .step-list{--stage-size:54px;gap:12px}body.blue #process.phone-process .step-label strong{font-size:15px}body.blue #process.phone-process .step-label small{font-size:12px}}
@media(max-width:700px){
 body.blue #process.phone-process .step-list{--stage-size:46px;gap:8px}
 body.blue #process.phone-process .step-button{min-height:52px;gap:0}
 body.blue #process.phone-process .step-number>svg{width:25px;height:25px}
 body.blue #process.phone-process .step-label{display:none}
 body.blue #process.phone-process .process-current{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:0;margin:0 0 16px;text-align:center}
 body.blue #process.phone-process .process-current>#active-step-title{display:block;font-size:17px;line-height:1.35;color:#fff;font-weight:600}
 body.blue #process.phone-process #active-step-meta{font-size:12px;line-height:1.4;color:#b2bfd2}
 body.blue #process.phone-process .phone-crop{padding-top:20px}
}
@media(max-width:350px){body.blue #process.phone-process .step-list{--stage-size:44px;gap:6px}}
@media(min-width:1051px){body.blue #process.phone-process .step-list{width:min(1240px,100%);--stage-size:64px}body.blue #process.phone-process .step-number>svg{width:30px;height:30px}body.blue #process.phone-process .step-label strong{font-size:18px}body.blue #process.phone-process .step-label small{font-size:14px}body.blue #process.phone-process .step-button{min-height:142px}}

/* Stage navigation only needs its icon and title. */
body.blue #process.phone-process .step-button{min-height:102px}
@media(max-width:700px){body.blue #process.phone-process .step-button{min-height:52px}}

body.blue #process.phone-process #step-text{white-space:pre-line}

/* Keep the enlarged device cropped inside the available mobile scene. */
@media(max-width:700px){
 body.blue #process.phone-process .process-scene{height:var(--phone-scene-height,calc(100svh - var(--phone-pin-top,79px) - var(--mobile-actions-height,72px) - 12px));min-height:0;max-height:var(--phone-scene-height,none);overflow:hidden}
 body.blue #process.phone-process .process-layout{flex:1 1 0;min-height:0;overflow:hidden}
 body.blue #process.phone-process .step-panel{min-height:0;height:100%;overflow:hidden}
 body.blue #process.phone-process .phone-crop{height:100%;min-height:0;overflow:hidden;padding:14px 7px 0}
 body.blue #process.phone-process .iphone-mockup{position:absolute;top:14px;left:0;right:0;width:min(340px,calc(100% - 14px));margin-inline:auto}
 body.blue #process.phone-process .telegram-messages{min-height:0;flex:0 0 auto}
}
@media(max-width:700px) and (max-height:720px){
 body.blue #process.phone-process .section-heading h2{font-size:24px;line-height:1.08}
 body.blue #process.phone-process #step-text{font-size:12px;line-height:1.45;min-height:52px;margin:10px 0 6px}
 body.blue #process.phone-process .process-current{margin-bottom:10px}
 body.blue #process.phone-process .process-current>#active-step-title{font-size:15px}
 body.blue #process.phone-process .step-list{--stage-size:40px}
 body.blue #process.phone-process .step-button{min-height:44px}
}
@media(max-width:700px) and (max-height:620px){
 body.blue #process.phone-process .section-heading h2{font-size:21px}
 body.blue #process.phone-process #step-text{font-size:11px;min-height:44px;margin:8px 0 6px}
 body.blue #process.phone-process .phone-crop{padding-top:8px}
 body.blue #process.phone-process .iphone-mockup{top:8px}
 body.blue #process.phone-process .iphone-statusbar{height:32px;min-height:32px;padding:8px 14px 4px}
 body.blue #process.phone-process .telegram-header{height:42px;min-height:42px;padding:4px 9px 6px}
 body.blue #process.phone-process .telegram-stage-label{display:none}
 body.blue #process.phone-process .telegram-message{padding:9px 10px 7px}
 body.blue #process.phone-process .telegram-status h3{font-size:13px;margin-bottom:5px}
 body.blue #process.phone-process .telegram-status p{font-size:12px;line-height:1.4}
 body.blue #process.phone-process .telegram-speaker{font-size:10px;margin-bottom:4px}
}