/* МЫСЛЬ Soft v2 — inner pages: solutions, spheres, screens, software, services, cases, about, blog. */

/* ---------- hero art ---------- */
.hero-art { position: relative; display: grid; justify-items: center; gap: 1rem; }
.hero-art--layers { padding: clamp(1rem, 2vw, 2rem); border-radius: var(--r-l); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.hero-art--layers .layers { width: min(100%, 420px); }
.hero-art--device .devsvg { width: min(100%, 360px); }
.hero-art--device::before, .hero-art--scene::before { content: ""; position: absolute; inset: 4% 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(230, 205, 152, .18), transparent); }
.hero-art--scene .wscene { width: min(100%, 420px); box-shadow: 0 40px 80px -40px #000, 0 0 0 1px rgba(255, 255, 255, .08); }
.hero-art__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; font-size: .875rem; color: var(--on-dark-3); text-align: center; }
.hero-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-l); background: var(--g-800); box-shadow: 0 40px 90px -40px #000, 0 0 0 1px rgba(255, 255, 255, .1); }
.hero-photo img { width: 100%; height: auto; }
.hero-photo figcaption { position: absolute; left: 1rem; bottom: 1rem; }
.phones { position: relative; display: flex; justify-content: center; gap: 0; min-height: 360px; }
.frame { position: relative; display: block; overflow: hidden; padding: 0; border: 0; border-radius: 22px; background: #08090B; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -36px #000; cursor: zoom-in; transition: transform .5s var(--ease-out); }
.frame img { width: 100%; height: auto; }
.frame--phone { width: min(46%, 210px); }
.frame--phone:first-child { transform: rotate(-4deg) translateX(8%); z-index: 1; }
.frame--second { transform: rotate(4deg) translate(-8%, 8%); }
.frame--phone:hover { transform: rotate(0) translateY(-6px) scale(1.03); z-index: 2; }
.frame--wide { width: 100%; border-radius: var(--r); }
.image-zoom { position: absolute; right: .8rem; top: .8rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(11, 12, 15, .7); color: #fff; font-size: 1.25rem; line-height: 1; backdrop-filter: blur(6px); }

/* ---------- packages ---------- */
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.pack { display: flex; flex-direction: column; gap: 1rem; }
.pack__art { padding: 1rem; border-radius: var(--r-s); background: linear-gradient(180deg, #20232A, #16181D); }
.pack .btn { align-self: flex-start; margin-top: auto; }
.pack .stars li::before { background: var(--red); }
.note-line { max-width: 86ch; margin-top: clamp(24px, 3vw, 40px); color: var(--ink-3); font-size: .9375rem; }

/* ---------- list rows ---------- */
.srows { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.srow { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: var(--r); background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s; }
.srow:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(20, 22, 26, .4); border-color: transparent; }
.srow__scene { grid-column: 1 / -1; display: block; margin: -.25rem -.4rem .35rem; padding: .6rem; border-radius: var(--r-s); background: var(--g-850); }
.srow__scene .wscene { max-height: 190px; margin-inline: auto; }
.srow__text { display: grid; gap: .45rem; }
.srow__text span:last-child { color: var(--ink-3); font-size: .9375rem; }
.srow__go { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--navy); color: #fff; transition: background-color .3s, transform .4s var(--ease-out); }
.srow__go .ml-arrow { width: .9rem; height: .76rem; }
.srow:hover .srow__go { background: var(--red); transform: translateX(3px); }
.srow--text { align-items: center; }
.srows--plain .srow { padding-block: 1.5rem; }
.wscene { display: block; aspect-ratio: 1; border-radius: var(--r-s); background: radial-gradient(70% 60% at 50% 34%, #44423F, #1D1D1B); overflow: hidden; }
.wscene__svg { width: 100%; height: 100%; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); padding: 0; list-style: none; counter-reset: s; }
.steps--4 { grid-template-columns: repeat(4, 1fr); margin-top: clamp(24px, 3vw, 48px); }
.step { display: grid; gap: .8rem; align-content: start; }
.step__n { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: 1.1rem; font-weight: 700; }

/* ---------- sector pages ---------- */
.page-hero--photo .page-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.demo-entry { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.demo-entry__copy { display: grid; gap: 1.2rem; }
.demo-entry__img { display: block; overflow: hidden; border-radius: var(--r-l); background: var(--g-800); box-shadow: 0 34px 70px -34px rgba(20, 22, 26, .55); }
.demo-entry__img img { width: 100%; height: auto; transition: transform 1.4s var(--ease-out); }
.demo-entry__img:hover img { transform: scale(1.03); }
.fn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.fn-grid article { display: grid; gap: .6rem; align-content: start; padding: 1.3rem 1.4rem; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease-out), box-shadow .4s; }
.fn-grid article:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgba(20, 22, 26, .4); }
.fn-grid h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.fn-grid p { color: var(--ink-3); font-size: .9375rem; }
.fn-grid a { font-weight: 600; color: var(--navy); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .4s var(--ease-out); justify-self: start; }
.fn-grid a:hover { background-size: 100% 1.5px; }
.other { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.other p { font-weight: 600; }
.other .chip { color: var(--ink-2); }
.case-cross { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.4rem 1.8rem; border-radius: var(--r); background: var(--mist); }
.case-cross p { font-weight: 600; max-width: 56ch; }

/* ---------- screens ---------- */
.hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.hw { display: grid; gap: 0; padding: 0; overflow: hidden; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); }
.hw__img { margin: 0; overflow: hidden; background: var(--g-800); }
.hw__img img { width: 100%; height: auto; transition: transform 1.4s var(--ease-out); }
.hw:hover .hw__img img { transform: scale(1.03); }
.hw__body { display: grid; gap: 1rem; padding: clamp(1.25rem, 2.2vw, 2rem); }
.range-specs { border-radius: var(--r-s); background: var(--porcelain); border: 1px solid var(--line); }
.range-specs summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem; font-weight: 600; cursor: pointer; list-style: none; }
.range-specs summary::-webkit-details-marker { display: none; }
.range-specs__plus, .faq__plus { position: relative; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--navy); transition: transform .4s var(--ease-out), background-color .3s; }
.range-specs__plus::before, .range-specs__plus::after, .faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 2px; border-radius: 2px; background: #fff; transform: translate(-50%, -50%); transition: transform .4s var(--ease-out); }
.range-specs__plus::after, .faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > summary .range-specs__plus, details[open] > summary .faq__plus { background: var(--red); }
details[open] > summary .range-specs__plus::after, details[open] > summary .faq__plus::after { transform: translate(-50%, -50%) rotate(0); }
.range-spec-content { padding: 0 1.1rem 1.1rem; font-size: .9375rem; }
.range-spec-content dl { display: grid; margin: 0; }
.range-spec-content dl > div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.range-spec-content dt { color: var(--ink-3); } .range-spec-content dd { margin: 0; font-weight: 500; }
.range-spec-content p { margin-top: .8rem; color: var(--ink-3); font-size: .875rem; }
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 96px); align-items: start; }
.dims .prose { color: var(--on-dark-2); display: grid; gap: 1rem; }
.dims--light .prose { color: var(--ink-3); }
.dims > div:first-child { display: grid; gap: 1.2rem; }

