/* Layout additions for the approved longer copy; original design is unchanged. */
.build-text-hero{display:block;min-height:0;padding-bottom:36px}
.build-text-hero .hero-copy{max-width:850px}
.build-statistics{max-width:560px;grid-template-columns:1fr;margin:0 auto}
.build-statistics .big-icon{font-size:40px;color:var(--accent)}
.feature-line article,.feature-line div{min-width:0}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease,opacity .45s ease;opacity:0}
.faq-answer>div{overflow:hidden;min-height:0}
details[open]>.faq-answer{grid-template-rows:1fr;opacity:1}
/* Keep details content rendered so both opening and closing can interpolate. */
details:not([open])>.faq-answer{content-visibility:visible}
@supports (interpolate-size:allow-keywords){
  details::details-content{interpolate-size:allow-keywords;height:0;overflow:clip;content-visibility:hidden;transition:height .45s ease,content-visibility .45s allow-discrete}
  details[open]::details-content{height:auto;content-visibility:visible}
}
.faq-more{max-width:840px;margin:0 auto 32px}
.footer-warning{flex-basis:100%;max-width:840px;margin:0}
.prose p,.faq p,.hero-copy p{overflow-wrap:anywhere}
.dice-segments label span{font-size:13px}
@media(max-width:680px){.build-statistics{width:100%}.build-text-hero{padding-top:38px}.build-text-hero .actions{flex-wrap:wrap}.build-statistics .info-panel{padding:24px}}
@media(prefers-reduced-motion:reduce){.faq-answer,details::details-content{transition:none!important}}

/* 03.11: subpages got the ring visual on the right instead of empty space (owner: «много пустого пространства»). */
.build-visual-hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:24px}
.build-visual-hero .hero-copy{max-width:none}
.sub-orbit{height:470px}
.sub-orbit .hero-avatar{width:270px;height:270px}
@media(max-width:768px){.build-visual-hero{grid-template-columns:1fr;gap:10px}.sub-orbit{height:330px;max-width:400px;margin:0 auto}.sub-orbit .hero-avatar{width:200px;height:200px}.sub-orbit .person.p1{top:95px}}
/* 03.11: statistics card no longer overlaps the rotated fan; final block ring holds the logo instead of being empty. */
@media(min-width:769px){.fan{min-height:500px}}
.final .eyebrow:before{width:78px;height:78px;background:url(logo-small.png) center/60px no-repeat;border-color:#b070e66b;animation:final-logo 4.5s ease-in-out infinite alternate}
@keyframes final-logo{from{transform:scale(.96);box-shadow:0 0 18px #b070e622}to{transform:scale(1.05);box-shadow:0 0 38px #b070e655}}
@media(prefers-reduced-motion:reduce){.final .eyebrow:before{animation:none}}
@media(max-width:768px){.final .eyebrow:before{width:64px;height:64px;background-size:48px}}
/* 03.11 (Codex review): hover tilt and reduced motion no longer collapse the fan; tilt is appended via --tilt. */
.fan-card.spotlight{--fx:240px;--fr:11deg;transform:translateX(calc(var(--dir)*var(--spread)*var(--fx))) rotate(calc(var(--dir)*var(--spread)*var(--fr))) var(--tilt,rotate(0deg));transition:opacity 650ms ease,translate 700ms var(--ease-drawer),scale 700ms var(--ease-drawer)}
@media(max-width:1000px){.fan-card.spotlight{--fx:200px}}
@media(max-width:768px){.fan-card.spotlight{--fx:0px;--fr:2deg}}
@media(prefers-reduced-motion:reduce){.fan-card.spotlight{--tilt:rotate(0deg);transition:none}}
/* 03.11 (Opus review): the protection block shows what the algorithm does instead of a captcha picture (owner: captcha is not the main thing). */
.guard-list{list-style:none;margin:14px 0 6px;padding:0;display:grid;gap:10px}
.guard-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:transform 550ms var(--ease-out),border-color 550ms var(--ease-out)}
.guard-list li:hover{transform:translateX(4px);border-color:#b070e655}
.guard-list strong{display:block;font-size:15px}.guard-list small{color:var(--muted);font-size:13px}
/* 360px: the stats strip fits the screen. */
@media(max-width:380px){.proof strong{font-size:22px;overflow-wrap:anywhere}.proof>div:last-child strong{font-size:19px}.proof{gap:18px}}
/* 04.11 round 2 */
/* Background ribbons: no live blur (it cost ~half the frames), own compositor layer. Looks the same — checked side by side. */
.aurora i{filter:none!important;will-change:transform}
/* Page entrance: content slides in from above on every page load. */
main{animation:page-in 650ms cubic-bezier(.22,1,.36,1) both}
@keyframes page-in{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 220ms ease both}
::view-transition-new(root){animation:none}
@keyframes vt-out{to{opacity:0}}
/* The header is not part of the page fade (owner 05.11: it must stand still on menu clicks): own snapshot, new header shown at once. */
.header{view-transition-name:site-header}
::view-transition-group(site-header),::view-transition-new(site-header){animation:none}
::view-transition-old(site-header){display:none}
/* Until Onest is loaded (theme.js), header items are laid out but not shown, so they appear once, in their final place. */
.fonts-wait .nav-shell>*{visibility:hidden}
/* Interactive examples keep their geometry and focus throughout a response. */
.join-demo{position:relative;isolation:isolate;min-height:56px}
.join-demo.is-joined{border-color:#58c6f2aa;cursor:default}
.join-status{min-height:3.3em}
.post-demo .join-demo:hover{translate:none}
.captcha .feedback{display:flex;align-items:flex-start;gap:8px;min-height:3.3em}
.feedback-message{flex:1;min-width:0}
.captcha-confetti{display:inline-block;flex:0 0 24px;visibility:hidden;transform-origin:center bottom}
.captcha.is-solved .captcha-confetti{visibility:visible;animation:captcha-cheer 650ms var(--ease-out)}
.answers button.is-correct{border-color:var(--accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}
.answers button[aria-disabled=true]{cursor:default}
@keyframes captcha-cheer{0%{transform:rotate(-12deg) scale(.85)}45%{transform:rotate(12deg) scale(1.15)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){main{animation:none}.captcha.is-solved .captcha-confetti{animation:none}}
/* Channel link in the menu (owner 04.11: a channel button besides the footer). */
.nav .nav-channel{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid #58c6f255;border-radius:999px;color:var(--text);background:linear-gradient(90deg,#58c6f212,#b070e612);transition:border-color 450ms var(--ease-out),background 450ms var(--ease-out)}
.nav .nav-channel:hover{border-color:#58c6f2aa;background:linear-gradient(90deg,#58c6f222,#b070e622)}
.tg-dot{width:8px;height:8px;border-radius:50%;background:#58c6f2;box-shadow:0 0 0 0 #58c6f288;animation:tg-pulse 2.4s ease-out infinite}
@keyframes tg-pulse{0%{box-shadow:0 0 0 0 #58c6f288}70%,100%{box-shadow:0 0 0 7px #58c6f200}}
.final .channel-btn{margin-left:12px}
@media(max-width:768px){.nav .nav-channel{justify-content:center;margin-top:6px}.final .channel-btn{margin:12px 0 0;width:100%}}
@media(prefers-reduced-motion:reduce){.tg-dot{animation:none}}
/* Phone: the opened menu drops below the logo row instead of splitting it. */
@media(max-width:768px){.nav-shell .nav{order:3}}