.platforms-page { width: min(1400px, calc(100% - 48px)); margin: 0 auto; padding: 44px 0 88px; }
.platforms-intro { max-width: 840px; margin: 0 auto 36px; text-align: center; }
.platforms-intro h1 { margin: 0; color: #fff3cb; font-size: clamp(36px, 5vw, 62px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; }
.platforms-intro .title-platform { color: var(--title-ink); }
.platforms-intro > p:last-child { max-width: 650px; margin: 18px auto 0; color: #d4c4d7; font-size: 17px; line-height: 1.65; }
.comparison-hint { display: none; color: #d7b953; font-size: 12px; font-weight: 700; text-align: center; }
.comparison-scroll { overflow-x: auto; padding: 8px 4px 22px; scrollbar-color: #b68e42 transparent; scrollbar-width: thin; }
.comparison-scroll:focus-visible { outline: 2px solid #e2bd56; outline-offset: 4px; border-radius: 24px; }
.platform-comparison { width: 100%; min-width: 1060px; border-collapse: separate; border-spacing: 14px 16px; table-layout: fixed; }
.rating-context { caption-side: top; padding: 0 14px; }
.rating-info { max-width: min(340px, calc((100% - 18% - 42px) / 3)); margin: 0 0 2px auto; padding: 0; border: 0; background: none; box-shadow: none; color: #e7c968; text-align: center; font: 600 13px/1.5 "DM Sans", Arial, sans-serif; text-wrap: balance; }
.rating-info-text { color: inherit; }
.rating-info-icon { display: inline-block; width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.rating-info-icon .info-dot { fill: currentColor; stroke: none; }
.platform-comparison th, .platform-comparison td { padding: 24px; border: 1px solid #ffffff50; border-radius: 24px; vertical-align: middle; text-align: left; }
.platform-comparison tr > :first-child { width: 18%; }
.platform-comparison thead th { height: 114px; padding: 22px 20px; }
.platform-comparison thead th:first-child { height: auto; border: 0; color: #cbbad1; background: transparent; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: center; box-shadow: none; }
.platform-comparison tbody th { color: #fff0c3; background: linear-gradient(145deg, #43224e, #22112d); border-color: #e6bb605c; box-shadow: inset 0 2px 1px #ffffff16, inset 0 -3px 5px #0a011a59, 0 8px 18px #09020f33; font-size: 16px; font-weight: 800; line-height: 1.4; text-align: center; text-wrap: balance; }
.platform-comparison tr > :nth-child(2), .platforms-intro .title-bolt { --cell-ink: #073b27; --cell-accent: #006341; --cell-top: #8aecb9; --cell-middle: #4cd895; --cell-bottom: #2dbd7c; --cell-border: #b7ffcf; --title-ink: #006341; }
.platform-comparison tr > :nth-child(3), .platforms-intro .title-glovo { --cell-ink: #493300; --cell-accent: #00684f; --cell-top: #ffe582; --cell-middle: #ffd04b; --cell-bottom: #efb72e; --cell-border: #fff1b4; --title-ink: #805500; }
.platform-comparison tr > :nth-child(4), .platforms-intro .title-wolt { --cell-ink: #043547; --cell-accent: #035972; --cell-top: #89e9f5; --cell-middle: #55d5ed; --cell-bottom: #2eb4dd; --cell-border: #c4f9ff; --title-ink: #035972; }
.platform-comparison tr > :nth-child(n+2) { color: var(--cell-ink); background: linear-gradient(135deg, var(--cell-top), var(--cell-middle) 52%, var(--cell-bottom)); border-color: var(--cell-border); box-shadow: inset 0 2px 1px #ffffff75, inset 0 -4px 7px #001d2b1f, 0 5px 0 #04030c40, 0 12px 22px #04030c3b; }
.platform-name { display: flex; align-items: center; gap: 15px; font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -.045em; }
.platform-name img { display: block; flex: 0 0 60px; width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 6px 6px #00334e38); }
.platform-name.glovo { color: #00684f; }
.platform-name.wolt { color: #fff; text-shadow: 0 2px 3px #00516a52; }
.platform-name.bolt { color: #074a32; }
.platform-comparison td { font-size: 14px; font-weight: 600; line-height: 1.6; }
.platform-comparison td strong { color: inherit; font-weight: 800; }
.comparison-points { display: grid; gap: 12px; margin: 0; padding-left: 17px; list-style: disc; }
.comparison-points li { padding-left: 3px; }
.comparison-points li::marker { color: var(--cell-accent); font-size: 1.05em; }
.platform-comparison a { color: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.platform-comparison a:hover, .platform-comparison a:focus-visible { text-decoration-thickness: 2px; }
.score { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 10px 14px; border: 1px solid #ffffff9e; border-radius: 999px; color: var(--cell-ink); background: #ffffff70; box-shadow: inset 0 2px 2px #fff8, 0 3px 7px #002b3914; font-size: 15px; }
.comparison-points + .score { margin: 22px 0 0; }
.score b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.rating-stars { position: relative; display: block; width: 90px; height: 18px; background: linear-gradient(90deg, var(--cell-accent) 0 var(--rating-fill), #00312a30 var(--rating-fill) 100%); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1.5 2.5 5.1 5.6.8-4.1 4 .9 5.6-4.9-2.6-5 2.6 1-5.6-4.1-4 5.6-.8z'/%3E%3C/svg%3E"); mask-size: 18px 18px; mask-repeat: repeat-x; }
.platforms-note { margin: 14px auto 0; color: #baabc0; font-size: 13px; text-align: center; }
.criterion-note { display: block; margin-top: 12px; opacity: .82; font-size: 12px; font-weight: 500; line-height: 1.5; }
.rank { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 86px; }
.rank strong { font-size: 19px; font-weight: 800; }
.rank-medal { position: relative; display: grid; width: 52px; height: 52px; place-items: center; flex: 0 0 52px; border: 3px double var(--medal-border); border-radius: 50%; color: var(--medal-ink); background: linear-gradient(135deg, var(--medal-top), var(--medal-bottom)); box-shadow: inset 0 2px 3px #fffa, inset 0 -3px 3px #0002, 0 4px 7px #0002; font-size: 24px; font-weight: 800; }
.rank-medal::before, .rank-medal::after { content: ""; position: absolute; z-index: -1; top: 37px; width: 16px; height: 25px; background: var(--medal-bottom); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.rank-medal::before { left: 6px; transform: rotate(14deg); }.rank-medal::after { right: 6px; transform: rotate(-14deg); }
.rank-medal { isolation: isolate; }
.rank-gold { --medal-top: #fff3ad; --medal-bottom: #e4aa1d; --medal-border: #b6810d; --medal-ink: #533600; }
.rank-silver { --medal-top: #fff; --medal-bottom: #b1c3cd; --medal-border: #7c919e; --medal-ink: #2c414f; }
.rank-bronze { --medal-top: #fbe0b6; --medal-bottom: #c48959; --medal-border: #95623c; --medal-ink: #4d2c16; }
html[data-theme="light"] .platforms-intro h1 { color: #302236; }
html[data-theme="light"] :is(.platforms-kicker,.comparison-hint) { color: #765014; }
html[data-theme="light"] .platforms-intro > p:last-child { color: #685d70; }
html[data-theme="light"] .platform-comparison thead th:first-child { color: #685d70; }
html[data-theme="light"] .platform-comparison tbody th { color: #3c2b46; background: linear-gradient(145deg, #fffdf8, #eee4d4); border-color: #d1b07988; box-shadow: inset 0 2px 1px #fff, inset 0 -3px 5px #67492c0d, 0 5px 0 #8e663912, 0 9px 18px #74551a12; }
html[data-theme="light"] .platform-comparison tr > :nth-child(n+2) { box-shadow: inset 0 2px 1px #ffffffa8, inset 0 -4px 7px #001d2b1a, 0 5px 0 #654a161c, 0 12px 22px #74551a1c; }
html[data-theme="light"] .platforms-note { color: #60566a; }
html[data-theme="light"] .rating-info { color: #765014; }
html[data-theme="night"] .platforms-intro h1 { color: #eeeae2; }
html[data-theme="night"] :is(.platforms-kicker,.comparison-hint) { color: #d8bd91; }
html[data-theme="night"] .platforms-intro > p:last-child { color: #c5c0b6; }
html[data-theme="night"] .platform-comparison thead th:first-child { color: #c5c0b6; }
html[data-theme="night"] .platform-comparison tbody th { background: linear-gradient(145deg, #34362f, #1d1e19); color: #eee2cc; border-color: #9b7a4e75; }
html:is([data-theme="midday"],[data-theme="night"]) :is(.platform-comparison tr > :nth-child(2), .platforms-intro .title-bolt) { --cell-ink: #e5fff0; --cell-accent: #7be7ae; --cell-top: #285747; --cell-middle: #183c31; --cell-bottom: #122a24; --cell-border: #6dcc9b70; --title-ink: #7be7ae; }
html:is([data-theme="midday"],[data-theme="night"]) :is(.platform-comparison tr > :nth-child(3), .platforms-intro .title-glovo) { --cell-ink: #fff2c7; --cell-accent: #ffd875; --cell-top: #65502c; --cell-middle: #473721; --cell-bottom: #2d2519; --cell-border: #e8c16770; --title-ink: #ffd875; }
html:is([data-theme="midday"],[data-theme="night"]) :is(.platform-comparison tr > :nth-child(4), .platforms-intro .title-wolt) { --cell-ink: #e6faff; --cell-accent: #82e2f4; --cell-top: #27525f; --cell-middle: #1b3c48; --cell-bottom: #122730; --cell-border: #76d4eb70; --title-ink: #82e2f4; }
html:is([data-theme="midday"],[data-theme="night"]) .platform-name { color: var(--cell-ink); text-shadow: none; }
html:is([data-theme="midday"],[data-theme="night"]) .score { background: #ffffff0f; border-color: #ffffff30; box-shadow: inset 0 1px 0 #ffffff17, 0 3px 7px #0002; }
html:is([data-theme="midday"],[data-theme="night"]) .rating-stars { background: linear-gradient(90deg, var(--cell-accent) 0 var(--rating-fill), #ffffff38 var(--rating-fill) 100%); }
html[data-theme="night"] .platforms-note { color: #b8b4ac; }
@media (max-width: 1100px) { .platform-comparison { border-spacing: 10px 14px; }.rating-context { padding: 0 10px; }.platform-comparison :is(th,td) { padding: 20px; }.platform-name { gap: 10px; }.platform-name img { width: 50px; height: 50px; flex-basis: 50px; } }
@media (max-width: 760px) { .platforms-page { width: calc(100% - 24px); padding: 28px 0 64px; }.platforms-intro { margin-bottom: 24px; padding: 0 8px; }.platforms-intro h1 { font-size: clamp(34px, 9vw, 44px); }.platforms-intro > p:last-child { font-size: 15px; }.comparison-hint { display: block; margin: 0 0 8px; }.comparison-scroll { padding-left: 0; padding-right: 0; }.platform-comparison { min-width: 1050px; border-spacing: 10px 14px; }.platform-comparison :is(th,td) { padding: 20px; border-radius: 21px; }.platform-comparison tr > :first-child { width: 165px; }.platform-comparison tbody th { font-size: 15px; }.platform-comparison td { font-size: 14px; }.platform-name { font-size: 25px; }.comparison-points { gap: 11px; } }