a{color:#F2F2EE;text-decoration:none;transition:color .25s}
a:hover{color:var(--accent,#F5B700)}
a svg{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
a:hover svg{transform:translateX(5px)}
a[style*="min-height"]{transition:transform .3s cubic-bezier(.2,.8,.2,1),color .25s}
a[style*="min-height"]:hover{transform:translateY(-2px)}
a[style*="border: 1px solid #2E3643"]{transition:border-color .35s}
a[style*="border: 1px solid #2E3643"]:hover{border-color:var(--accent,#F5B700) !important}
.merit-in{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.merit-row:hover .merit-in{transform:translateX(10px)}
.m-num{transition:color .35s}
.merit-row:hover .m-num{color:var(--accent,#F5B700)}
.m-icon{transition:stroke .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.merit-row:hover .m-icon{stroke:var(--accent,#F5B700);transform:rotate(-8deg) scale(1.08)}
.flow-wrap{position:relative}
.flow-road{position:absolute;left:0;right:0;top:44px;height:24px;background:#2A323E;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,0 100%)}
.flow-road::after{content:"";position:absolute;left:0;right:24px;top:50%;height:3px;margin-top:-1.5px;background:repeating-linear-gradient(90deg,var(--accent,#F5B700) 0 22px,transparent 22px 40px)}
.flow-grid{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.flow-step{display:flex;flex-direction:column;gap:24px}
.flow-node{transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.flow-step:hover .flow-node{transform:scale(1.07) rotate(-6deg)}
@media (max-width: 860px){
.flow-road{left:44px;right:auto;top:0;bottom:0;width:24px;height:auto;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),50% 100%,0 calc(100% - 24px))}
.flow-road::after{left:50%;right:auto;top:0;bottom:24px;width:3px;height:auto;margin:0 0 0 -1.5px;background:repeating-linear-gradient(180deg,var(--accent,#F5B700) 0 22px,transparent 22px 40px)}
.flow-grid{grid-template-columns:1fr;gap:56px}
.flow-step{flex-direction:row;align-items:flex-start}
}
details summary{transition:color .25s}
details summary:hover{color:var(--accent,#F5B700)}
@media (prefers-reduced-motion: no-preference){
.hero-copy>*{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) both}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.18s}
.hero-copy>*:nth-child(3){animation-delay:.36s}
.hero-copy>*:nth-child(4){animation-delay:.5s}
.hero-copy>*:nth-child(5){animation-delay:.64s}
.msg{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) 1.1s both}
.badge-pop{animation:pop .8s cubic-bezier(.2,1.5,.4,1) 1.35s both}
.wipe{animation:wipe 1.4s cubic-bezier(.75,0,.2,1) .15s both}
.flow-road::after{animation:dashH 1.2s linear infinite}
@media (max-width: 860px){.flow-road::after{animation-name:dashV}}
@supports (animation-timeline: view()){.bar-fill{transform-origin:left;animation:barIn linear both;animation-timeline:view();animation-range:entry 20% cover 45%}}
.tape{animation:tape 1.6s linear infinite}
@supports (animation-timeline: view()){
.page-rv section:not(.hero) > div:only-child > *,
.page-rv section:not(.hero):not(:has(> div:only-child)) > *,
.page-rv section:not(.hero) ol > li,
.page-rv section:not(.hero) details{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
.page-rv section:not(.hero) ol > li:nth-child(2){animation-range:entry 8% cover 32%}
.page-rv section:not(.hero) ol > li:nth-child(3){animation-range:entry 16% cover 40%}
.page-rv section:not(.hero) ol > li:nth-child(4){animation-range:entry 24% cover 48%}
.m-clip{animation:clipM linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:rotate(-8deg)}}
@keyframes clipM{from{clip-path:polygon(14% 0,14% 0,0 100%,0 100%)}to{clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}}
@keyframes dashH{to{background-position:40px 0}}
@keyframes dashV{to{background-position:0 40px}}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tape{to{background-position:50.91px 0}}

/* ===== Smartphone ===== */
@media (max-width:760px){
  .hero-copy{padding-bottom:56px!important}
  .hero-copy ul li{font-size:12px!important;padding:5px 12px!important}
  .hero-copy a[style*="min-height: 56px"]{flex:1 1 100%;justify-content:center}
  .hero [style*="min-height: 560px"]{min-height:480px!important}
  .badge-pop{width:104px!important;height:104px!important;left:16px!important;top:16px!important}
  .badge-pop span:nth-child(2){font-size:36px!important}
  .msg{left:12px!important;right:12px!important;bottom:12px!important;padding:20px 22px!important}
  #search a[style*="padding: 28px 32px"]{padding:22px 24px!important}
  #search a[style*="padding: 28px 36px"]{padding:22px 24px!important}
  .m-num{width:52px!important;font-size:44px!important}
  .m-icon{display:none}
  .merit-in{gap:12px 16px!important;flex-wrap:nowrap!important}
  .merit-in > div{flex:1 1 auto!important}
  .merit-row:hover .merit-in{transform:none}
  .flow-road{left:28px!important}
  .flow-node{width:80px!important;height:80px!important}
  .flow-node > svg{width:32px;height:32px}
  .flow-node > span{width:32px!important;height:32px!important;font-size:15px!important;right:-8px!important;top:-8px!important}
  .flow-step{gap:18px!important}
  details summary{font-size:16px!important}
  details p{margin-left:0!important}
}