/* Localized use-case landing pages reuse the homepage design system. */
.uc-breadcrumb { padding-top:25px; color:#b0bfb5; font-size:12px; }
.uc-breadcrumb ol { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.uc-breadcrumb li+li::before { content:"/"; color:#708779; margin-right:10px; }
.uc-breadcrumb a:hover { color:var(--mint); }
.uc-hero .hero-grid { padding-top:42px; padding-bottom:52px; gap:38px; min-height:580px; }
.uc-hero h1 { font-size:clamp(42px,4.4vw,64px); line-height:1.08; }
.uc-hero h1 em { display:inline; }
.uc-hero .hero-description { max-width:490px; font-size:17px; }
.uc-hero .hero-actions { flex-wrap:wrap; gap:18px; }
.uc-hero-note { margin-top:20px; font-size:12px; color:#b0bfb5; }
.uc-hero-bottom { display:flex; justify-content:space-between; gap:20px; padding-block:24px; border-top:1px solid #ffffff1f; color:#b0bfb5; font-size:10px; letter-spacing:.12em; }
.uc-sharing-demo { margin-right:0; }
.uc-sharing-demo .demo-caption { color:#b0c9b9; }
.uc-sharing-demo .demo-label { color:#b0c9b9; }
.uc-sharing-demo .mirrored-screen>.uc-screen { width:140px; }
.uc-screen { height:100%; width:100%; position:relative; overflow:hidden; padding:1.2em 1em; background:#0c3528; color:#edf7e8; font-size:9px; line-height:1.4; display:flex; flex-direction:column; gap:.75em; }
.uc-screen strong { font-size:1.9em; line-height:1.1; letter-spacing:-.035em; font-weight:600; }
.uc-app-label { font-size:.55em; letter-spacing:.12em; color:#c4ddce; }
.uc-screen-copy { font-size:.7em; color:#c4ddce; }
.phone-screen .uc-screen { font-size:11.5px; }
.uc-signal { width:3.8em; height:3.8em; border-radius:50%; background:#f2c38b24; display:grid; place-items:center; color:#f4c18b; }
.uc-signal .icon { width:2.1em; height:2.1em; }
.uc-support-screen { background:linear-gradient(145deg,#173e31,#09251d); gap:.7em; }
.uc-support-screen strong { font-size:1.8em; }
.uc-device-row { display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:.75em; padding:.7em 0; border-bottom:1px solid #a4ccb52e; }
.uc-device-row i { font-size:.85em; font-style:normal; border-radius:4px; background:#c8efb522; color:#c6edc4; padding:2px 5px; }
.uc-example-button { margin-top:auto; border-radius:5px; padding:.7em; text-align:center; background:#a3e6b8; color:#123a28; font-size:.75em; font-weight:700; }
.uc-project-tile { display:flex; align-items:center; gap:.7em; background:#ffffff0d; border:1px solid #d0edda26; padding:.8em; border-radius:6px; font-size:.8em; }
.uc-project-tile .icon { color:#a3e6b8; width:1.7em; height:1.7em; flex-shrink:0; }
.uc-project-tile small { display:block; font-size:.75em; color:#c4ddce; margin-top:3px; }
.uc-chart { display:flex; gap:.5em; height:4em; align-items:end; padding:.6em .5em 0; }
.uc-chart i { flex:1; border-radius:3px 3px 0 0; height:35%; background:#89f8b0; }
.uc-chart i:nth-child(2) { height:52%; background:#6bb690; }
.uc-chart i:nth-child(3) { height:43%; }
.uc-chart i:nth-child(4) { height:78%; background:#6bb690; }
.uc-chart i:nth-child(5) { height:67%; }
.uc-chart i:nth-child(6) { height:100%; }
.uc-demo-screen { background:linear-gradient(150deg,#104832,#0b281f); }
.uc-training-screen { background:#d7e8cd; color:#173b2b; }
.uc-training-screen .uc-app-label { color:#375845; }
.uc-sketch { background:#edf4e9; border-radius:7px; position:relative; flex:1; min-height:4em; overflow:hidden; }
.uc-sketch span { position:absolute; width:5em; height:5em; border:1.5em solid #378263; border-radius:50%; left:1.2em; top:.8em; }
.uc-sketch i { position:absolute; width:4em; height:4em; background:#b6cd73; left:5em; top:2em; transform:rotate(-15deg); border-radius:5px; }
.uc-sketch b { position:absolute; width:3.2em; height:3.2em; border:1px solid #395b42; border-radius:50%; right:1em; bottom:.5em; }
.uc-lesson-step { display:flex; align-items:center; gap:.7em; font-size:.75em; }
.uc-lesson-step b { border-radius:50%; background:#fff9; padding:.3em; color:#235738; }
.uc-gallery-screen { background:#163a2b; }
.uc-gallery-screen strong { font-family:Georgia,serif; font-size:2.1em; font-weight:400; }
.uc-landscape { flex:1; position:relative; min-height:5em; background:linear-gradient(#a6c6a2,#ecd8aa); overflow:hidden; border-radius:5px; }
.uc-sun { position:absolute; width:2.2em; height:2.2em; top:15%; right:17%; background:#fff1bb; border-radius:50%; }
.uc-mountain { position:absolute; width:80%; height:80%; transform:rotate(45deg); border-radius:8px; }
.uc-mountain.back { background:#779784; left:-10%; top:49%; }
.uc-mountain.front { background:#355f50; right:-21%; top:60%; }
.uc-water { position:absolute; width:100%; height:20%; bottom:0; background:#417c6d99; }
.uc-thumbnails { display:flex; gap:.6em; height:4em; }
.uc-thumbnails .uc-landscape { min-height:0; }
.uc-landscape-forest { background:linear-gradient(#b3d5b3,#4c896b); }
.uc-landscape-forest .uc-mountain.back { background:#426e56; }
.uc-landscape-forest .uc-mountain.front { background:#284b3c; }
.uc-landscape-dawn { background:linear-gradient(#cfcbb4,#e6b78c); }
.uc-landscape-dawn .uc-mountain.back { background:#aa9b7d; }
.uc-landscape-dawn .uc-mountain.front { background:#5e7865; }
.tv-mockup { position:absolute; width:430px; height:282px; top:90px; right:0; border:9px solid #293c32; border-bottom-width:16px; outline:1px solid #60846e; background:#15291f; border-radius:10px; overflow:hidden; box-shadow:0 30px 70px #0006; transform:perspective(1200px) rotateY(-9deg) rotateZ(1deg); }
.tv-screen { height:100%; }
.tv-light { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--mint); bottom:-11px; left:50%; }
.tv-screen .uc-gallery-screen { padding:1.5em; display:grid; grid-template-columns:1fr 1.4fr; grid-template-rows:auto 1fr auto; gap:1em 2em; font-size:15px; }
.tv-screen .uc-app-label { grid-column:1; }
.tv-screen strong { grid-column:1; font-size:2.2em; align-self:center; }
.tv-screen .uc-gallery-screen>.uc-landscape { grid-column:2; grid-row:1/3; height:100%; }
.tv-screen .uc-thumbnails { grid-column:2; grid-row:3; height:3em; }
.tv-screen .uc-screen-copy { grid-column:1; grid-row:3; align-self:center; }
.tv-stand { position:absolute; right:95px; top:374px; width:230px; height:25px; background:#263e30; clip-path:polygon(35% 0,65% 0,72% 75%,100% 82%,100% 100%,0 100%,0 82%,28% 75%); }
.uc-section { padding:80px 0; }
.uc-section h2 { font-size:clamp(30px,3.2vw,44px); line-height:1.15; }
.uc-section .eyebrow { margin-bottom:20px; }
.uc-scenario-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:90px; align-items:start; }
.uc-prose p { line-height:1.8; font-size:17px; }
.uc-prose p+p { margin-top:20px; }
.uc-benefits-section { background:#e9efe5; }
.uc-heading { margin-bottom:36px; max-width:720px; }
.uc-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.uc-benefit { background:#f7f8f4; border:1px solid #d8e2d3; border-radius:14px; padding:30px; }
.uc-benefit-number { display:inline-grid; place-items:center; width:38px; height:38px; background:#dbebd5; color:var(--green); border-radius:10px; font-size:12px; font-weight:700; }
.uc-benefit h3 { margin:26px 0 16px; font-size:23px; line-height:1.2; }
.uc-benefit p { font-size:15px; line-height:1.75; }
.uc-how-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:80px; align-items:start; }
.uc-steps { margin:0; padding:0; list-style:none; }
.uc-step { display:flex; gap:22px; padding:26px 0; border-top:1px solid var(--line); }
.uc-step-number { width:36px; flex-shrink:0; font-size:15px; color:var(--green); font-weight:650; }
.uc-step h3 { font-size:23px; line-height:1.2; margin-bottom:12px; }
.uc-step p { line-height:1.75; }
.uc-guide-link { margin-top:15px; line-height:1.5; }
.uc-requirements { padding:32px; background:#e9efe5; border:1px solid #d8e2d3; border-radius:14px; }
.uc-requirements-icon { display:inline-flex; padding:12px; background:var(--mint); border-radius:10px; color:var(--green); margin-bottom:23px; }
.uc-requirements h3 { font-size:27px; margin-bottom:25px; }
.uc-requirements ul { padding:0; margin:0 0 25px; list-style:none; }
.uc-requirements li { display:flex; gap:12px; font-size:15px; line-height:1.65; margin-bottom:18px; }
.uc-requirements li .icon { color:var(--green); flex-shrink:0; width:19px; height:19px; margin-top:3px; }
.uc-requirements p { border-top:1px solid #cbd7c7; padding-top:20px; font-size:14px; line-height:1.75; }
.uc-requirements a,.uc-note a { display:inline-block; margin-top:20px; color:var(--green); font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.uc-note-section { padding-top:0; padding-bottom:0; }
.uc-note { display:flex; gap:28px; background:#dff3df; border:1px solid #c0ddc4; border-radius:14px; padding:32px; }
.uc-note-icon { flex-shrink:0; color:var(--green); margin-top:4px; }
.uc-note h2 { font-size:26px; margin-bottom:14px; }
.uc-note p { max-width:880px; line-height:1.75; }
.uc-related-section { background:#e9efe5; }
.uc-related-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.uc-related-card { display:flex; flex-direction:column; background:var(--paper); border:1px solid #d8e2d3; border-radius:12px; padding:28px; transition:border-color .2s,background .2s; }
.uc-related-card:hover { border-color:var(--green); background:#fff; }
.uc-related-card .eyebrow { font-size:10px; margin-bottom:16px; }
.uc-related-card h3 { font-size:24px; line-height:1.2; max-width:380px; margin-bottom:28px; }
.uc-related-action { display:flex; align-items:center; gap:14px; color:var(--green); font-size:13px; margin-top:auto; }
.uc-related-action .icon { width:18px; height:18px; }
.uc-closing-copy { color:var(--muted); font-size:17px; margin-top:22px; }
.use-case-page .faq-list summary { font-size:16px; line-height:1.5; }
.use-case-page .faq-list details>p { font-size:15px; line-height:1.75; }
.use-case-page .faq-intro p:not(.eyebrow) { font-size:16px; }
.use-case-page .faq-intro h2 { font-size:clamp(34px,3.5vw,48px); }
@media(max-width:1100px) {
  .uc-hero .hero-grid { gap:28px; }
  .uc-scenario-grid,.uc-how-grid { gap:44px; }
  .uc-benefit { padding:24px; }
  .tv-mockup { width:calc(100% - 40px); }
  .tv-screen .uc-gallery-screen { font-size:12px; }
}
@media(max-width:850px) {
  .uc-hero .hero-grid { padding-top:32px; gap:38px; }
  .uc-hero h1 { max-width:680px; font-size:clamp(42px,7vw,58px); }
  .uc-hero .hero-description { max-width:600px; }
  .uc-sharing-demo { margin:0 auto; }
  .uc-section { padding:60px 0; }
  .uc-scenario-grid,.uc-how-grid { grid-template-columns:1fr; gap:30px; }
  .uc-benefits { grid-template-columns:1fr; gap:18px; }
  .uc-benefit { padding:26px; }
  .uc-benefit h3 { margin-top:18px; }
  .uc-note-section { padding:0; }
  .tv-mockup { width:430px; }
  .tv-screen .uc-gallery-screen { font-size:15px; }
  .use-case-page .faq-layout { gap:32px; }
}
@media(max-width:600px) {
  .uc-breadcrumb { padding-top:20px; font-size:11px; }
  .uc-hero .hero-grid { padding-top:26px; padding-bottom:30px; min-height:0; }
  .uc-hero h1 { font-size:clamp(37px,9.8vw,52px); }
  .uc-hero .hero-description { font-size:16px; max-width:none; }
  .uc-hero .eyebrow { font-size:9px; letter-spacing:.1em; }
  .uc-hero-note { font-size:11px; }
  .uc-hero-bottom { flex-direction:column; font-size:9px; gap:8px; padding-block:20px; }
  .uc-sharing-demo .mirrored-screen>.uc-screen { width:95px; font-size:6.3px; }
  .phone-screen .uc-screen { font-size:8.1px; }
  .uc-sharing-demo .connection-badge { left:80px; max-width:calc(100% - 80px); font-size:8px; padding:10px; }
  .uc-sharing-demo .demo-caption { font-size:6px; }
  .tv-mockup { width:calc(100% - 40px); height:215px; border-width:6px; border-bottom-width:12px; top:65px; }
  .tv-screen .uc-gallery-screen { font-size:9px; gap:.7em; padding:1em; }
  .tv-screen .uc-gallery-screen strong { font-size:1.9em; }
  .tv-stand { right:45px; top:281px; width:150px; height:18px; }
  .uc-section { padding:48px 0; }
  .uc-section .eyebrow { font-size:10px; margin-bottom:15px; }
  .uc-prose p { font-size:16px; }
  .uc-step { gap:16px; }
  .uc-step h3 { font-size:21px; }
  .uc-step p { font-size:15px; }
  .uc-requirements { padding:26px; }
  .uc-note-section { padding:0; }
  .uc-note { padding:25px; gap:15px; }
  .uc-note h2 { font-size:23px; }
  .uc-note p { font-size:15px; }
  .uc-related-grid { grid-template-columns:1fr; gap:16px; }
  .uc-related-card { padding:24px; }
  .uc-related-card h3 { font-size:23px; }
  .uc-guide-link { font-size:13px; }
  .uc-closing-copy { font-size:16px; }
  .use-case-page .faq-list summary { font-size:15px; }
  .use-case-page .faq-list details>p { font-size:15px; }
}
@media(min-width:851px) and (max-width:1100px) {
  .uc-sharing-demo .mirrored-screen>.uc-screen { font-size:8.5px; }
  .phone-screen .uc-screen { font-size:10.2px; }
}

/* Keep localized headings and illustrative interfaces within their containers. */
.use-case-page h1,.use-case-page h2,.use-case-page h3 {
  overflow-wrap:anywhere;
}
.use-case-page .header-inner { gap:16px; }
.use-case-page .header-inner>.brand { order:1; flex-shrink:0; }
.use-case-page .site-nav { order:2; }
.use-case-page .language-picker { order:3; }
.use-case-page .menu-toggle { order:4; flex-shrink:0; }
.use-case-page:not(:lang(en)) .uc-screen { gap:.6em; padding:1em .8em; }
.use-case-page:not(:lang(en)) .uc-screen strong { font-size:1.6em; overflow-wrap:anywhere; }
.use-case-page:not(:lang(en)) .uc-chart { height:3.3em; }
.use-case-page:not(:lang(en)) .tv-screen .uc-gallery-screen strong { font-size:1.7em; }
.use-case-page:not(:lang(en)) .uc-app-label { overflow-wrap:anywhere; }
@media(max-width:850px) {
  .use-case-page .language-picker { margin-left:auto; }
}
@media(max-width:400px) {
  .use-case-page .header-inner { gap:8px; }
  .use-case-page .header-inner>.brand { gap:8px; font-size:22px; }
  .use-case-page .header-inner>.brand img { width:28px; height:28px; }
}
.use-case-page:lang(ru) .uc-demo-screen { gap:.5em; }
