/* Article pages and the «Ещё» menu (04.11). Uses the tokens and components of style.css/build.css. */

/* «Ещё» dropdown in the header */
.nav-more{position:relative;display:inline-flex}
.nav-more-btn{display:inline-flex;align-items:center;gap:6px;padding:0;min-height:0;border:0;background:none;color:var(--muted);font:inherit;cursor:pointer;transition:color 300ms ease}
.nav-more-btn .chev{width:7px;height:7px;margin-top:-3px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform 350ms var(--ease-out)}
.nav-more:hover .nav-more-btn,.nav-more.open .nav-more-btn,.nav-more-btn:focus-visible{color:var(--text)}
.nav-more.open .nav-more-btn .chev{transform:rotate(225deg);margin-top:3px}
.nav-more-menu{position:absolute;top:calc(100% + 18px);left:50%;z-index:60;display:grid;gap:2px;min-width:300px;padding:10px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 24px 60px #0006;opacity:0;visibility:hidden;transform:translate(-50%,-8px) scale(.98);transform-origin:top center;transition:opacity 260ms ease,transform 360ms var(--ease-out),visibility 0s 360ms}
.nav-more-menu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.nav-more.open .nav-more-menu{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition:opacity 260ms ease,transform 360ms var(--ease-out),visibility 0s}
@media(hover:hover) and (pointer:fine) and (min-width:769px){.nav-more:not(.closed):hover .nav-more-menu{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition:opacity 260ms ease,transform 360ms var(--ease-out),visibility 0s}}
.nav .nav-more-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:var(--text);font-size:14px;white-space:nowrap;transition:background 300ms ease}
.nav .nav-more-menu a span{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:9px;background:linear-gradient(135deg,#ec6a7e22,#b070e622,#58c6f222);color:var(--accent);font-size:14px}
.nav .nav-more-menu a:hover,.nav .nav-more-menu a[aria-current=page]{background:var(--soft)}
.nav .nav-more-menu .nav-more-all{justify-content:center;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;color:var(--accent)}
/* last link of a dropdown: divider line above, no background block on hover (owner 04.11: it highlighted unevenly), only the colour changes */
.nav .nav-more-menu .nav-more-all,.nav .nav-more-menu .nav-more-all:hover{background:none;border-radius:0;transition:color 300ms ease}
.nav .nav-more-menu .nav-more-all:hover{color:var(--text)}
@media(max-width:768px){
  .nav-more{display:block}
  .nav-more-btn{width:100%;justify-content:space-between;padding:6px 10px;font-size:inherit}
  .nav-more-menu{position:static;min-width:0;margin:4px 0 2px;padding:4px;border-radius:14px;transform:none;box-shadow:none;display:none;opacity:1;visibility:visible;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--soft)}
  .nav-more.open .nav-more-menu{display:grid;transform:none}
  .nav .nav-more-menu a{white-space:normal}
}

/* Article hero with the table of contents on the right */
.art-hero{display:block;min-height:0;padding:56px 0 34px}
.art-hero .hero-copy{max-width:860px}
.art-hero h1{font-size:clamp(34px,4.2vw,56px)}
/* Logo ring on the right of the article hero (same as Zashchita/FAQ); on phones the text goes first, ring hidden. */
.art-hero.build-visual-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.art-hero .sub-orbit{height:400px}
.art-hero .sub-orbit .hero-avatar{width:230px;height:230px}
@media(max-width:768px){.art-hero.build-visual-hero{grid-template-columns:1fr}.art-hero .sub-orbit{display:none}}
.art-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(240px,300px);justify-content:space-between;gap:56px;align-items:start}
.art-toc{position:sticky;top:104px;display:grid;gap:4px;padding:22px;border-radius:22px;margin-top:34px}
.art-toc-cta{margin-top:14px;width:100%;min-height:48px;padding:12px 14px;font-size:14px}
.art-toc-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.art-toc a:not(.button){display:block;padding:9px 12px;border-radius:11px;color:var(--muted);font-size:15px;line-height:1.35;transition:background 300ms ease,color 300ms ease,transform 450ms var(--ease-out)}
.art-toc a:not(.button):hover{background:var(--soft);color:var(--text);transform:translateX(4px)}
.art-hub-hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}

