/* FV: decisive type, a tangible device scene and coordinated short entrances. */
.top-motion .hero{background:#f7f5ec}
.top-motion .fv-grid,.top-motion .fv-rail,.top-motion .fv-signal{position:absolute;pointer-events:none;user-select:none}
.top-motion .fv-grid{z-index:-1;inset:0 auto 0 0;width:47%;background-image:linear-gradient(rgb(112 143 75 / 7%) 1px,transparent 1px),linear-gradient(90deg,rgb(112 143 75 / 7%) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,#000,transparent 95%)}
.top-motion .fv-grid::after{content:"";position:absolute;left:-240px;bottom:-215px;width:480px;height:480px;border:1px solid rgb(123 153 77 / 30%);border-radius:50%;box-shadow:0 0 0 28px rgb(145 174 102 / 5%),0 0 0 56px rgb(145 174 102 / 3%)}
.top-motion .fv-rail{z-index:-1;left:23px;top:148px;bottom:100px;width:10px;border-left:1px solid #bdcca7;background:repeating-linear-gradient(180deg,#a7bc86 0 1px,transparent 1px 24px);opacity:.65;transform-origin:top}
.top-motion .fv-signal{z-index:-1;right:28px;top:130px;width:54px;height:54px;color:#88a75a}
.top-motion .fv-signal svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2}
.top-motion .fv-signal .signal-fill{fill:#bfdd7f;stroke:none}
.top-motion .hero .eyebrow{display:inline-flex;width:auto;max-width:100%;gap:12px;min-height:34px;padding:8px 13px;margin-bottom:24px;background:#263522;color:#e0eccf;border:1px solid #4e673b;border-radius:3px;font-size:10px;line-height:1.5;letter-spacing:1.7px}
.top-motion .hero .status-dot{width:6px;height:6px;background:#d2ed6d;box-shadow:0 0 0 4px rgb(210 237 109 / 13%)}
.top-motion .hero-pre{font-size:15px;line-height:1.7;border-left:3px solid #a8c761;padding-left:12px;margin-bottom:18px}
.top-motion .hero-pre .fv-pre-phrase{display:inline-block;white-space:nowrap}
.top-motion .hero h1{max-width:570px;line-height:1.2;letter-spacing:-.05em}
.top-motion .hero h1>.hero-primary{display:flex;align-items:baseline;gap:10px;font-size:clamp(48px,4.3vw,60px);font-weight:900;line-height:1.15}
.top-motion .hero-primary>.latin{flex:none;margin:0;font-size:1.8em;line-height:1;letter-spacing:-.075em;color:#36551e;font-weight:900}
.top-motion .hero-primary-rest{font-size:.88em;line-height:1.3;white-space:nowrap}
.top-motion .hero h1>.hero-focus{margin-top:18px;font-size:clamp(33px,3.05vw,44px);line-height:1.45;letter-spacing:-.06em;color:#1e2b19}
.top-motion .hero-era{display:inline-flex;align-items:baseline;gap:0;padding:5px 10px 7px;margin-right:7px;background:#263522;color:#d2ed6d;line-height:1.1;font-size:1.15em;border-radius:3px;box-shadow:6px 6px 0 #c5d89b;isolation:isolate}
.top-motion .hero-era::after{content:none}
.top-motion .hero-era>.latin{font-size:1.06em;line-height:1;margin-left:0;margin-right:.02em;letter-spacing:-.045em}
.top-motion .hero-description{margin-top:28px}
.top-motion .hero-description strong{font-size:21px;line-height:1.65}
.top-motion .hero-description .hero-plan{font-size:34px;line-height:1.3;margin-left:.15em;background:linear-gradient(transparent 62%,#c7e581 0)}
.top-motion .hero-actions{margin-top:26px;gap:28px}
.top-motion .hero-actions .button-dark{min-height:72px;padding:15px 18px 15px 27px;background:#d2ed6d;color:#24351a;border:1px solid #b5ce76;border-radius:5px;font-size:15px;box-shadow:6px 6px 0 #36512a}
.top-motion .hero-actions .button-arrow{width:40px;height:40px;border-color:#829d47;font-size:25px}
.top-motion .hero-actions .text-link{color:#344b26;font-weight:800}
.top-motion .hero-notes{width:fit-content;max-width:100%;margin-top:28px;font-size:13px;gap:10px 16px;flex-wrap:wrap}
.top-motion .hero-product-callout{background:#263522;border-color:#90af60;border-radius:4px;box-shadow:7px 8px 0 rgb(153 178 113 / 27%)}
.top-motion .hero-product-callout::before{left:18px;width:108px;height:4px;background:#c7e581}
.top-motion .hero-product-callout .callout-context{color:#d5e1c8;font-size:13px}
.top-motion .hero-product-callout .callout-symbol{color:#d2ed6d}
.top-motion .hero-product-callout .callout-focus{font-size:19px;color:#d2ed6d;line-height:1.55;margin-top:5px}
.top-motion .hero-product-callout small{color:#e2ead7;font-size:13px;line-height:1.65;margin-top:5px}
.top-motion .hero-product-callout .callout-arrow{color:#d2ed6d;font-size:21px}
.top-motion .hero-bottom a{min-height:44px;padding:6px 14px 6px 17px;border:1px solid #c1cfaa;border-radius:30px;background:rgb(249 251 242 / 88%);font-size:12px;color:#36512a}
.top-motion .hero-bottom a>span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #b8c7a1;border-radius:50%;font-size:16px;line-height:1}
@media(min-width:1280px){
 .top-motion .hero{min-height:910px}
 .top-motion .hero-inner{position:static;padding-top:140px;padding-bottom:165px}
 .top-motion .hero-art::before{background:none}
 .top-motion .hero-art::after{background:linear-gradient(90deg,rgb(250 249 242 / 70%) 0%,rgb(250 249 242 / 28%) 30%,transparent 48%)}
 .top-motion .hero-product-callout{padding:15px 19px}
}
@media(min-width:1920px){.top-motion .hero{min-height:max(970px,calc(34.3vw + 305px))}}
@media(min-width:1024px) and (max-width:1279px){
 .top-motion .hero{min-height:940px}
 .top-motion .hero-inner{padding-top:145px;padding-bottom:150px}
 .top-motion .hero h1{max-width:49%}
 .top-motion .hero h1>.hero-primary{font-size:43px;gap:8px}
 .top-motion .hero h1>.hero-focus{font-size:31px;margin-top:20px}
 .top-motion .hero-era{padding:5px 8px 6px;margin-right:5px;box-shadow:5px 5px 0 #c5d89b}
 .top-motion .hero-description strong{font-size:19px}
 .top-motion .hero-description .hero-plan{font-size:30px}
 .top-motion .hero-actions{gap:23px}
 .top-motion .hero-actions .button-dark{font-size:14px}
 .top-motion .hero-product-callout{top:calc(236px + 34.56vw)}
 .top-motion .hero-device-scene{top:250px}
 .top-motion .hero-product-callout .callout-focus{font-size:18px}
 .top-motion .fv-signal{top:140px}
}
@media(min-width:768px) and (max-width:1023px){
 .top-motion .hero-inner{padding-top:34px;padding-bottom:100px}
 .top-motion .hero h1{max-width:none}
 .top-motion .hero h1>.hero-primary{font-size:47px;gap:10px}
 .top-motion .hero h1>.hero-focus{font-size:35px;margin-top:18px}
 .top-motion .hero-pre{font-size:14px}
 .top-motion .hero-device-scene{position:relative;margin-top:31px;height:330px}
 .top-motion .hero-product-callout{margin-top:30px;width:380px;padding:15px 19px}
 .top-motion .hero-description strong{font-size:20px}
 .top-motion .hero-description .hero-plan{font-size:31px}
 .top-motion .hero-actions{gap:28px}
 .top-motion .hero-notes{margin-top:25px}
 .top-motion .fv-rail{top:130px;bottom:85px;left:24px}
 .top-motion .fv-signal{top:130px;right:42px}
 .top-motion .fv-grid{width:100%;opacity:.65;mask-image:linear-gradient(180deg,#000,transparent 80%)}
}
@media(max-width:767px){
 .top-motion .hero-inner{padding-top:32px;padding-bottom:100px}
 .top-motion .hero .eyebrow{min-height:29px;padding:6px 10px;font-size:8px;letter-spacing:1.2px;gap:10px;margin-bottom:21px}
 .top-motion .hero-pre{font-size:13px;line-height:1.8;padding-left:9px;margin-bottom:21px;letter-spacing:0}
 .top-motion .hero h1{max-width:none}
 .top-motion .hero h1>.hero-primary{font-size:clamp(28px,7.8vw,48px);gap:7px;line-height:1.15}
 .top-motion .hero-primary>.latin{font-size:1.8em}
 .top-motion .hero-primary-rest{font-size:.88em}
 .top-motion .hero h1>.hero-focus{font-size:clamp(21px,5.9vw,34px);line-height:1.4;margin-top:17px;letter-spacing:-.06em}
 .top-motion .hero-era{padding:4px 6px 5px;margin-right:5px;font-size:1.13em;box-shadow:4px 4px 0 #c5d89b}
 .top-motion .hero-device-scene{position:relative;margin-top:25px}
 .top-motion .hero-product-callout{margin-top:32px;padding:14px 15px;box-shadow:5px 6px 0 rgb(153 178 113 / 22%)}
 .top-motion .hero-product-callout .callout-focus{font-size:18px}
 .top-motion .hero-product-callout .callout-context,.top-motion .hero-product-callout small{font-size:13px}
 .top-motion .hero-description{margin-top:28px}
 .top-motion .hero-description strong{font-size:16px}
 .top-motion .hero-description .hero-plan{font-size:27px}
 .top-motion .hero-actions{margin-top:25px;gap:22px}
 .top-motion .hero-actions .button-dark{min-height:68px;font-size:14px;width:100%;padding:13px 16px 13px 21px;box-shadow:5px 5px 0 #36512a}
 .top-motion .hero-notes{margin-top:26px}
 .top-motion .hero-bottom a{padding:5px 10px 5px 12px;font-size:11px;gap:7px}
 .top-motion .hero-bottom a>span{width:22px;height:22px;font-size:15px}
 .top-motion .fv-grid{width:100%;opacity:.55;background-size:34px 34px;mask-image:linear-gradient(180deg,#000,transparent 65%)}
 .top-motion .fv-rail{display:none}
 .top-motion .fv-signal{display:none}
}
@media(max-width:374px){
 .top-motion .hero-product-callout .callout-focus{font-size:16px}
 .top-motion .hero-description strong{font-size:15px}
 .top-motion .hero-description .hero-plan{font-size:24px}
 .top-motion .hero-actions .button-dark{font-size:13px}
 .top-motion .hero-bottom a{font-size:11px}
}
@media(hover:hover) and (pointer:fine){
 .top-motion .hero-actions .button-dark:hover{background:#def58d;transform:translateY(-3px);box-shadow:7px 10px 0 #36512a}
 .top-motion .hero-product-callout:hover{background:#30432a;border-color:#c7e581;box-shadow:9px 12px 0 rgb(153 178 113 / 30%)}
 .top-motion .hero-bottom a:hover{background:#e7f1d2;border-color:#94b061}
}
@media(prefers-reduced-motion:no-preference){
 .top-motion .hero-primary{animation:fv-heading-in .95s .1s var(--motion-ease) both}
 .top-motion .hero-focus{animation:fv-heading-in .95s .25s var(--motion-ease) both}
 .top-motion .hero-era{animation:fv-era-pop .8s .45s var(--motion-ease) both}
 .top-motion .hero-description{animation:fv-heading-in .9s .4s var(--motion-ease) both}
 .top-motion .hero-actions{animation:fv-heading-in .9s .55s var(--motion-ease) both}
 .top-motion .hero-art{animation:fv-scene-settle 1.4s ease-out both;transform-origin:70% 48%}
 .top-motion .hero-device-scene{animation:fv-scene-entry 1.15s .3s var(--motion-ease) both}
 .top-motion .hero-product-callout{animation:fv-callout-entry .9s .6s var(--motion-ease) both}
 .top-motion .fv-rail{animation:fv-rail-draw 1.4s .15s ease-out both}
 .top-motion .fv-signal{animation:fv-signal-turn 1.8s .2s var(--motion-ease) both}
}
@media(prefers-reduced-motion:reduce){
 .top-motion .hero *,.top-motion .hero::before,.top-motion .hero *::before,.top-motion .hero *::after{animation:none!important;transition:none!important}
 .top-motion .hero-actions .button-dark:hover,.top-motion .hero-product-callout:hover{transform:none}
}
@media print{.top-motion .fv-grid,.top-motion .fv-rail,.top-motion .fv-signal{display:none}.top-motion .hero-product-callout{color:#263522;background:#eef4e3}.top-motion .hero-product-callout :is(.callout-context,.callout-focus,small){color:#263522}}
@keyframes fv-heading-in{from{opacity:.35;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes fv-era-pop{from{scale:.94;box-shadow:0 0 0 #c5d89b}to{scale:1;box-shadow:6px 6px 0 #c5d89b}}
@keyframes fv-scene-settle{from{transform:scale(1.035)}to{transform:scale(1)}}
@keyframes fv-scene-entry{from{opacity:.55;translate:0 22px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes fv-callout-entry{from{opacity:.3;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes fv-rail-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fv-signal-turn{from{opacity:.1;rotate:-80deg;scale:.7}to{opacity:1;rotate:0deg;scale:1}}
