/* Platform: eleven sections, one to a screen in slide mode (see js/site.js), each with a drawing that plays once
   when its section is first seen.
   html.js = scripting is on (set in <head> before first paint).  seen-N / cur-N on .p-root are kept by js/site.js. */
.e-chain{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:14px}
.e-chain-arrow{display:flex;align-items:center;justify-content:center}
@media (max-width:899px){.e-chain{grid-template-columns:minmax(0,1fr)}.e-chain-arrow svg{transform:rotate(90deg)}}

.e-cmp{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr) minmax(0,1.5fr)}
.e-cmp-l,.e-cmp-t{padding:19px 16px 19px 0;border-top:1px solid var(--line-2,#2e2e2e);font-size:16px}
.e-cmp-box{margin-left:32px;padding:0 30px}
.e-cmp-row{align-items:center;padding:19px 0;font-size:17px}
@media (max-width:819px){
.e-cmp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.e-cmp-wide{display:none}
.e-cmp-l svg{display:none!important}
.e-cmp-h,.e-cmp-l,.e-cmp-t{grid-area:var(--r) / 1}
.e-cmp-l{padding:16px 12px 0 0}
.e-cmp-t{padding:4px 12px 16px 0;border-top:0;font-size:15px}
.e-cmp-box{grid-area:var(--r) / 2 / span var(--n,1);margin-left:8px;padding:0 16px}
.e-cmp-row{align-items:flex-start;padding:16px 0;font-size:16px}
}

.p-pad{padding-top:clamp(44px,3.6vw,52px);padding-bottom:clamp(44px,3.6vw,52px)}
.p-gap{margin-top:clamp(32px,3.05vw,44px)}
.p-rule{border-top:1px solid #2e2e2e}
.p-rail,.p-cue{display:none}
@media (max-height:2000px){
html.js .p-root .p-in{opacity:0;transform:translateY(14px)}
.p-root.seen-1 .p-s1 .p-in,.p-root.seen-2 .p-s2 .p-in,.p-root.seen-3 .p-s3 .p-in,.p-root.seen-4 .p-s4 .p-in,.p-root.seen-5 .p-s5 .p-in,.p-root.seen-6 .p-s6 .p-in,.p-root.seen-7 .p-s7 .p-in,.p-root.seen-8 .p-s8 .p-in,.p-root.seen-9 .p-s9 .p-in,.p-root.seen-10 .p-s10 .p-in,.p-root.seen-11 .p-s11 .p-in{opacity:1;transform:none;transition:opacity 400ms cubic-bezier(.2,.8,.2,1),transform 400ms cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 60ms + 60ms)}
.p-root.seen-1 .p-s1,.p-root.seen-2 .p-s2,.p-root.seen-3 .p-s3,.p-root.seen-4 .p-s4,.p-root.seen-5 .p-s5,.p-root.seen-6 .p-s6,.p-root.seen-7 .p-s7,.p-root.seen-8 .p-s8,.p-root.seen-9 .p-s9,.p-root.seen-10 .p-s10,.p-root.seen-11 .p-s11{--off:initial}
html.js .p-root .e-rec-sheet{transform:translate(var(--tx),var(--ty)) rotate(var(--r));opacity:.3}
html.js .p-root.seen-1 .e-rec-sheet{animation:e-settle 900ms cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 120ms + 500ms)}
html.js .p-root .p-flat{transform:none}
}
@media (min-width:1150px) and (min-height:620px) and (max-height:2000px), (min-width:900px) and (min-height:980px) and (max-height:2000px){
html{scroll-snap-type:y mandatory}
.p-slide{box-sizing:border-box;min-height:100vh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}
.p-pad{padding-top:40px;padding-bottom:40px}
.p-rule{border-top-color:transparent}
.p-s1,.p-last{justify-content:flex-start}
.p-top{flex:1 1 auto;display:flex;align-items:center}
.p-last-main{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.p-rail{display:flex;flex-direction:column;position:fixed;z-index:5;right:clamp(8px,1.4vw,24px);top:50%;transform:translateY(-50%)}
.p-tick{display:flex;align-items:center;justify-content:flex-end;width:44px;height:24px}
.p-tick::after{content:"";display:block;width:12px;height:1px;background:#6e6e6e;transition:width 200ms cubic-bezier(.2,0,0,1),background-color 200ms cubic-bezier(.2,0,0,1)}
a.p-tick:hover{opacity:1}
.p-tick:hover::after{width:20px;background:#c9c9c9}
.p-root.cur-1 .p-t1::after,.p-root.cur-2 .p-t2::after,.p-root.cur-3 .p-t3::after,.p-root.cur-4 .p-t4::after,.p-root.cur-5 .p-t5::after,.p-root.cur-6 .p-t6::after,.p-root.cur-7 .p-t7::after,.p-root.cur-8 .p-t8::after,.p-root.cur-9 .p-t9::after,.p-root.cur-10 .p-t10::after,.p-root.cur-11 .p-t11::after{width:24px;height:2px;background:#ffffff}
.p-cue{display:flex;flex-direction:column;align-items:center;gap:2px;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 16px;color:#9a9a9a;text-decoration:none}
}
@media (min-width:1150px) and (min-height:620px) and (max-height:820px){.p-pad{padding-top:24px;padding-bottom:24px}.p-gap{margin-top:26px}}
@media (min-width:1150px) and (min-height:620px) and (max-height:2000px) and (prefers-reduced-motion:no-preference), (min-width:900px) and (min-height:980px) and (max-height:2000px) and (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.p-root .p-in{opacity:1!important;transform:none!important;transition:none!important}}
@media print{.p-root .p-in{opacity:1!important;transform:none!important}.p-rail,.p-cue{display:none!important}}

.e-rec-sheet{transform-box:fill-box;transform-origin:center}
@keyframes e-settle{from{transform:translate(var(--tx),var(--ty)) rotate(var(--r));opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.p-root .e-rec-sheet{transform:none!important;opacity:1!important;animation:none!important}}
@media print{.p-root .e-rec-sheet{transform:none!important;opacity:1!important;animation:none!important}}

.a-pop{transform-box:fill-box;transform-origin:center}
.a-wipe{transform-box:fill-box;transform-origin:left center}
.a-growx{transform-origin:left center}
.a-growy{transform-origin:center top}
.a-mark{background:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14)) no-repeat 0 0/100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:1px 3px;margin:0 -3px}
html.js .p-root{--off:none}
html.js .p-root .a{animation-duration:460ms;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both;animation-delay:var(--t,0ms)}
html.js .p-root .a-drop{animation-name:var(--off,a-drop);animation-duration:420ms}
html.js .p-root .a-slide{animation-name:var(--off,a-slide);animation-duration:640ms}
html.js .p-root .a-in{animation-name:var(--off,a-in);animation-duration:360ms}
html.js .p-root .a-pop{animation-name:var(--off,a-pop);animation-duration:300ms}
html.js .p-root .a-fade{animation-name:var(--off,a-fade);animation-duration:420ms}
html.js .p-root .a-draw,html.js .p-root .a-write{animation-name:var(--off,a-draw);stroke-dasharray:var(--len)}
html.js .p-root .a-write{animation-duration:760ms;animation-timing-function:cubic-bezier(.3,0,.3,1)}
html.js .p-root .a-growx{animation-name:var(--off,a-growx);animation-duration:620ms}
html.js .p-root .a-growy{animation-name:var(--off,a-growy);animation-duration:420ms}
html.js .p-root .a-wipe{animation-name:var(--off,a-growx);animation-duration:360ms}
html.js .p-root .a-mark{animation-name:var(--off,a-mark);animation-duration:700ms;animation-timing-function:cubic-bezier(.2,0,0,1)}
html.js .p-root .a-ring{animation-name:var(--off,a-ring);animation-duration:1400ms;animation-timing-function:cubic-bezier(.2,0,0,1)}
@keyframes a-drop{from{opacity:0;transform:translateY(-14px)}}
@keyframes a-slide{from{transform:translateX(var(--fx,0px))}}
@keyframes a-in{from{opacity:0;transform:translateX(-6px)}}
@keyframes a-pop{from{opacity:0;transform:scale(.3)}}
@keyframes a-fade{from{opacity:0}}
@keyframes a-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes a-growx{from{transform:scaleX(0)}}
@keyframes a-growy{from{transform:scaleY(0)}}
@keyframes a-mark{from{background-size:0% 100%}}
@keyframes a-ring{from{box-shadow:0 0 0 0 rgba(43,182,115,.6)}to{box-shadow:0 0 0 10px rgba(43,182,115,0)}}
@media (prefers-reduced-motion:reduce){.p-root .a{animation:none!important}}
@media print{.p-root .a{animation:none!important}}