/* TOP only: lines, frames and short, scroll-triggered motion. */
.top-motion{--motion-ease:cubic-bezier(.2,.7,.2,1)}
.top-motion .site-header::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,#87a84d,var(--lime));transform:scaleX(var(--top-progress,0));transform-origin:left;pointer-events:none}
.top-motion .hero-era{position:relative;isolation:isolate}
.top-motion .hero-era::after{content:"";position:absolute;z-index:-1;left:0;right:-.03em;bottom:.02em;height:.14em;background:#c9e969;border-radius:50% 15% 25% 15%;transform:rotate(-1.5deg);transform-origin:left}
.top-motion .hero-product-callout::before{content:"";position:absolute;top:-1px;left:18px;width:44px;height:3px;background:#a9c95d}
.top-motion .hero-bottom a>span{display:inline-block}
.top-motion .section-marker::after{content:"";height:1px;flex:1;order:1;margin-inline:10px;background:linear-gradient(90deg,#a1b883 0%,#d7dfcb 65%,transparent);transform-origin:left}
.top-motion .section-marker>span:last-child:not(:nth-child(2)){order:2}
.top-motion :is(.concept,.migration,.support,.faq){position:relative;isolation:isolate}
.top-motion .top-ornament{position:absolute;z-index:-1;pointer-events:none;user-select:none}
.top-motion .top-ornament svg{width:100%;height:100%;fill:none;stroke:#8ba561;stroke-width:1}
.top-motion .top-ornament .ornament-fill{fill:#d2ed6d;stroke:none}
.top-motion .top-orbit{width:260px;height:260px;left:27%;top:160px;opacity:.23}
.top-motion .concept-copy h2{position:relative}
.top-motion .heading-focus{background-image:linear-gradient(rgb(191 215 139 / 28%),rgb(191 215 139 / 28%));background-size:100% .15em;background-position:left 91%;background-repeat:no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.top-motion .idea-list a{position:relative;isolation:isolate;overflow:hidden}
.top-motion .idea-list a::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgb(225 236 206 / 65%),transparent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--motion-ease)}
.top-motion .idea-list .circle-arrow{transition:background .3s,border-color .3s,transform .3s}
.top-motion .possibilities{background:linear-gradient(135deg,#e9ede1,#f0f2e8 62%,#e8eddd);border-block:1px solid #dce3d1}
.top-motion .possibilities::before{width:370px;height:370px;right:-100px;top:35px;border-color:rgb(111 140 69 / 22%);box-shadow:0 0 0 38px rgb(111 140 69 / 4%),0 0 0 76px rgb(111 140 69 / 3%)}
.top-motion .top-signal{width:210px;height:130px;right:4%;top:12px;opacity:.55}
.top-motion .service-photo{box-shadow:0 10px 26px rgb(49 69 29 / 7%)}
.top-motion .service-photo::before{content:"";position:absolute;z-index:1;top:13px;left:13px;width:26px;height:26px;border-left:1px solid rgb(255 255 250 / 90%);border-top:1px solid rgb(255 255 250 / 90%);pointer-events:none}
.top-motion .service-media figcaption{border-bottom:1px solid #ccd7bd;padding-bottom:12px}
.top-motion .service-icon{transition:transform .4s var(--motion-ease)}
.top-motion .migration-explainer{box-shadow:10px 10px 0 #f6f5ef,11px 11px 0 #bfcdaa}
.top-motion .migration-explainer::after{content:"";position:absolute;right:-1px;top:-1px;width:36px;height:36px;border-top:3px solid #99b756;border-right:3px solid #99b756;border-radius:0 6px 0 0;pointer-events:none}
.top-motion .architecture{position:relative;isolation:isolate;overflow:hidden;background:#e9efda}
.top-motion .architecture::before{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgb(105 137 66 / 7%) 1px,transparent 1px),linear-gradient(90deg,rgb(105 137 66 / 7%) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent 25%,#000);pointer-events:none}
.top-motion .architecture::after{content:"";position:absolute;z-index:-1;top:85px;right:-180px;width:440px;height:440px;border:1px solid rgb(125 154 85 / 24%);border-radius:50%;box-shadow:0 0 0 36px rgb(125 154 85 / 4%);pointer-events:none}
.top-motion .architecture-diagram{background:#f8faf2;border-top:3px solid #91ac64}
.top-motion .diagram-managed{background:rgb(233 240 218 / 48%)}
.top-motion .diagram-public{box-shadow:0 8px 24px rgb(35 58 18 / 10%)}
.top-motion .architecture-points>div{padding-top:19px;border-top:1px solid #bbcda4}
.top-motion .support-update-visual{border:1px solid #d1dcc0;box-shadow:0 12px 30px rgb(49 69 29 / 7%)}
.top-motion .support-update-visual figcaption{border-top:3px solid #b1ca7c}
.top-motion .support::before{content:"";position:absolute;z-index:-1;left:-26px;bottom:50px;width:210px;height:210px;border:1px solid #dce5ce;border-radius:50%;box-shadow:0 0 0 24px rgb(186 206 149 / 6%);pointer-events:none}
.top-motion .subscription-label{border-right:3px solid #a6bf76}
.top-motion .flow-section{position:relative;isolation:isolate;background:linear-gradient(120deg,#edf0e6,#f1f3eb)}
.top-motion .flow-list{position:relative}
.top-motion .flow-list::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,#7d9e4c,#c3dc90);transform-origin:left;pointer-events:none}
.top-motion .flow-list>li::before{z-index:1}
.top-motion .flow-list>li>span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #c7d4b6;border-radius:50%;background:#f8faf2}
.top-motion .faq-illustration{width:192px;height:132px;margin-top:32px;color:#6d8a48;pointer-events:none}
.top-motion .faq-illustration svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3}
.top-motion .faq-illustration .bubble-paper{fill:#f8faf2}
.top-motion .faq-illustration .bubble-soft{fill:#e7efd9;stroke:#b9cca1}
.top-motion .faq-illustration .bubble-dot{fill:#afcf6b;stroke:none}
.top-motion .faq-list summary{transition:background .25s,color .25s}
.top-motion .faq-list details[open]{background:rgb(236 242 224 / 60%)}
.top-motion .contact-section .heading-focus{background-image:none}
.top-motion .contact-orbit{right:-110px;top:20px;width:430px;height:430px;z-index:-1;opacity:.58}
.top-motion .contact-orbit svg{stroke:#b9d77a}
.top-motion .contact-section .button{position:relative;isolation:isolate;overflow:hidden}
.top-motion .contact-section .button::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,transparent 20%,rgb(255 255 255 / 55%) 48%,transparent 75%);transform:translateX(-120%);pointer-events:none}
.top-motion .site-footer{position:relative}
.top-motion .site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#92b553,var(--lime) 35%,#dfe7d2 80%)}
@media(hover:hover) and (pointer:fine){
 .top-motion .idea-list a:hover::before,.top-motion .idea-list a:focus-visible::before{transform:scaleX(1)}
 .top-motion .idea-list a:hover .circle-arrow{background:#d2ed6d;border-color:#b1c777;transform:rotate(8deg)}
 .top-motion .service-column:hover .service-icon{transform:translateY(-3px)}
 .top-motion .contact-section .button:hover::before{animation:top-button-sheen .7s ease-out both}
}
@media(prefers-reduced-motion:no-preference){
 .top-motion .hero-era::after{animation:top-underline .8s .2s var(--motion-ease) both}
 .top-motion .hero-product-callout{animation:top-callout 1s .3s ease-out both}
 .top-motion .hero-bottom a>span{animation:top-scroll-cue .7s .4s ease-in-out 2 alternate}
 .top-motion .reveal.is-observed{opacity:1;transform:translateY(22px);transition:transform .75s var(--motion-ease)}
 .top-motion .reveal.is-observed.is-visible{transform:none}
 .top-motion .service-column:nth-child(2){transition-delay:.09s}
 .top-motion .service-column:nth-child(3){transition-delay:.18s}
 .top-motion .motion-in>.section-marker::after,.top-motion .motion-in>.wrap>.section-marker::after{animation:top-line-in .85s var(--motion-ease) both}
 .top-motion .motion-in .heading-focus{animation:top-heading-rule .85s .15s var(--motion-ease) both}
 .top-motion .service-column.is-visible .service-photo img{animation:top-photo-in 1s var(--motion-ease) both}
 .top-motion .architecture-diagram.is-visible .diagram-managed{animation:top-panel-in .8s .15s ease-out both}
 .top-motion .architecture-diagram.is-visible .diagram-public{animation:top-panel-in .8s .35s ease-out both}
 .top-motion .flow-section.motion-in .flow-list::after{animation:top-line-in 1.2s .2s var(--motion-ease) both}
}
@media(min-width:768px) and (max-width:1023px){.top-motion .faq-illustration{display:none}.top-motion .top-orbit{left:15%;top:210px}}
@media(max-width:767px){
 .top-motion .section-marker::after{margin-inline:3px;min-width:15px}
 .top-motion .section-marker>span:last-child:not(:nth-child(2)){max-width:44%;text-align:right}
 .top-motion .top-orbit{width:180px;height:180px;left:auto;right:0;top:210px;opacity:.2}
 .top-motion .top-signal{width:140px;height:90px;right:-12px;top:0;opacity:.38}
 .top-motion .possibilities::before{width:240px;height:240px;right:-165px;top:140px}
 .top-motion .migration-explainer{box-shadow:6px 6px 0 #f6f5ef,7px 7px 0 #bfcdaa}
 .top-motion .architecture::before{background-size:38px 38px;opacity:.7}
 .top-motion .architecture-points>div{padding-top:17px}
 .top-motion .support::before{width:150px;height:150px;left:-10px;bottom:25px}
 .top-motion .flow-list::after{left:3px;right:auto;top:9px;bottom:12px;height:auto;width:2px;transform-origin:top}
 .top-motion .flow-list>li>span{width:30px;height:30px;margin-top:2px}
 .top-motion .faq-illustration{display:none}
 .top-motion .contact-orbit{width:230px;height:230px;right:-95px;top:38px;opacity:.4}
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference){.top-motion .flow-section.motion-in .flow-list::after{animation-name:top-line-down}}
@media(prefers-reduced-motion:reduce){
 .top-motion *,.top-motion *::before,.top-motion *::after{animation:none!important;transition:none!important}
 .top-motion .reveal.is-observed,.top-motion .reveal.is-visible{transform:none}
 .top-motion .idea-list a:hover .circle-arrow,.top-motion .service-column:hover .service-icon{transform:none}
}
@media print{.top-motion .top-ornament,.top-motion .faq-illustration,.top-motion .site-header::after{display:none}.top-motion .reveal.is-observed{transform:none}}
@keyframes top-underline{from{transform:scaleX(.06) rotate(-1.5deg)}to{transform:scaleX(1) rotate(-1.5deg)}}
@keyframes top-callout{from{box-shadow:0 0 0 6px rgb(180 208 124 / 24%)}to{box-shadow:0 4px 16px rgb(29 38 20 / 3%)}}
@keyframes top-scroll-cue{from{translate:0 0}to{translate:0 5px}}
@keyframes top-line-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes top-line-down{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes top-heading-rule{from{background-size:0 .15em}to{background-size:100% .15em}}
@keyframes top-photo-in{from{transform:scale(1.055)}to{transform:scale(1)}}
@keyframes top-panel-in{from{outline:5px solid rgb(169 196 121 / 22%)}to{outline:0 solid transparent}}
@keyframes top-button-sheen{from{transform:translateX(-120%)}to{transform:translateX(120%)}}