/* ---------- software ---------- */
.fn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.fncard { display: flex; flex-direction: column; gap: .9rem; }
.fncard__art { padding: .8rem; border-radius: var(--r-s); background: var(--g-850); }
.fncard__art .wscene { max-height: 250px; margin-inline: auto; }
.fncard .link { margin-top: auto; color: var(--navy); }
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 96px); align-items: start; }
.faq__head { display: grid; gap: 1.2rem; }
.faq-list { display: grid; gap: .7rem; }
.faq-list details { border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details p { padding: 0 1.3rem 1.3rem; color: var(--ink-3); }
.faq-list details a { color: var(--navy); font-weight: 600; }

/* ---------- single service ---------- */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 96px); }
.svc__col { display: grid; gap: 1rem; align-content: start; }
.svc__sub { margin-top: 1rem; }
.svc-example { display: grid; gap: 1.4rem; max-width: 900px; }
.svc-example .lead { color: #E8E4DC; }

/* ---------- cases ---------- */
.case-card { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.case-card__pic { display: block; }
.case-card__pic .frame { cursor: pointer; transition: transform .6s var(--ease-out); }
.case-card__pic:hover .frame { transform: translateY(-6px) rotate(-.6deg); }
.case-card__copy { display: grid; gap: 1.3rem; justify-items: start; }

/* ---------- about ---------- */
.about-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 96px); align-items: center; }
.about-image { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 34px 70px -34px rgba(20, 22, 26, .5); }
.about-image img { width: 100%; height: auto; }
.about-image figcaption { position: absolute; left: 1rem; bottom: 1rem; }
.about-manifesto { display: grid; gap: 1.3rem; justify-items: start; }
.statement { max-width: 1100px; }
.statement__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, .9rem + 2vw, 2.4rem); line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.contacts { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.contacts > div:first-child { display: grid; gap: 1.2rem; }
.contacts .lead { color: var(--on-dark-2); }
.contacts .btn-row { justify-content: flex-end; }

/* ---------- blog ---------- */
.journal { display: grid; gap: clamp(14px, 2vw, 24px); }
.journal-entry { border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 16px); }
.journal-entry > summary { display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; padding: clamp(12px, 1.6vw, 20px); cursor: pointer; list-style: none; }
.journal-entry > summary::-webkit-details-marker { display: none; }
.journal-entry > summary img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.journal-heading { display: grid; gap: .8rem; justify-items: start; }
.journal-heading strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, .95rem + .9vw, 1.7rem); line-height: 1.2; letter-spacing: -.015em; }
.journal-excerpt { color: var(--ink-3); max-width: 56ch; }
.journal-action { display: inline-flex; align-items: center; gap: .6rem; color: var(--navy); font-weight: 600; }
.journal-body { display: grid; gap: .8rem; max-width: 74ch; padding: clamp(12px, 3vw, 40px) clamp(16px, 4vw, 56px) clamp(24px, 4vw, 48px); }
.journal-body h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.015em; margin-top: .6rem; }
.journal-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-top: .8rem; }
.journal-body a { color: var(--navy); font-weight: 600; }
.journal-meta { color: var(--ink-2); }
.journal-entry[open] > summary .faq__plus { background: var(--red); }

