/* Layout: printed-thumbnail wall. Flat colour fields with halftone cutouts and hand notes, on a grainy charcoal ground. Single dark look by design. */
:root{
  --ground:#1C1B1A;      /* coffee punk charcoal */
  --ground-2:#262422;
  --ink:#0E0D0C;         /* print black */
  --bone:#E8DCC4;
  --bone-dim:#B9AE98;
  --orange:#C46228;      /* burnt orange, the house colour */
  --red:#C8372B;         /* thumbnail red */
  --mustard:#D9A732;     /* thumbnail yellow, warmed */
  --blue:#2E48C9;        /* systems accent */
  --note:#F2D54A;        /* sticky note */
  --f-display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --f-hand:"Caveat","Bradley Hand","Comic Sans MS",cursive;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--bone);font-family:var(--f-body);font-size:17px;line-height:1.55;overflow-x:hidden}
/* grain over everything */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ground)}
a{color:inherit}
:focus-visible{outline:3px solid var(--note);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* type */
.disp{font-family:var(--f-display);font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;text-wrap:balance;filter:url(#worn)}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.hand{font-family:var(--f-hand);font-weight:700;line-height:1}

/* mock banner */
.mockbar{background:var(--ink);border-bottom:1px solid #000}
.mockbar .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between;padding-block:8px;flex-wrap:wrap}
.mockbar span{color:var(--bone-dim)}
.mockbar a{color:var(--note);text-decoration:none}

/* nav */
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ground);border-bottom:1px solid #000}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
.wordmark{font-size:2rem;text-decoration:none;display:flex;gap:.25em}
.wordmark b{color:var(--orange);font-weight:900}
nav.top ul{display:flex;gap:4px 20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav.top ul a{text-decoration:none;color:var(--bone-dim)}
nav.top ul a:hover{color:var(--bone)}

/* hero */
.hero{background:var(--orange);color:var(--ink);position:relative;overflow:hidden;border-bottom:6px solid var(--ink)}
.hero::before,.field::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(var(--ink) 1px,transparent 1.4px);background-size:6px 6px;mask-image:linear-gradient(115deg,#000 0%,transparent 55%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:center;padding-block:56px 48px}
.hero h1{font-size:clamp(4.4rem,12.5vw,11.5rem);margin:0}
.hero h1 .dim{display:block}
.hero p.lede.big{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:600;line-height:1.2;max-width:32ch}
.hero .wins{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px;max-width:680px;filter:drop-shadow(2px 3px 0 rgba(14,13,12,.35))}
.hero .wins li{background:var(--note);color:var(--ink);font-family:var(--f-hand);font-weight:700;font-size:1.5rem;line-height:1.1;padding:5px 12px 3px}
.hero .wins li:nth-child(1){rotate:-3deg} .hero .wins li:nth-child(2){rotate:2deg;translate:0 3px} .hero .wins li:nth-child(3){rotate:-1.5deg} .hero .wins li:nth-child(4){rotate:2.5deg;translate:0 2px}
.seework{display:inline-flex;align-items:flex-start;gap:4px;margin-top:14px;font-family:var(--f-hand);font-weight:700;font-size:2.2rem;color:var(--ink);text-decoration:none;transform:rotate(-3deg)}
.seework:hover{color:var(--bone)}
.seework svg{overflow:visible;margin-top:10px}
.hero .adds{display:flex;flex-wrap:wrap;gap:2px 18px;margin:0 0 14px;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--ink);opacity:.78}
.hero .adds s{text-decoration:none;position:relative;white-space:nowrap}
.hero .adds s::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:3px;background:var(--red);border-radius:2px;transform:rotate(-3deg)}
.hero .adds s:nth-child(even)::after{transform:rotate(2deg);top:48%}
.hero h1 .dim{color:var(--bone)}
.hero p.lede{max-width:34ch;font-size:1.15rem;font-weight:500;margin:22px 0 0}
.hero .kicker{display:inline-block;background:var(--ink);color:var(--bone);padding:5px 10px;margin-bottom:18px}
.hero .art{position:relative;aspect-ratio:1;max-width:100%}
.hero .art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:contrast(1.25)}
.hero .art .hand{position:absolute;right:-2%;bottom:-2%;font-size:2rem;color:var(--ink);transform:rotate(-6deg);white-space:nowrap}
.hero .art svg{position:absolute;right:16%;bottom:6%;width:22%;overflow:visible}

/* sections */
section.band{padding-block:72px}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:32px}
.shead h2{font-size:clamp(3rem,7vw,5.6rem);margin:0}
.shead p{max-width:44ch;margin:0;color:var(--bone-dim)}
.tag{display:inline-block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;background:var(--bone);color:var(--ink)}