/* Article body */
.art-body{min-width:0;font-size:17px;line-height:1.75}
.art-section{padding:34px 0 10px;scroll-margin-top:110px}
.art-section+.art-section{border-top:1px solid var(--line)}
.art-body h2{font-size:clamp(26px,2.6vw,34px);line-height:1.2;margin:0 0 18px}
.art-body h3{font-size:20px;margin:26px 0 10px}
.art-body p{margin:0 0 16px;color:var(--text)}
.art-body p,.art-body li{overflow-wrap:anywhere}
.art-body a{color:var(--accent);text-decoration:underline;text-decoration-color:#b070e666;text-underline-offset:3px;transition:text-decoration-color 300ms ease}
.art-body a:hover{text-decoration-color:currentColor}
.art-list{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}
.art-list li{position:relative;padding-left:26px}
.art-list li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#ec6a7e,#b070e6,#58c6f2)}
.art-steps{counter-reset:step;margin:6px 0 22px;padding:0;list-style:none;display:grid;gap:14px}
.art-steps li{counter-increment:step;position:relative;padding:16px 18px 16px 64px;border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:border-color 450ms var(--ease-out),transform 550ms var(--ease-out)}
.art-steps li::before{content:counter(step);position:absolute;left:16px;top:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ec6a7e,#b070e6,#58c6f2);color:#fff;font-weight:700;font-size:15px}
.art-steps li:hover{border-color:#b070e655;transform:translateX(4px)}
.art-tip{display:grid;gap:6px;margin:8px 0 22px;padding:18px 22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#b070e614,#58c6f20d)}
.art-tip p{margin:0}
.art-tip-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.art-table{overflow-x:auto;margin:6px 0 22px;border:1px solid var(--line);border-radius:16px}
.art-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.art-table th,.art-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.art-table th{background:var(--soft);font-weight:600}
.art-table tr:last-child td{border-bottom:0}
.art-faq{max-width:840px;margin:0 auto}

/* «Читайте также» and hub cards */
.art-more-all{text-align:center;margin-top:24px}
.art-more-all a{color:var(--accent)}

@media(max-width:1000px){.art-layout{grid-template-columns:minmax(0,1fr) 250px;gap:32px}}
@media(max-width:768px){
  .art-hero{grid-template-columns:1fr;gap:26px;padding:34px 0 20px}
  .art-hero h1{font-size:34px}
  .art-layout{grid-template-columns:1fr;gap:0}
  .art-toc{position:static;order:-1;margin-top:8px;padding:16px}
  .art-toc-cta{display:none}
  .art-toc a:not(.button){padding:8px 10px;font-size:15px}
  .art-body{font-size:16px;line-height:1.7}
  .art-section{padding:26px 0 6px}
  .art-steps li{padding:14px 14px 14px 56px}
  .art-steps li::before{left:12px;width:30px;height:30px;font-size:14px}
  .art-table table{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.nav-more-menu,.art-toc a,.art-steps li{transition:none}}

/* Home feeds: articles and channel posts, horizontal carousel with arrows (like a shelf). */
.feed{padding-top:70px}
.feed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.feed-head p{max-width:620px;color:var(--muted);margin:10px 0 0}
.feed-controls{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.feed-all{margin-right:6px;color:var(--accent);font-weight:600;font-size:15px;white-space:nowrap}
.feed-arrow{display:grid;place-items:center;width:46px;height:46px;padding:0;line-height:0;border-radius:50%;border:1px solid var(--glass-line);background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shine);color:var(--text);cursor:pointer;transition:background 300ms ease,transform 300ms var(--ease-out),opacity 300ms ease}
.feed-arrow:hover:not(:disabled){background:var(--glass-hover)}
.feed-arrow svg{display:block}
.feed-arrow:active:not(:disabled){transform:scale(.94)}
.feed-arrow:disabled{opacity:.35;cursor:default}
.feed-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 18px;scrollbar-width:none;overscroll-behavior-x:contain}
.feed-track::-webkit-scrollbar{display:none}
.feed-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;scroll-snap-align:start;border:1px solid #ffffff26;border-radius:24px;overflow:hidden;color:var(--text);text-decoration:none;background:rgba(15,15,26,.36);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 .5px 0 rgba(255,255,255,.18)}
.feed-card:before{content:'';position:absolute;inset:-45%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 20% 25%,var(--feed-a),transparent 56%),radial-gradient(ellipse at 80% 75%,var(--feed-b),transparent 55%);opacity:.17;transform:rotate(var(--feed-angle));transition:opacity 650ms ease}
@media(hover:hover) and (pointer:fine){.feed-card:hover:before{opacity:.3}.feed-card:hover{border-color:#b070e666}}
:root[data-theme=light] .feed-card{background:rgba(255,255,255,.58);border-color:#ffffffc7;box-shadow:inset 0 .5px 0 #fff}
:root[data-theme=light] .feed-card:before{opacity:.13}
:root[data-theme=light] .feed-card:hover:before{opacity:.23}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.feed-card{background:#151420f5}:root[data-theme=light] .feed-card{background:#f9f6fff5}}
.feed-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.feed-body strong{font-size:17px;line-height:1.3}
.feed-body .muted{font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feed-date{font-size:13px;color:var(--muted)}
.feed-text{font-size:14px;line-height:1.55;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.feed-article{min-height:168px}
.feed-post-head{display:flex;align-items:center;gap:12px}
.feed-post-head>img{width:34px;height:34px;border-radius:50%;flex:0 0 auto}
.feed-post-head>span{display:grid;gap:3px}
.feed-post-head strong{font-size:15px}
.feed-photo{display:block;margin:0 14px 14px;border-radius:12px;overflow:hidden}
.feed-photo img{display:block;width:100%;height:140px;object-fit:cover}
.feed-post-foot{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;padding:0 18px 18px;margin-top:auto}
.feed-views{font-size:12px;color:var(--muted);white-space:nowrap}
.feed-text-empty{color:var(--muted);font-style:italic}
.feed-star{position:absolute;top:14px;right:16px;font-size:16px;line-height:1;background:linear-gradient(135deg,#ff6b9d,#c44dff,#58c6f2);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px #c44dff66)}
.feed-article strong{padding-right:22px}
.feed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.feed-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.feed-grid-section{padding-top:56px}
.feed-card:focus-visible,.feed-arrow:focus-visible,.feed-all:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.feed-more{margin-top:auto;padding-top:4px;color:var(--accent);font-size:14px;font-weight:600}
.feed-more span{display:inline-block;transition:transform 450ms var(--ease-out)}
.feed-card:hover .feed-more span{transform:translateX(4px)}
@media(max-width:1000px){.feed-track{grid-auto-columns:calc((100% - 16px)/2)}.feed-grid,.feed-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.feed{padding-top:50px}.feed-head{flex-direction:column;align-items:flex-start;gap:14px}.feed-head h2{font-size:30px}.feed-track{grid-auto-columns:82%}.feed-grid,.feed-grid-4{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.feed-track{scroll-behavior:auto}.feed-more span,.feed-arrow{transition:none}}

/* Theme switch: round icon button under the logo (owner 04.11), frees space in the top menu. */
.header{position:relative}
.theme.theme-orb{position:absolute;left:14px;top:calc(100% + 12px);z-index:31;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;margin:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);font-size:18px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform 300ms var(--ease-out),background 300ms ease}
.theme.theme-orb:hover{background:var(--soft)}
.theme.theme-orb:active{transform:scale(.92)}
@media(max-width:768px){.theme.theme-orb{position:static;margin-left:auto;width:40px;height:40px;min-width:40px;min-height:40px;max-height:40px;flex:0 0 40px;padding:0;border-radius:50%}}
/* Г2: крошки не прилипают к круглой кнопке темы под логотипом */
@media(min-width:769px){.breadcrumbs{padding-top:96px}.breadcrumbs+.subhero,.breadcrumbs+.art-hero{padding-top:22px}}

/* Glass everywhere (owner 04.11): menu, buttons, panels and the theme switch, as in the PersonaQuiz menu. */
:root{--glass:rgba(15,15,26,.36);--glass-hover:rgba(40,36,60,.5);--glass-line:#ffffff26;--glass-blur:blur(8px) saturate(160%);--glass-shine:inset 0 .5px 0 rgba(255,255,255,.18)}
:root[data-theme=light]{--glass:rgba(255,255,255,.55);--glass-hover:rgba(255,255,255,.75);--glass-line:#ffffffc7;--glass-shine:inset 0 .5px 0 #fff}
.nav-shell,.nav-more-menu,.button.secondary,.theme.theme-orb,.nav-channel,.info-panel,.orbit-card,.art-toc,.art-tip,.art-steps>li,.faq details,.sticky-cta,.back-to-top,.fan-card,.chat-bubble,.captcha,.art-table,.final{background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shine)}
.button.secondary:hover,.theme.theme-orb:hover,.nav-channel:hover{background:var(--glass-hover)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass:#151420f2}:root[data-theme=light]{--glass:#f9f6fff2}}

/* Channel posts from the userbot export: forwarded label and rich text (bold, links, quotes, spoilers). */
.feed-forward{font-size:12px;color:var(--accent)}
.feed-rich .feed-link{color:var(--accent);text-decoration:underline}
.feed-rich blockquote{margin:4px 0;padding-left:10px;border-left:2px solid var(--glass-line)}
.feed-rich code{font-size:13px}
.feed-rich .tg-spoiler{filter:blur(4px);transition:filter 300ms ease}.feed-card:hover .feed-rich .tg-spoiler{filter:none}

/* Post cards: the photo takes the free height and shows its top part; a post without a photo shows more text. */
.feed-post:has(.feed-photo) .feed-body{flex:0 0 auto}
.feed-post .feed-photo{flex:1 1 140px;min-height:140px;display:flex}
.feed-post .feed-photo img{height:auto;min-height:100%;flex:1;object-fit:cover;object-position:top}
.feed-post:not(:has(.feed-photo)) .feed-text{-webkit-line-clamp:14}

/* One frosted surface per card; nested controls share its light and tint. */
body :is(button,input,textarea,select,.tag,.guard-list li,.result-number,.from-link,.tabs):not(:where(.tool,.tool *)){
  background:var(--glass);border-color:var(--glass-line);color:var(--ink);box-shadow:var(--glass-shine)
}
body :is(button,.button.secondary):hover:not(:disabled):not([aria-disabled=true]):not(:where(.tool *)){background:var(--glass-hover)}
.chat-bubble{color:var(--ink)}
.captcha .answers button:hover{background:var(--glass-hover)}
.tool{background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shine)}
.tool .tabs,.tool .tabs button,.tool .field input,.tool .field textarea,.tool .generate{background:var(--glass);border-color:var(--glass-line);color:var(--ink);box-shadow:var(--glass-shine)}
.tool .tabs button[aria-selected=true],.tool .generate{border:1px solid #b070e699;background:var(--glass-hover)}
.tool .tabs button:hover:not(:disabled){background:var(--glass-hover)}
.chat-bubble .small[style]{color:var(--muted)!important}
.captcha{padding:18px;border:1px solid var(--glass-line);border-radius:24px}
.captcha .chat-bubble,.post-demo .button,.info-panel .guard-list li,.nav .nav-channel,.sticky-cta .button{
  -webkit-backdrop-filter:none;backdrop-filter:none
}
.faq details{padding-inline:18px;border:1px solid var(--glass-line);border-radius:18px;margin-bottom:10px}
.final:before,.final:after{content:none}
.final{background:linear-gradient(135deg,#ec6a7e09,#b070e60d,#58c6f208),var(--glass)}

/* Mask the moving brand border, leaving the inside genuinely translucent. */
@property --glass-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.button.primary,.button.join-demo{background:var(--glass);border-color:transparent;color:var(--ink);box-shadow:var(--glass-shine),0 8px 28px #b070e61a;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.button.primary:before,.button.join-demo:before{content:'';position:absolute;inset:0;width:auto;height:auto;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--glass-angle),#ec6a7e,#b070e6,#58c6f2,#ec6a7e);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:glass-border 12s linear infinite;pointer-events:none;z-index:0}
.button.primary:after{content:none}
.post-demo .button.join-demo,.sticky-cta .button.primary{-webkit-backdrop-filter:none;backdrop-filter:none}
@keyframes glass-border{to{--glass-angle:360deg}}

/* The phone header remains one row; its disclosure floats below that row. */
@media(max-width:768px){
  .nav-shell{flex-wrap:nowrap;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-shell:before{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
  .nav-shell .nav{position:absolute;top:calc(100% + 10px);left:0;right:0;width:auto;display:flex;gap:6px;padding:12px;margin:0;border:1px solid var(--glass-line);border-radius:20px;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shine),0 18px 42px #0003;max-height:calc(100dvh - 100px - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity 240ms ease,transform 350ms var(--ease-drawer),visibility 0s 350ms}
  .nav-shell .nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;animation:none;transition:opacity 240ms ease,transform 350ms var(--ease-drawer),visibility 0s}
  .nav-shell .nav>a,.nav-shell .nav-more-btn{min-height:48px;padding:12px 14px;border:1px solid var(--glass-line);border-radius:12px;font-size:16px;background:var(--glass);color:var(--ink)}
  .nav-shell .nav>a:hover,.nav-shell .nav-more-btn:hover{background:var(--glass-hover)}
  .nav-shell .nav-more-menu{background:transparent;box-shadow:none;border:0;padding:6px 0 0;margin:0}
  .nav-shell .nav-more-menu a{min-height:48px;font-size:14px;padding:10px 12px;border-radius:12px}
  .nav-shell .nav-channel{margin-top:2px}
  .theme.theme-orb{width:44px;height:44px;min-width:44px;min-height:44px;max-height:44px;flex-basis:44px}
}
@media(prefers-reduced-motion:reduce){.nav-shell .nav,.nav-shell .nav.open{transition:none}.button.primary:before,.button.join-demo:before{animation:none}}

/* Phone menu: denser glass so the hero text under it does not show through the items (light theme was ~55% white, 05.11). */
@media(max-width:768px){
  .nav-shell .nav{background:rgba(18,16,28,.95)}
  :root[data-theme=light] .nav-shell .nav{background:rgba(255,255,255,.97)}
}

/* Desktop «Ещё»: the trigger is plain text like other menu links; the dropdown is denser glass so the page under it does not show through its text. */
@media(min-width:769px){
  .nav-shell .nav-more .nav-more-btn,.nav-shell .nav-more .nav-more-btn:hover{background:none;border:0;box-shadow:none;padding:0;min-height:0}
  .nav-shell .nav-more-menu{background:rgba(18,16,28,.88);border-color:var(--glass-line);box-shadow:0 18px 50px #0008,var(--glass-shine)}
  :root[data-theme=light] .nav-shell .nav-more-menu{background:rgba(255,255,255,.9);box-shadow:0 18px 50px #3a2a5a22,var(--glass-shine)}
}

/* GuruRandom (owner 04.11): menu item with NEW badge, platform logos in the dropdown, screenshots and a short silent clip in articles, three platform tiles in the hero. */
.nav-new{display:inline-block;margin:0 0 0 6px;padding:2px 6px;border-radius:999px;background:linear-gradient(90deg,#58c6f2,#7c6cf0,#b070e6);color:#fff;font-size:10px;font-weight:700;line-height:1.3;letter-spacing:.04em;vertical-align:2px}
.eyebrow .nav-new{margin:0 8px 0 0}
.nav .nav-guru .nav-more-menu a span{background:none;overflow:hidden;border-radius:8px}
.nav .nav-guru .nav-more-menu a span img{width:28px;height:28px;display:block}
.art-figure{margin:22px auto;max-width:360px;text-align:center}
.art-figure img,.art-figure video{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--glass-line,var(--line));box-shadow:0 18px 50px #0005;background:var(--soft)}
.art-figure figcaption{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.45}
.art-figure:has(img[width="1080"]),.art-figure:has(img[width="720"][height="720"]){max-width:440px}
.guru-trio{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;min-height:340px}
.guru-tile{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;transition:transform 400ms var(--ease-out)}
.guru-tile img{width:112px;height:112px;border-radius:26px;box-shadow:0 18px 44px #0006}
.guru-tile.is-main{order:2}.guru-tile.is-main img{width:168px;height:168px;border-radius:38px;box-shadow:0 26px 70px #58c6f244}
.guru-tile:not(.is-main):first-child{order:1}.guru-tile:not(.is-main):last-child{order:3}
.guru-tile.is-main span{color:var(--ink)}
@media(hover:hover){.guru-tile:hover{transform:translateY(-4px)}}
.guru-final-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:8px 0 14px}
.guru-btn img{width:24px;height:24px;border-radius:7px;flex:none}
.guru-final-channel{color:var(--accent);font-size:15px}
@media(max-width:768px){
  .guru-trio{min-height:0;margin:8px 0 4px;gap:12px}
  .guru-tile img{width:72px;height:72px;border-radius:17px}
  .guru-tile.is-main img{width:104px;height:104px;border-radius:24px}
  .guru-final-buttons .button{width:100%;justify-content:center}
  .art-figure{max-width:300px}
}
@media(prefers-reduced-motion:reduce){.guru-tile{transition:none}}
/* With «GuruRandom NEW» the desktop menu needs ~930 px: on 769–1240 px keep every item on one line, tighter. */
@media(min-width:769px) and (max-width:1240px){
  .nav-shell .nav{gap:14px}
  .nav-shell .nav>a,.nav-shell .nav-more-btn,.nav-shell .nav-channel{white-space:nowrap;font-size:13.5px}
  .nav-shell .nav-channel{padding-left:12px;padding-right:12px}
}
@media(min-width:769px) and (max-width:1100px){
  .nav-shell .brand{font-size:0;gap:0}
  .nav-shell .nav{gap:12px}
}
@media(min-width:769px) and (max-width:940px){
  .nav-shell .nav{gap:10px}
  .nav-shell .nav>a,.nav-shell .nav-more-btn{font-size:12.5px}
  .nav-shell .nav-channel{font-size:0;gap:6px;padding-left:10px;padding-right:10px}
  .nav-shell .nav-channel>span{font-size:13px}
  .nav-shell .nav-guru .nav-new{display:none}
}

/* GuruRandom: video instruction buttons under the hero (owner 04.11) */
.guru-videos{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:-18px 0 34px}
.guru-videos-title{font-size:14px;font-weight:600;color:var(--muted)}
.guru-videos-row{display:flex;flex-wrap:wrap;gap:10px}
.guru-video-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px 10px 12px;border:1px solid var(--glass-line,var(--line));border-radius:14px;background:var(--glass,var(--surface));color:var(--ink);font-size:14px;font-weight:600;transition:background 300ms ease,border-color 300ms ease}
.guru-video-btn:hover{background:var(--glass-hover,var(--soft));border-color:#b070e666}
:root[data-theme=light] .guru-video-btn{background:#fff;border-color:var(--line);box-shadow:0 4px 18px #3a2a5a12}
:root[data-theme=light] .guru-video-btn:hover{border-color:#b070e666}
.guru-video-btn img{width:24px;height:24px;border-radius:7px}
.guru-video-play{width:0;height:0;border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}
@media(max-width:768px){.guru-videos{margin:-8px 0 26px}.guru-videos-row,.guru-video-btn{width:100%}}
.art-faq .faq-intro{max-width:760px;margin:0 0 22px;color:var(--muted)}