/* Elje direction 04: the Euro industrial badge (outputs/02-brand/261017_ELJE_Style-Guide.html). White page, machine black, one painted lime part per view,
   Archivo for everything, DM Mono for numbers and proof, square corners and 2px rules; the oval is kept for the badge, stickers and step icons. */
:root{--ink:#141414;--paper:#fff;--chart:#EDEF72;--lime:#EDEF72;--blue:#EDEF72;--grey:#858585;--steel:#A8A8A8;--rule:#141414;--soft:#F1F0EC;
--type:'Archivo',Helvetica,Arial,sans-serif;--head:'Archivo',Helvetica,Arial,sans-serif;--mono:'DM Mono',ui-monospace,monospace;--sten:'Big Shoulders Stencil Display',Impact,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--type);-webkit-font-smoothing:antialiased}
a{color:inherit}img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--type);font-weight:900;font-stretch:112%;letter-spacing:-.025em;line-height:1;margin:0 0 .45em}
h1,h2{text-transform:lowercase}
h1{font-size:clamp(40px,6.4vw,84px)}h2{font-size:clamp(30px,3.8vw,50px)}h3{font-size:clamp(19px,1.8vw,23px);font-weight:800;font-stretch:100%;letter-spacing:-.01em;line-height:1.15}
h1 em,h2 em,h3 em,.em{font-style:normal;text-decoration:underline;text-decoration-thickness:.12em;text-underline-offset:.1em}
.sub{color:var(--grey)}
p{margin:0 0 1em}.lead{font-size:clamp(17px,1.35vw,19px);max-width:40em}
.mono,.eyebrow,.lab{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.eyebrow{display:inline-block;margin:0 0 18px;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:5px 12px}
.wrap{max-width:1300px;margin:0 auto;padding:0 24px}
@media (max-width:620px){.wrap{padding:0 16px}}
.band{padding:80px 0;border-bottom:2px solid var(--rule)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:var(--ink);text-decoration:none;font:700 14px/1 var(--type);letter-spacing:.1em;text-transform:uppercase;padding:15px 22px;border:2px solid var(--ink);border-radius:0;cursor:pointer}
.btn.blue{background:var(--lime)}.btn.ghost{background:#fff}.btn.dark{background:var(--ink);color:#fff}
/* header: badge left, square nav cells right, one lime Apply */
.hdr{position:sticky;top:0;background:var(--paper);z-index:10;border-bottom:2px solid var(--ink)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.hdr .logo svg{height:44px;width:auto}
.nav{display:flex;gap:0;align-items:center;border:2px solid var(--ink)}
.nav a{text-decoration:none;font:700 13px/1 var(--type);letter-spacing:.1em;text-transform:uppercase;padding:12px 16px;background:#fff;border-left:2px solid var(--ink)}
.nav a:first-child{border-left:0}.nav a.cta{background:var(--lime)}
.nav a[aria-current]{background:var(--ink);color:#fff}
.burger{display:none}
@media (max-width:900px){.nav{display:none}.nav.open{display:flex;position:absolute;left:0;right:0;top:76px;background:#fff;flex-direction:column;align-items:stretch;border-width:0 0 2px}.nav.open a{border-left:0;border-top:2px solid var(--ink)}.burger{display:inline-flex;padding:11px 16px}}
/* the ticker: the one dark band, read like label tape */
.ticker{background:var(--ink);color:var(--lime);overflow:hidden;white-space:nowrap;padding:11px 0;font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.ticker span{display:inline-block;padding-right:56px}.ticker span::before{content:"\25CF";margin-right:14px;color:#fff;font-size:8px;vertical-align:2px}
.ticker .track{display:inline-block;animation:tk 70s linear infinite}@keyframes tk{to{transform:translateX(-50%)}}
/* hero: copy left, the drawing on an enamel plate */
.hero{padding:28px 0 72px;border-bottom:2px solid var(--rule)}.hero .panel{background:var(--soft);border:2px solid var(--ink);padding:40px 40px 0;display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:end;overflow:hidden}
.hero .panel .copy{padding-bottom:44px}.hero .panel .art svg{width:100%;height:auto}.hero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.hero .btn.ghost{background:#fff}
@media (max-width:900px){.hero .panel{grid-template-columns:1fr;padding:28px 20px 0}.hero .panel .copy{padding-bottom:0}}
.intro{text-align:left;max-width:860px}.intro .ic{width:120px;margin:0 0 22px;background:var(--lime);border:2px solid var(--ink);border-radius:50%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}.intro .ic svg{width:60%}
/* cards: product tiles. Drawing in a boxed cream tile, part number, title, the number on a lime strip */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards.four{grid-template-columns:repeat(4,1fr)}.cards.two{grid-template-columns:repeat(2,1fr)}
.card{display:flex;flex-direction:column;gap:6px;text-decoration:none;position:relative;border:2px solid var(--ink);padding:0 0 18px;background:#fff}
.card>*{margin-left:18px;margin-right:18px}
.card .ic{margin:0 0 14px;background:var(--soft);border-bottom:2px solid var(--ink);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.card .ic svg{width:44%;height:auto}
.card .pn{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);display:flex;justify-content:space-between;gap:8px}
.card h3{margin:2px 18px 0}.card .tag{font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}.card p{margin-top:4px;margin-bottom:0;font-size:15px}
.card .price{margin-top:auto;padding:10px 12px;background:var(--lime);border:2px solid var(--ink);font:800 15px/1.3 var(--type);display:flex;flex-direction:column;gap:4px}
.card .price::before{content:"Price";font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
a.card:hover{background:var(--soft)}
.card.box{padding:22px}.card.box>*{margin-left:0;margin-right:0}.card.box h3{margin:0}.card.box .num{font:900 34px/1 var(--type);font-stretch:112%;margin:8px 0 8px}
.card.flat{padding:20px}.card.flat>*{margin-left:0;margin-right:0}.card.flat h3{margin:0}.card.flat .ic{aspect-ratio:1;width:76px;margin:0 0 12px;border:2px solid var(--ink);background:var(--soft)}.card.flat .ic svg{width:70%}
@media (max-width:1000px){.cards,.cards.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards,.cards.four,.cards.two{grid-template-columns:1fr}}
/* proof numbers on plates */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink)}.proof>div{padding:26px;border-left:2px solid var(--ink)}.proof>div:first-child{border-left:0}
.proof .n{font:900 clamp(44px,5.4vw,72px)/1 var(--type);font-stretch:112%;letter-spacing:-.03em}.proof p{margin:12px 0 0;font-size:15px}
@media (max-width:860px){.proof{grid-template-columns:1fr}.proof>div{border-left:0;border-top:2px solid var(--ink)}.proof>div:first-child{border-top:0}}
/* the feature: the one painted block on the page */
.feature{background:var(--lime);border:2px solid var(--ink);padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.feature .art{background:#fff;border:2px solid var(--ink);padding:36px;display:flex;align-items:center;justify-content:center}.feature .art svg{width:62%;height:auto}
.feature .btn{background:var(--ink);color:#fff}
@media (max-width:860px){.feature{grid-template-columns:1fr;padding:22px}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split .art{background:var(--soft);border:2px solid var(--ink);padding:44px;display:flex;align-items:center;justify-content:center}.split .art svg{width:62%;height:auto}
@media (max-width:860px){.split{grid-template-columns:1fr}}
/* oval sticker: echoes the badge */
.sticker{position:absolute;width:168px;height:90px;border-radius:50%;border:2.5px solid var(--ink);background:var(--lime);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-8deg)}
.sticker b{font:900 19px/1 var(--type);white-space:nowrap;font-stretch:112%;text-transform:lowercase}
.sticker span{font:500 9px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-top:4px;padding:0 10px}
/* the rating plate: every product's proof, landed price on the strip */
.plate{background:var(--soft);border:2px solid var(--ink);border-radius:14px;padding:18px 20px 16px;position:relative;box-shadow:inset 0 0 0 5px var(--soft),inset 0 0 0 6px var(--ink);max-width:460px}
.plate .rv{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--steel);border:1.5px solid var(--ink)}
.plate .rv.a{top:12px;left:12px}.plate .rv.b{top:12px;right:12px}.plate .rv.c{bottom:12px;left:12px}.plate .rv.d{bottom:12px;right:12px}
.plate .ph{display:flex;justify-content:space-between;align-items:center;padding:4px 14px 12px;border-bottom:2px solid var(--ink)}
.plate .ph svg{width:62px;height:auto}
.plate .pt{font:800 21px/1.15 var(--type);padding:12px 14px 8px;margin:0}
.plate dl{display:grid;grid-template-columns:auto 1fr;margin:0 14px}
.plate dt,.plate dd{font:400 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:8px 0;border-top:1px solid var(--ink);margin:0}
.plate dt{color:#5d5d5d;padding-right:16px}.plate dd{text-align:right;font-weight:500}
.plate .strip{margin:10px 14px 4px;padding:10px 12px;background:var(--lime);border:2px solid var(--ink)}
.plate .strip span{display:block;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.plate .strip b{font:900 22px/1.15 var(--type);font-stretch:108%}
/* tables, 2px outer rules and 1px inner */
table{width:100%;border-collapse:collapse;font-size:15px;border-top:2px solid var(--ink)}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--ink);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--grey)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}tfoot td{border-bottom:0;border-top:2px solid var(--ink)}
.band.chart{background:var(--lime)}.band.soft{background:var(--soft)}
/* forms */
form.lead{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:780px}form.lead .full{grid-column:1/-1}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;color:var(--ink)}
input,select,textarea{width:100%;font:400 16px/1.4 var(--type);padding:12px 14px;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:0}
textarea{min-height:120px}.hp{position:absolute;left:-9999px}.note{font-size:14px;color:var(--grey)}.ok{padding:20px;background:var(--lime);border:2px solid var(--ink)}
@media (max-width:620px){form.lead{grid-template-columns:1fr}}
/* steps: numbered, the icon in an oval tile */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}.steps .s{border-top:2px solid var(--ink);padding-top:16px}
.steps .s .ic{background:var(--soft);border:2px solid var(--ink);border-radius:50%;width:110px;height:72px;margin:10px 0 14px;display:flex;align-items:center;justify-content:center}.steps .s .ic svg{width:62px;height:auto}
.steps .s h3{font-size:21px}.steps .s p{margin:0;font-size:15px}
.steps .s .k{font:900 34px/1 var(--mono);display:block}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}@media (max-width:620px){.steps{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:200px 1fr;gap:0;font-size:16px;border-top:2px solid var(--ink)}.kv dt,.kv dd{border-bottom:1px solid var(--ink);padding:14px 0;margin:0}
.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);padding-top:18px}
@media (max-width:620px){.kv{grid-template-columns:1fr}.kv dt{border-bottom:0;padding-bottom:0}}
/* footer */
.ftr{background:var(--ink);color:#fff;padding:64px 0 40px;font-size:15px;border-bottom:8px solid var(--lime)}.ftr input{background:transparent;color:#fff;border-color:#fff}.ftr input::placeholder{color:#A8A8A8}
.ftr .top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}.ftr h4{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0}.ftr li{margin:0 0 8px}.ftr a{text-decoration:none}
.ftr .legal{margin-top:40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--steel)}
.ftr .ack{margin:40px 0 0;padding-top:22px;border-top:1px solid #3a3a3a;max-width:52em;font-size:14px;line-height:1.55;color:#d6d6d6}
.ftr .logo svg{height:58px;width:auto;margin-bottom:10px}.ftr .desc{display:block;font:500 11px/1 var(--mono);letter-spacing:.24em;margin:0 0 18px;color:#fff}
.signup{display:flex;gap:0;max-width:440px}.signup input{flex:1;min-width:0;border-right:0}.signup .btn{flex:0 0 auto}
@media (max-width:860px){.ftr .top{grid-template-columns:1fr 1fr}}@media (max-width:520px){.ftr .top{grid-template-columns:1fr}}
.big{font:800 clamp(24px,2.8vw,36px)/1.2 var(--type);letter-spacing:-.015em;max-width:28em}
/* landing pages: one action in the header, numbered steps, fears, FAQ */
.hdr-cta{font-size:13px;padding:12px 16px}
.hero.lp .panel{grid-template-columns:1.1fr 1fr;padding-top:36px}.hero.lp h1{font-size:clamp(36px,4.6vw,64px)}
.hero.lp .panel .copy{padding-bottom:40px}td.nw{white-space:nowrap}
@media (max-width:900px){.hero.lp .panel{grid-template-columns:1fr}}
.lp-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.lp-steps li{border-top:2px solid var(--ink);padding-top:14px}.lp-steps .k{font:900 34px/1 var(--mono);display:block;margin-bottom:10px}
.lp-steps h3{font-size:20px}.lp-steps p{margin:0;font-size:15px}
@media (max-width:1000px){.lp-steps{grid-template-columns:repeat(2,1fr)}}@media (max-width:620px){.lp-steps{grid-template-columns:1fr}}
.fears{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;border-top:2px solid var(--ink);margin-top:28px}
.fears>div{border-bottom:1px solid var(--ink);padding:22px 0}.fears h3{margin-bottom:8px}.fears p{margin:0;font-size:16px}
@media (max-width:760px){.fears{grid-template-columns:1fr}}
.offer{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:start}
.offer .price{font:900 clamp(48px,6vw,80px)/1 var(--type);font-stretch:112%;letter-spacing:-.03em;margin:6px 0 14px}
.offer ul{margin:0 0 20px;padding-left:20px;font-size:16px}.offer li{margin-bottom:6px}
.offer .paid{background:#fff;border:2px solid var(--ink);padding:26px}.offer .paid h3{margin-bottom:10px}
@media (max-width:860px){.offer{grid-template-columns:1fr}}
.faq{border-top:2px solid var(--ink);max-width:900px}.faq details{border-bottom:1px solid var(--ink)}
.faq summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font:800 clamp(18px,1.6vw,21px)/1.3 var(--type);position:relative}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:500 24px var(--mono)}
.faq details[open] summary::after{content:"\2212"}.faq details p{margin:0 0 18px;max-width:46em}
.check{display:flex;gap:12px;align-items:flex-start;font:400 15px/1.45 var(--type);text-transform:none;letter-spacing:0;color:var(--ink)}
.check input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
section[id]{scroll-margin-top:84px}   /* anchor jumps land below the sticky header */
/* the landed price calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:32px;align-items:start}
.calc-in{border:2px solid var(--ink);padding:24px;background:var(--soft);position:sticky;top:96px}
.calc-in label{margin-top:14px}.calc-in .check{margin-top:12px}
.segs{display:flex;flex-wrap:wrap;border:2px solid var(--ink);background:#fff}
.seg{margin:0;flex:1 1 auto;position:relative}.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:block;text-align:center;padding:11px 10px;font:700 13px/1 var(--type);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-left:2px solid var(--ink)}
.seg:first-child span{border-left:0}.seg input:checked+span{background:var(--ink);color:#fff}.seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:-5px}
.calc-hero{background:var(--lime);border:2px solid var(--ink);padding:22px 24px}
.calc-big{font:900 clamp(40px,5.4vw,68px)/1 var(--type);font-stretch:112%;letter-spacing:-.03em;margin:8px 0 10px}
.calc-range{margin:0;font-size:16px}
.calc-vs{border:2px solid var(--ink);border-top:0;padding:18px 24px;background:#fff}.calc-vs>div b{display:block;font:800 24px/1.2 var(--type);margin-top:6px}.calc-vs p{margin:10px 0 0;font-size:16px}
.calc-break{border:2px solid var(--ink);border-top:0;padding:6px 24px 14px;background:#fff}
.calc-break summary{cursor:pointer;padding:12px 0;font:800 17px/1.3 var(--type)}.calc-break table{font-size:14px}
#calc-out .note{margin-top:14px}
.calc-mail{margin-top:24px;grid-template-columns:1fr 1fr}
@media (max-width:900px){.calc{grid-template-columns:1fr}.calc-in{position:static}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}}

/* pictograms: rest state is the last frame; motion only under .run, once */
.pi{overflow:visible}.pi-truck{overflow:hidden}
.pi .p-pop,.pi .p-line,.pi .p-lever,.pi .p-ripple,.pi .p-door,.pi .p-wheel,.pi .p-tag,.pi .p-land{transform-box:fill-box}
.pi.run .p-in{animation:p-in .55s cubic-bezier(.3,1.3,.5,1) var(--d,0s) both}
@keyframes p-in{from{transform:translateY(-46px);opacity:0}to{transform:none;opacity:1}}
.pi.run .p-pop{transform-origin:center;animation:p-pop .45s cubic-bezier(.3,1.6,.5,1) var(--d,0s) both}
@keyframes p-pop{from{transform:scale(0)}to{transform:none}}
.pi .p-draw{stroke-dasharray:1;stroke-dashoffset:0}
.pi.run .p-draw{animation:p-draw .8s ease-out var(--d,0s) both}
@keyframes p-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pi.run .p-line{transform-origin:left;animation:p-line .4s ease-out var(--d,0s) both}
@keyframes p-line{from{transform:scaleX(0)}to{transform:none}}
.pi.run .p-lever{transform-origin:0% 50%;animation:p-lever .9s ease-in-out both}
@keyframes p-lever{0%{transform:none}35%,100%{transform:rotate(-28deg)}}
.pi.run .p-drop{animation:p-drip 1.1s cubic-bezier(.5,0,1,.6) .3s both}
@keyframes p-drip{0%{transform:none;opacity:1}70%{transform:translateY(40px);opacity:1}71%{transform:translateY(40px);opacity:0}72%{transform:none;opacity:0}100%{transform:none;opacity:1}}
.pi-bathroom.run .p-drop{animation-name:p-drip-s}
@keyframes p-drip-s{0%{transform:none;opacity:1}70%{transform:translateY(12px);opacity:1}71%{opacity:0}72%{transform:none;opacity:0}100%{opacity:1}}
.pi.run .p-ripple{transform-origin:center;animation:p-ripple .7s ease-out 1.05s both}
@keyframes p-ripple{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
.pi.run .p-bob{animation:p-bob 1.2s ease-in-out .6s}
@keyframes p-bob{50%{transform:translateY(3px) rotate(.6deg)}}
.pi.run .p-waves{animation:p-waves .8s linear 3}
@keyframes p-waves{to{transform:translateX(-24px)}}
.pi.run .p-drive{animation:p-drive 1.1s cubic-bezier(.2,.8,.3,1) both}
@keyframes p-drive{from{transform:translateX(-140px)}to{transform:none}}
.pi.run .p-wheel{transform-origin:center;animation:p-spin .37s linear 3}
@keyframes p-spin{to{transform:rotate(360deg)}}
.pi.run .p-road{animation:p-road .37s linear 3}
@keyframes p-road{to{transform:translateX(-24px)}}
.pi.run .p-swing{transform-origin:60px 0;animation:p-swing 1.6s ease-out both}
@keyframes p-swing{0%{transform:rotate(14deg)}30%{transform:rotate(-9deg)}55%{transform:rotate(5deg)}78%{transform:rotate(-2deg)}100%{transform:none}}
.pi.run .p-beam{animation:p-beam 1.6s steps(1) both}
@keyframes p-beam{0%,79%{opacity:0}80%,100%{opacity:1}}
.pi.run .p-door{transform-origin:left;animation:p-door 1.5s ease-in-out both}
@keyframes p-door{0%{transform:none}40%,60%{transform:scaleX(.28)}100%{transform:none}}
.pi.run .p-slide{animation:p-slide .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes p-slide{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
.pi.run .p-glint{animation:p-glint 1.2s ease-out both}
@keyframes p-glint{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
.pi.run .p-tag{transform-origin:50% 12%;animation:p-tag 1.2s ease-out both}
@keyframes p-tag{0%{transform:rotate(16deg)}35%{transform:rotate(-8deg)}65%{transform:rotate(3deg)}100%{transform:none}}
.pi.run .p-land{transform-origin:50% 100%;animation:p-land .8s cubic-bezier(.4,0,.6,1) both}
@keyframes p-land{0%{transform:translateY(-60px);opacity:0}55%{transform:none;opacity:1}72%{transform:scaleY(.9)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.pi.run *{animation:none!important}}

/* explainers: rest state is the last frame; motion only under .run, once (flows loop) */
.explain{padding:56px 0;border-bottom:2px solid var(--rule)}
.explain figure{margin:0 auto;max-width:880px;background:var(--soft);border:2px solid var(--ink);padding:28px}
.explain figcaption{max-width:880px;margin:14px auto 0;font-size:15px;color:#4a4a4a}
.explain svg.ex{width:100%;height:auto;overflow:visible}
.feature .art svg.ex,.split .art svg.ex{width:100%;height:auto}.feature .art:has(svg.ex){padding:18px}
@media (max-width:620px){.feature .art:has(svg.ex){display:none}}
@media (max-width:620px){.explain{padding:36px 0}.explain .wrap{padding:0}.explain figure{padding:10px 6px;border-left:0;border-right:0}.explain figcaption,.explain .explain-cap,.explain .eyebrow{margin-left:16px!important;margin-right:16px!important}}
.ex text{font-family:var(--type)}.ex .ex-mono{font-family:var(--mono);letter-spacing:.06em}
.ex .ex-head{font-weight:900;font-stretch:112%;letter-spacing:-.02em}.ex .ex-small{font-weight:400}.ex .ex-mark{font-stretch:112%;letter-spacing:-.03em}
.ex .x-grow,.ex .x-growx,.ex .x-pop,.ex .x-stamp,.ex .x-in,.ex .x-pass,.ex .x-reject{transform-box:fill-box}
.ex.run .x-grow{transform-origin:bottom;animation:x-grow .7s cubic-bezier(.3,1.2,.5,1) var(--d,0s) both}
@keyframes x-grow{from{transform:scaleY(0)}to{transform:none}}
.ex.run .x-growx{transform-origin:left;animation:x-growx .7s cubic-bezier(.3,1.1,.5,1) var(--d,0s) both}
@keyframes x-growx{from{transform:scaleX(0)}to{transform:none}}
.ex.run .x-fade{animation:x-fade .5s ease-out calc(var(--d,0s) + .35s) both}
@keyframes x-fade{from{opacity:0}to{opacity:1}}
.ex.run .x-pop{transform-origin:center;animation:x-pop .45s cubic-bezier(.3,1.6,.5,1) var(--d,0s) both}
@keyframes x-pop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
.ex.run .x-draw{animation:x-draw .7s ease-out var(--d,0s) both}
@keyframes x-draw{from{opacity:0}to{opacity:1}}
.ex.run .x-flow{stroke-dasharray:10 7;animation:x-draw .7s ease-out var(--d,0s) both,x-flow .9s linear calc(var(--d,0s) + .7s) infinite}
@keyframes x-flow{to{stroke-dashoffset:-17}}
.ex.run .x-stamp{transform-origin:center;animation:x-stamp .5s cubic-bezier(.3,1.8,.5,1) var(--d,0s) both}
@keyframes x-stamp{from{transform:scale(2.4);opacity:0}to{transform:none;opacity:1}}
.ex.run .x-in{animation:x-in .5s cubic-bezier(.3,1.3,.5,1) var(--d,0s) both}
@keyframes x-in{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
.ex.run .x-pass{animation:x-pass 1.6s cubic-bezier(.5,0,.3,1) var(--d,0s) both}
@keyframes x-pass{from{transform:translateX(-420px)}to{transform:none}}
.ex.run .x-reject{animation:x-reject 1.4s ease-in var(--d,0s) both}
@keyframes x-reject{0%{transform:translateX(-120px)}55%{transform:none}68%{transform:rotate(-7deg)}82%{transform:rotate(6deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.ex.run *{animation:none!important}}