/* ---------- gallery dialog ---------- */
.image-dialog { width: min(1100px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-l); background: var(--g-900); color: var(--on-dark); overflow: auto; box-shadow: 0 40px 120px -20px #000, 0 0 0 1px rgba(255, 255, 255, .1); }
.image-dialog::backdrop { background: rgba(8, 7, 6, .8); backdrop-filter: blur(6px); }
.image-dialog img { width: 100%; max-height: 74dvh; object-fit: contain; background: #08090B; }
.dialog-close { position: absolute; right: 12px; top: 12px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.5rem; line-height: 1; }
.lightbox-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; padding: 1rem 1.4rem; }
.lightbox-bottom p { color: var(--on-dark-2); font-size: .9375rem; }
.lightbox-bottom button { padding: .55rem 1.1rem; border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 999px; background: transparent; color: #fff; font-weight: 500; }
.lightbox-bottom button:hover { background: rgba(255, 255, 255, .1); }
.lightbox-bottom div { display: flex; align-items: center; gap: .8rem; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pack-grid, .srows, .fn-grid, .fn-cards, .trio, .steps { grid-template-columns: 1fr 1fr; }
  .steps--4 { grid-template-columns: 1fr 1fr; }
  .hw-grid, .demo-entry, .dims, .faq, .svc, .case-card, .about-intro, .contacts, .page-hero--photo .page-hero__inner { grid-template-columns: 1fr; }
  .contacts .btn-row { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .pack-grid, .srows, .fn-grid, .fn-cards, .trio, .steps, .steps--4 { grid-template-columns: 1fr; }
  .journal-entry > summary { grid-template-columns: 1fr; }
  .phones { min-height: 300px; }
  .range-spec-content dl > div { grid-template-columns: 1fr; gap: .1rem; }
}

.hero-photo figcaption { padding: .35rem .55rem; border-radius: 999px; background: rgba(11, 12, 15, .72); backdrop-filter: blur(6px); }
.about-image figcaption { padding: .35rem .55rem; border-radius: 999px; background: rgba(11, 12, 15, .72); backdrop-filter: blur(6px); color: var(--on-dark-2); }

/* ---------- round 2: renders on the services page, internal bar ---------- */
.pack__art { padding: 0; overflow: hidden; aspect-ratio: 5 / 6; border-radius: var(--r); background: #121317; }
.pack__art img { width: 100%; height: 100%; object-fit: cover; }
.hero-render { margin: 0; justify-self: center; }
.hero-render img { width: auto; max-width: 100%; max-height: min(560px, 64vh); border-radius: var(--r-l); box-shadow: 0 40px 90px -40px #000, 0 0 0 1px rgba(255, 255, 255, .08); }

/* Решения 10.11.2026: the video opens the page, two short cards with the picture beside the text, the three tasks without pictures */
.page-hero--video .page-hero__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.svc-video { margin: 0; display: grid; gap: .75rem; }
.svc-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); border: 1px solid rgba(230, 205, 152, .24); background: #050608; box-shadow: 0 34px 90px -36px rgba(0, 0, 0, .9); }
.svc-video video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.svc-video__play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: clamp(64px, 6.5vw, 96px); height: clamp(64px, 6.5vw, 96px); border: 0; border-radius: 50%; background: linear-gradient(145deg, #F7E9C8, #E6CD98 55%, #C9A762); color: #14161A; box-shadow: 0 18px 46px -14px rgba(230, 205, 152, .55); cursor: pointer; transition: opacity .3s ease, transform .3s ease; }
.svc-video__play svg { width: 42%; height: 42%; fill: currentColor; transform: translateX(6%); }
.svc-video__play:hover { transform: scale(1.06); }
.svc-video.is-playing .svc-video__play { opacity: 0; transform: scale(.85); pointer-events: none; }
.svc-video__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.svc-video__btn { min-height: 42px; padding: 0 1.1rem; border: 1px solid rgba(230, 205, 152, .38); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--on-dark); font: 600 .9rem/1 var(--font, inherit); cursor: pointer; transition: border-color .2s, background .2s; }
.svc-video__btn:hover { border-color: #E6CD98; background: rgba(230, 205, 152, .1); }
.svc-video__btn[aria-pressed="true"] { border-color: #E6CD98; }
.svc-video__dur { margin-left: auto; color: var(--on-dark-3); font-size: .875rem; }
.pack-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pack--row { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.pack--row .pack__art { aspect-ratio: auto; min-height: 100%; max-height: 520px; }
.pack--row .pack__art img { object-position: center 22%; }
.pack__body { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.pack__body .btn { align-self: flex-start; margin-top: auto; }
.pillars--compact .pillar { gap: .75rem; padding-top: clamp(20px, 2.4vw, 32px); }
@media (max-width: 1100px) {
  .page-hero--video .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .page-hero--video .page-hero__aside { order: -1; }
  .pack-grid--two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pack--row { grid-template-columns: minmax(0, 1fr); }
  .pack--row .pack__art { aspect-ratio: 16 / 11; min-height: 0; }
  .svc-video__dur { margin-left: 0; width: 100%; }
}

/* ---------- the site's video player (11.11.2026, owner): seek bar along the bottom, speaker button top right ---------- */
.mv__sound { position: absolute; top: clamp(10px, 1.4vw, 16px); right: clamp(10px, 1.4vw, 16px); z-index: 3; display: grid; place-items: center; width: clamp(44px, 4vw, 54px); height: clamp(44px, 4vw, 54px); padding: 0; border: 1px solid rgba(230, 205, 152, .45); border-radius: 50%; background: rgba(11, 12, 15, .62); color: #F4F2EE; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s, border-color .25s, color .25s; }
.mv__sound:hover { border-color: #E6CD98; background: rgba(11, 12, 15, .8); }
.mv.is-sound .mv__sound { border-color: #E6CD98; background: #E6CD98; color: #14161A; }
.mv__ico { display: grid; place-items: center; }
.mv__ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mv__ico .mv-fill { fill: currentColor; stroke: none; }
.mv__ico--on, .mv.is-sound .mv__ico--off { display: none; }
.mv.is-sound .mv__ico--on { display: grid; }
.mv__ctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: .75rem; padding: 28px clamp(12px, 1.6vw, 20px) clamp(10px, 1.2vw, 14px); background: linear-gradient(180deg, rgba(5, 6, 8, 0), rgba(5, 6, 8, .78)); }
.mv__toggle { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(244, 242, 238, .12); color: #F4F2EE; cursor: pointer; }
.mv__toggle:hover { background: rgba(230, 205, 152, .3); }
.mv__toggle .mv__ico svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.mv__ico--pause, .mv.is-playing .mv__ico--play { display: none; }
.mv.is-playing .mv__ico--pause { display: grid; }
.mv__seek { --p: 0%; flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mv__seek::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg, #E6CD98 var(--p), rgba(244, 242, 238, .28) var(--p)); }
.mv__seek::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(244, 242, 238, .28); }
.mv__seek::-moz-range-progress { height: 5px; border-radius: 3px; background: #E6CD98; }
.mv__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border: 0; border-radius: 50%; background: #F7E9C8; box-shadow: 0 0 0 4px rgba(230, 205, 152, .28); }
.mv__seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #F7E9C8; box-shadow: 0 0 0 4px rgba(230, 205, 152, .28); }
.mv__seek:focus-visible { outline: 2px solid #E6CD98; outline-offset: 2px; border-radius: 4px; }
.mv__time { flex: none; min-width: 6.6em; text-align: right; color: #F4F2EE; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.mv video { cursor: pointer; }
/* the video block under the comparison with the advertising stand (home) */
.vs__video { max-width: 960px; margin: clamp(32px, 4vw, 56px) auto 0; }
@media (max-width: 560px) { .mv__time { min-width: 0; font-size: .75rem; } .mv__ctrl { gap: .5rem; } }