/* thumbnail cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:28px 22px}
.card{text-decoration:none;display:flex;flex-direction:column;gap:12px;min-width:0}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;color:var(--ink);border:2px solid #000;transition:transform .18s ease}
.card:hover .thumb{transform:rotate(-1deg) scale(1.02)}
.thumb .t{position:absolute;left:5%;top:7%;width:62%;font-size:clamp(1.9rem,3.3vw,2.6rem);z-index:2}
.thumb img{position:absolute;right:-2%;bottom:-4%;height:84%;width:auto;max-width:60%;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.35)}
.thumb .note{position:absolute;left:5%;bottom:8%;z-index:3;background:var(--note);color:var(--ink);font-family:var(--f-hand);font-weight:700;font-size:1.45rem;padding:4px 12px 2px;transform:rotate(-4deg);box-shadow:2px 3px 0 rgba(0,0,0,.35)}
.f-orange{background:var(--orange)} .f-bone{background:var(--bone)} .f-red{background:var(--red)} .f-mustard{background:var(--mustard)}
.f-red .t{color:var(--bone)}
.f-dark{background:var(--ground-2);color:var(--bone)}
.f-dark img{mix-blend-mode:screen;filter:grayscale(1) invert(1) contrast(1.3) sepia(.35)}
.field{position:relative}
.card h3{font-size:1.06rem;font-weight:600;line-height:1.35;margin:0;text-wrap:pretty}
.card .meta{display:flex;gap:10px;align-items:center;color:var(--bone-dim)}

/* systems */
.systems{background:var(--blue);color:var(--bone);position:relative;overflow:hidden;border-block:6px solid var(--ink)}
.systems .shead p{color:var(--bone)}
.feature{background:var(--bone);color:var(--ink);border:2px solid #000;padding:28px clamp(16px,3vw,36px) 36px;position:relative;margin-bottom:28px}
.feature-head{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;align-items:baseline}
.feature h3{font-size:clamp(2.2rem,4.6vw,3.6rem);margin:0}
.flow-scroll{overflow-x:auto;margin-top:26px;padding-bottom:6px}
.flow{display:flex;align-items:stretch;gap:0;min-width:900px;position:relative;padding-top:64px}
.step{flex:1;min-width:0;border:2px solid var(--ink);padding:12px 12px 14px;background:var(--bone);position:relative}
.step + .step{margin-left:26px}
.step + .step::before{content:"";position:absolute;left:-26px;top:50%;width:26px;border-top:2px solid var(--ink)}
.step + .step::after{content:"";position:absolute;left:-9px;top:calc(50% - 5px);border:5px solid transparent;border-left:7px solid var(--ink)}
.step .who{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;opacity:.75}
.step b{display:block;font-family:var(--f-display);font-stretch:70%;font-weight:800;text-transform:uppercase;font-size:1.25rem;line-height:1}
.step small{display:block;margin-top:6px;font-size:.82rem;line-height:1.35}
.step.gate{background:var(--orange)}
.step.jev{background:var(--mustard)}
.flow .callout{position:absolute;top:0;font-family:var(--f-hand);font-weight:700;font-size:1.6rem;color:var(--red);line-height:1}
.flow .callout svg{display:block;overflow:visible}
.sysgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:22px}
.sys{background:var(--ground);color:var(--bone);border:2px solid #000;display:flex;flex-direction:column;text-decoration:none;min-width:0}
.sys .pic{position:relative;aspect-ratio:16/10;background:var(--bone);overflow:hidden;border-bottom:2px solid #000}
.sys .pic img{position:absolute;inset:8% 0 0;margin:auto;height:92%;width:100%;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.35)}
.sys .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.sys h4{font-family:var(--f-display);font-stretch:66%;font-weight:900;text-transform:uppercase;font-size:1.9rem;line-height:.95;margin:0}
.sys p{margin:0;color:var(--bone-dim);font-size:.95rem}
.sys .chain{margin-top:auto;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em;color:var(--bone);border-top:1px dashed #5a554e;padding-top:10px}

/* thinking + now */
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.quote{background:var(--bone);color:var(--ink);padding:36px clamp(18px,3vw,40px);border:2px solid #000;position:relative}
.quote blockquote{margin:0;font-size:clamp(2.6rem,5.4vw,4.6rem)}
.quote p{max-width:52ch;margin:20px 0 0}
.quote .note{position:absolute;right:18px;top:-18px;background:var(--note);font-family:var(--f-hand);font-weight:700;font-size:1.5rem;padding:4px 12px;transform:rotate(5deg);box-shadow:2px 3px 0 rgba(0,0,0,.35)}
.now{border:2px solid var(--bone);padding:24px}
.now h3{font-size:3rem;margin:0 0 4px}
.now dl{margin:18px 0 0;display:grid;gap:16px}
.now dt{color:var(--orange)}
.now dd{margin:4px 0 0}

/* contact */
.contact{background:var(--red);color:var(--bone);border-top:6px solid var(--ink);position:relative;overflow:hidden}
.contact .wrap{padding-block:64px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.contact h2{font-size:clamp(3.4rem,9vw,7.4rem);margin:0}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bone);text-decoration:none;padding:14px 20px;font-family:var(--f-mono);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink)}
.btn:hover{background:var(--bone);color:var(--ink)}

/* style tile */
.tile{border-top:1px solid #000;background:var(--ink)}
.tile .wrap{padding-block:64px}
.tilegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.panel{border:1px solid #3a3733;padding:20px;min-width:0}
.panel > .mono{color:var(--bone-dim);display:block;margin-bottom:14px}
.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sw{aspect-ratio:1;border:1px solid #000;display:flex;flex-direction:column;justify-content:flex-end;padding:6px;font-family:var(--f-mono);font-size:.62rem;line-height:1.3}
.sw.dk{color:var(--bone)} .sw.lt{color:var(--ink)}
.spec + .spec{margin-top:16px}
.spec .mono{color:var(--bone-dim);font-size:.66rem}
.bits{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.sticky{background:var(--note);color:var(--ink);font-family:var(--f-hand);font-weight:700;font-size:1.5rem;padding:4px 12px 2px;transform:rotate(-4deg);box-shadow:2px 3px 0 rgba(0,0,0,.35)}
.tape{background:var(--bone);color:var(--ink);font-family:var(--f-display);font-stretch:70%;font-weight:800;text-transform:uppercase;padding:2px 10px;transform:rotate(1.5deg)}
.rules{margin:0;padding-left:18px;color:var(--bone-dim)}
.rules li + li{margin-top:6px}
.rules b{color:var(--bone);font-weight:600}

footer{padding-block:28px;color:var(--bone-dim)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* dust pass: faded ink, slight misregistration, things not quite square */
:root{--misreg:rgba(200,55,43,.30)}
.disp{text-shadow:1.6px 1.1px 0 var(--misreg)}
.f-red .disp,.contact .disp{--misreg:rgba(14,13,12,.28)}
.field::after,.feature::after,.quote::after,.sys .pic::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;mix-blend-mode:screen;opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .91 0 0 0 0 .86 0 0 0 0 .77 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E")}
.dust{position:fixed;inset:0;pointer-events:none;z-index:49;opacity:.55;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='1' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .88 0 0 0 0 .78 0 0 0 9 -7.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E")}
.thumb img,.sys .pic img,.hero .art img{opacity:.9}
.thumb,.sys,.feature,.quote,.step{border-color:rgba(14,13,12,.82)}
.grid .card:nth-child(3n+1) .thumb{transform:rotate(-.45deg)}
.grid .card:nth-child(3n+2) .thumb{transform:rotate(.3deg) translateY(2px)}
.grid .card:nth-child(3n) .thumb{transform:rotate(.55deg)}
.grid .card:hover .thumb{transform:rotate(-1.2deg) scale(1.02)}
.sys:nth-child(odd){transform:rotate(.4deg)} .sys:nth-child(even){transform:rotate(-.3deg)}
.flow .step:nth-child(odd of .step){transform:rotate(-.6deg)} .flow .step:nth-child(even of .step){transform:rotate(.4deg) translateY(2px)}
.feature{transform:rotate(-.15deg)}
.quote{transform:rotate(.35deg)}
.wordmark{transform:rotate(-.6deg)}
.tag{transform:rotate(-1deg)}
.shead h2{transform:translateX(-2px) rotate(-.4deg)}

/* motion: paper cutout agents hop step to step, tilting a little differently on every landing */
.flow{padding-bottom:96px}
.agent{position:absolute;left:0;bottom:6px;width:74px;display:flex;flex-direction:column;align-items:center;z-index:5;
  transition:transform .55s cubic-bezier(.5,0,.3,1);will-change:transform}
.agent .paper{display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;transition:rotate .5s ease}
.agent.hop .paper{animation:hop .55s cubic-bezier(.3,0,.3,1)}
.agent svg{width:40px;height:46px;display:block;filter:drop-shadow(2px 3px 0 rgba(14,13,12,.4))}
.agent .name{margin-top:2px;background:var(--bone);color:var(--ink);border:1.5px solid var(--ink);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;white-space:nowrap;
  clip-path:polygon(0 8%,12% 0,30% 6%,52% 0,74% 7%,100% 0,97% 52%,100% 100%,78% 93%,55% 100%,33% 94%,10% 100%,0 88%,3% 46%);box-shadow:2px 3px 0 rgba(14,13,12,.4)}
.agent svg .body{fill:var(--blue)}
.agent.human svg .body{fill:var(--orange)}
.agent.jev svg .body{fill:var(--mustard)}
@keyframes hop{0%{transform:translateY(0)}45%{transform:translateY(-22px)}100%{transform:translateY(0)}}
.step.on{box-shadow:0 0 0 3px var(--ink) inset}
.sys .pic img{animation:drift 7s ease-in-out infinite alternate}
.sys:nth-child(2n) .pic img{animation-duration:8.5s;animation-delay:-3s}
@keyframes drift{from{transform:translate(-3px,2px) rotate(-1.2deg)}to{transform:translate(3px,-3px) rotate(1.4deg)}}
.track{position:relative;height:30px;margin-top:4px;border-bottom:1px dashed #5a554e}
.track i{position:absolute;left:0;bottom:3px;width:16px;height:20px;background:var(--bone);border:1.5px solid var(--ink);box-shadow:1.5px 2px 0 rgba(0,0,0,.45);
  clip-path:polygon(50% 0,100% 30%,88% 100%,12% 100%,0 30%);animation:walk 6s infinite}
.sys:nth-child(2) .track i{animation-delay:-1.4s} .sys:nth-child(3) .track i{animation-delay:-2.8s} .sys:nth-child(4) .track i{animation-delay:-.7s} .sys:nth-child(5) .track i{animation-delay:-3.9s}
@keyframes walk{
  0%,14%{left:0;transform:rotate(-7deg)}
  20%,34%{left:calc(25% - 8px);transform:rotate(5deg) translateY(-1px)}
  40%,54%{left:calc(50% - 8px);transform:rotate(-3deg)}
  60%,74%{left:calc(75% - 8px);transform:rotate(8deg) translateY(-1px)}
  80%,94%{left:calc(100% - 16px);transform:rotate(-5deg)}
  100%{left:0;transform:rotate(-7deg);opacity:0}}
.hero .art img{animation:bob 6s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(6px) rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.agent,.agent .paper,.sys .pic img,.track i,.hero .art img{animation:none!important;transition:none!important}}

/* paper cutouts: printed objects cut out of bone paper, hard shadow, a little crooked */
:root{--cut-shadow:drop-shadow(3px 5px 0 rgba(14,13,12,.4))}
.hero .art img,.thumb img,.f-dark img,.sys .pic img{mix-blend-mode:normal;filter:var(--cut-shadow);opacity:1}
.thumb img{height:80%;bottom:6%;right:3%}
.grid .card:nth-child(4n+1) .thumb img{rotate:-6deg} .grid .card:nth-child(4n+2) .thumb img{rotate:4deg}
.grid .card:nth-child(4n+3) .thumb img{rotate:-2deg} .grid .card:nth-child(4n) .thumb img{rotate:7deg}
.grid .card .thumb img{transition:rotate .25s ease,translate .25s ease}
.grid .card:hover .thumb img{rotate:-9deg;translate:-4px -6px}
.sys .pic img{height:80%;inset:10% 0 0}
.hero .art img{width:86%;height:86%;margin:7%}
.adds{filter:drop-shadow(2px 3px 0 rgba(14,13,12,.35))}
.hero .adds s{background:#ECE4D2;padding:2px 10px 0;clip-path:polygon(0 6%,18% 0,40% 5%,63% 0,86% 6%,100% 0,98% 50%,100% 96%,80% 100%,58% 94%,35% 100%,12% 95%,0 100%,2% 48%)}
.hero .adds s:nth-child(1){rotate:-2deg} .hero .adds s:nth-child(2){rotate:1.5deg} .hero .adds s:nth-child(3){rotate:-1deg} .hero .adds s:nth-child(4){rotate:2.5deg}
.cutline{position:relative;height:0;border-top:2px dashed rgba(14,13,12,.5);margin:4px 0 26px;max-width:620px}
.snip{position:absolute;top:-26px;left:0;width:52px;rotate:90deg;filter:var(--cut-shadow);animation:snip 8s infinite}
@keyframes snip{
  0%,10%{left:-2%;transform:rotate(-8deg)}
  18%,28%{left:22%;transform:rotate(6deg)}
  36%,46%{left:46%;transform:rotate(-4deg)}
  54%,64%{left:70%;transform:rotate(9deg)}
  72%,90%{left:92%;transform:rotate(-5deg)}
  96%{left:92%;opacity:0} 100%{left:-2%;opacity:0}}
.flow{padding-bottom:130px}
.agent .carry{width:64px;margin-bottom:-8px;rotate:-10deg;filter:drop-shadow(2px 3px 0 rgba(14,13,12,.4));position:relative;z-index:1}
.quote .eraser{position:absolute;right:-14px;bottom:-30px;width:118px;rotate:16deg;filter:var(--cut-shadow);z-index:5;animation:rub 3.2s ease-in-out infinite alternate}
@keyframes rub{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.snip,.quote .eraser{animation:none!important}}

@media (max-width:820px){
  .hero .wrap,.split{grid-template-columns:1fr}
  .hero .art{max-width:420px;justify-self:center;width:100%}
}
@media (prefers-reduced-motion:reduce){.thumb{transition:none}.card:hover .thumb{transform:none}}

/* phone pass: nothing pokes sideways, text stays readable, taps land */
body{overflow-x:clip}
@media (max-width:640px){
  nav.top{position:static}
  nav.top .wrap{padding-block:8px}
  nav.top ul{gap:0 4px}
  nav.top ul a{display:inline-block;padding:10px 8px}
  nav.top ul li:first-child a{padding-left:0}
  .step .who{font-size:.74rem}
  .tag{font-size:.74rem}
  .btn{padding:14px 18px}
}