/* Complete System page. Same tokens and motion rules as the rest of the site; transform and opacity only. */
/* 1 arrival: the dark moment */
.arrival{min-height:calc(100vh - 65px);min-height:calc(100svh - 65px);display:flex;align-items:center;padding:48px 0 56px;background:var(--carbon);color:var(--ivory)}
.arrival .wrap{display:grid;gap:40px;grid-template-columns:1fr;align-items:center}
.arrival .eyebrow{color:var(--verd)}
.arrival .display{font-size:clamp(2.8rem,9vw,6.2rem);margin:0 0 .3em}
.arrival .ln{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.arrival .ln>span{display:block;animation:lnrise .7s cubic-bezier(.2,.7,.2,1) both}
.arrival .ln:nth-of-type(1)>span{animation-delay:.2s}.arrival .ln:nth-of-type(2)>span{animation-delay:.34s}
.arrival .lead{color:var(--muted-dk);max-width:32em}
.arrival .lead,.arrival .a-buy,.arrival .facts{animation:fadein .6s .8s ease-out both}
.a-price{font:400 clamp(2.4rem,6vw,3.6rem)/1 var(--head);margin:.2em 0 0}
.arrival .btn{background:var(--verd);border-color:var(--verd);color:var(--carbon)}
.arrival .btn:hover{background:var(--ivory);border-color:var(--ivory)}
.arrival .btn.ghost{background:transparent;color:var(--ivory);border-color:var(--verd)}
.arrival .btn.ghost:hover{background:var(--graphite);color:var(--ivory)}
.arrival .btn[disabled]{background:var(--graphite);color:var(--ivory);border:2px dashed var(--verd)}
.facts{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;font-size:.95rem;color:var(--muted-dk)}
.facts li{padding:0 14px;border-left:1px solid var(--line-dk)}.facts li:first-child{padding-left:0;border-left:0}
.arrival .mono::before{border-color:var(--line-dk)}
.arrival .mono path{fill:var(--ivory);stroke:var(--verd)}
@media (min-width:960px){.arrival .wrap{grid-template-columns:7fr 4fr;gap:72px}.arrival .mono{width:min(280px,100%)}}
/* 2 the walk */
.walk{padding:72px 0 24px;border-top:1px solid var(--rule)}
@media (min-width:960px){.walk{padding:112px 0 40px}}
.walk-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:24px}
.rail{position:sticky;top:0;z-index:20;background:var(--ivory);border-bottom:1px solid var(--rule);margin:0 calc(var(--gut) * -1);padding:0 var(--gut);overflow-x:auto}
.rail ol{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.rail a{display:flex;align-items:center;gap:7px;min-height:48px;font:700 .72rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap}
.rdot{width:11px;height:11px;border-radius:50%;border:2px solid var(--verd-d);background:var(--verd-d);flex:none;transition:transform .3s,background-color .3s}
.js .rdot{background:var(--ivory)}
.js .rail a.on .rdot{background:var(--verd-d);transform:scale(1.25)}
.rail a.on{color:var(--ink)}
.rline{display:none}
.chap{padding:44px 0 36px;scroll-margin-top:60px}
.chap+.chap{border-top:1px solid var(--rule)}
.chap .num{font:700 .78rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--verd-d);margin:0 0 .3em}
.chap h3{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.02;margin:0 0 .2em}
.chap .q{font-style:italic;color:var(--muted);font-size:1.15rem;margin-bottom:1.4em}
.a-note{margin:10px 0 0;font-size:.9rem;color:var(--muted-dk)}
.kit-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px}
.kit-grid li{margin:0}
.kitp{display:block;text-decoration:none;color:var(--ink)}
.kitp img{width:100%;height:auto;background:#fff;border:1px solid var(--rule);box-shadow:0 14px 26px -18px rgba(11,11,12,.5);transform:rotate(var(--rot,0deg));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.kit-grid li:nth-child(3n+1) .kitp{--rot:-1.2deg}.kit-grid li:nth-child(3n+2) .kitp{--rot:.8deg}.kit-grid li:nth-child(3n) .kitp{--rot:-.5deg}
.kitp:hover img,.kitp:focus-visible img{transform:rotate(0) translateY(-3px)}
.kitp .kc{display:block;margin-top:10px;font:700 .8rem var(--body);color:var(--verd-d)}
.kitp .kn{display:block;font-size:.9rem;line-height:1.3}
.js .kit-grid .rv{transform:translateX(26px)}
.js .kit-grid .rv.in{transform:none}
.walkaway{margin-top:32px;background:var(--tint);border-left:4px solid var(--verd-d);padding:16px 18px;max-width:40em}
.walkaway p{margin:0}.walkaway .wk{font:700 .75rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--verd-d);margin-bottom:.3em}
.walkaway .side{margin-top:.7em;font-size:.95rem;color:var(--muted)}
.handoff{position:relative;margin-top:28px;padding-left:40px;min-height:84px;max-width:42em}
.hline{position:absolute;left:11px;top:0;bottom:-36px;width:2px;background:var(--verd-d);transform-origin:top}
.handoff::before{content:"";position:absolute;left:5px;top:0;width:14px;height:14px;border-radius:50%;background:var(--verd-d)}
.js .hline{transform:scaleY(0);transition:transform 1s cubic-bezier(.4,0,.2,1)}
.js .hline.in{transform:none}
.handoff p{margin:0;font-size:.95rem;color:var(--muted)}.handoff .hk{display:block;font:700 .75rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--verd-d);margin-bottom:.2em}
.chap:last-child .hline{bottom:0}
@media (min-width:420px){.kit-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){
 .walk-grid{grid-template-columns:200px 1fr;gap:64px}
 .rail{position:sticky;top:32px;align-self:start;margin:0;padding:0;border:0;overflow:visible;background:none}
 .rail ol{flex-direction:column;gap:22px;position:relative;padding-left:0}
 .rail a{min-height:32px;font-size:.78rem}
 .rline{display:block;position:absolute;left:5px;top:16px;bottom:16px;width:2px;background:var(--rule)}
 .rprog{position:absolute;inset:0;background:var(--verd-d);transform-origin:top;transform:scaleY(var(--p,0))}
 .rdot{position:relative;z-index:1}
 .kit-grid{grid-template-columns:repeat(4,1fr)}
 .chap{scroll-margin-top:24px}
}
/* 3 timeline */
.tl-sec{padding-bottom:72px}
.tl{overflow-x:auto;margin-top:28px;padding:12px 4px 22px;scroll-snap-type:x proximity}
.tl:focus-visible{outline:3px solid var(--verd-d);outline-offset:2px}
.tl ol{display:flex;gap:16px;list-style:none;margin:0;padding:0;width:max-content}
.tl li{position:relative;width:250px;flex:none;scroll-snap-align:start;background:#fff;border:1px solid var(--rule);border-top:4px solid var(--verd-d);padding:16px;margin:0}
.tl .tn{font:700 .72rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.tl .td{font:400 1.7rem/1.1 var(--head);margin:.2em 0 .3em;color:var(--verd-d)}
.tl .tk{font-weight:700;margin:0 0 .4em;line-height:1.3}.tl .tk a{color:var(--ink)}
.tl .tw{font-size:.9rem;color:var(--muted);margin:0}
/* 5 tools */
.paper-sec{background:var(--white);border-top:1px solid var(--rule)}
.demo{background:var(--ivory);border:1px solid var(--rule);padding:22px;margin:32px 0}
.demo h3{margin-top:0}
.demo-form{display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0}
.demo-form label{display:block;font-size:.9rem;font-weight:700;margin-bottom:4px}
.demo-form input{width:100%;min-height:46px;padding:8px 12px;font:400 1rem var(--body);border:1px solid #6B6B6B;border-radius:2px;background:#fff;color:var(--ink)}
.demo-form input:disabled{background:#EDEAE3;color:#333}
.nojs-note{font-size:.9rem;color:var(--muted);margin:0}.js .nojs-note{display:none}
.demo .tbl th[scope=row]{white-space:nowrap}
.warn{font-weight:700;color:var(--verd-d);margin:.4em 0}.warn.bad{color:#8A2B1D}
.anchor-l{font:700 .75rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--verd-d);margin:1.4em 0 .3em}
.anchor{margin:0 0 .6em;padding:.2em 0 .2em 18px;border-left:4px solid var(--verd-d);font:italic 400 1.3rem/1.4 var(--head)}
.tools-grid{display:grid;gap:24px;grid-template-columns:1fr;margin:24px 0}
.tool{background:#fff;border:1px solid var(--rule);padding:18px;margin:0}
.paper-sec .tool{background:var(--ivory)}
.tool img{width:100%;height:auto;border:1px solid var(--rule);background:#fff;margin-bottom:10px}
.tool h3{margin-top:0}
.hp-root{display:inline-block;background:var(--carbon);color:var(--ivory);padding:4px 12px;font-weight:700;margin:6px 0}
.hub-pages{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hub-pages li{border:1px solid var(--verd-d);padding:3px 12px;font-size:.9rem;margin:0}
.dbs{list-style:none;margin:0 0 10px;padding:0}
.dbs li{display:flex;flex-direction:column;border-top:1px solid var(--rule);padding:8px 0;margin:0}.dbs span{font-size:.88rem;color:var(--muted)}
.guides{display:flex;flex-wrap:wrap;gap:24px;margin:8px 0 8px}
.guides figure{margin:0;width:min(200px,44%)}
.guides img,.deckf img{width:100%;height:auto;border:1px solid var(--rule);background:#fff;box-shadow:0 14px 26px -18px rgba(11,11,12,.5)}
.guides figcaption,.deckf figcaption{font-size:.88rem;color:var(--muted);margin-top:8px}
.decks{display:grid;gap:20px;grid-template-columns:1fr}.deckf{margin:0}
@media (min-width:640px){.demo-form{grid-template-columns:1fr 1fr}.decks{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.tools-grid{grid-template-columns:1.25fr 1fr}}
/* 6 inventory */
.inv{margin-top:28px;border-top:1px solid var(--rule)}
.stage-inv>summary{font:400 1.5rem var(--head);padding:16px 0}
.stage-inv .sn{margin-right:10px}.stage-inv .muted,.kit-inv .muted{font:400 .9rem var(--body);color:var(--muted)}
.stage-body{padding:0 0 14px 14px;border-left:2px solid var(--verd-d);margin-left:4px}
.kit-inv>summary{font-weight:400;padding:10px 0}.kit-inv .kc{font:700 .8rem var(--body);color:var(--verd-d);margin-right:8px}
.kit-body{padding:0 0 10px 14px}.kit-body ul{margin:0 0 .6em;padding-left:1.1em}.kit-body li{margin-bottom:.35em;font-size:.93rem}
.kit-body code{font:600 .82rem var(--body);overflow-wrap:anywhere}
.chips{margin:0 0 .6em;display:flex;flex-wrap:wrap;gap:6px}
.inv ul{margin:0;padding-left:1.1em}
/* 7-8 value, confidence */
.tbl tr.total th,.tbl tr.total td{font-weight:700}
.conf-grid{display:grid;gap:40px;grid-template-columns:1fr}
.factlist{list-style:none;margin:0;padding:0}.factlist li{padding:10px 0;border-top:1px solid var(--rule);font-size:.98rem}
@media (min-width:960px){.conf-grid{grid-template-columns:5fr 6fr;gap:72px}}
/* 9 close */
.close{padding-bottom:96px}
/* purchase bar: top on desktop, bottom on mobile; shown after the arrival, hidden near the final call and the footer */
.buybar{display:none}
.js .buybar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--graphite);color:var(--ivory);border-top:1px solid var(--line-dk);transform:translateY(100%);opacity:0;visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s,visibility 0s .35s}
.js .buybar.show{transform:none;opacity:1;visibility:visible;transition-delay:0s}
.buybar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.buybar p{margin:0}.buybar p span{margin-left:8px;color:var(--muted-dk)}
.buybar .btn{min-height:44px;background:var(--verd);border-color:var(--verd);color:var(--carbon);flex:none}
.buybar .btn[disabled]{background:var(--graphite);color:var(--ivory);border:2px dashed var(--verd)}
@media (min-width:960px){.js .buybar{top:0;bottom:auto;transform:translateY(-100%);border-top:0;border-bottom:1px solid var(--line-dk)}}
@media (prefers-reduced-motion:reduce){
 .arrival .ln>span,.arrival .lead,.arrival .a-buy,.arrival .facts{animation:none!important}
 .js .hline,.js .rprog,.js .kitp img{transform:none!important}
 .js .kit-grid .rv{transform:none!important}
 .js .buybar{transition:none!important}
}