/* Home — "fix this website" game */
.fx-stage{padding:16px;background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(18,17,38,.035) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(18,17,38,.035) 23px 24px),var(--paper)}
.site{position:relative;background:#fff;border-radius:12px;box-shadow:0 18px 36px -24px rgba(18,17,38,.5),0 0 0 1px var(--line);padding:14px 16px 12px;overflow:hidden;font-family:var(--body)}
.f{position:relative;cursor:crosshair;border-radius:8px;transition:all .55s var(--ease)}
.playing .f:not(.fixed):hover{outline:2px dashed rgba(200,67,47,.45);outline-offset:3px}
.f.fixed{cursor:default}
.f.fixed:after{content:"✓";position:absolute;right:-6px;top:-8px;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font:700 11px/18px var(--body);text-align:center;animation:okIn .45s var(--ease)}
@keyframes okIn{from{transform:scale(0)}}
.f.hint{animation:hintP 1s 2}
@keyframes hintP{50%{box-shadow:0 0 0 6px rgba(242,140,27,.45)}}
.good-t{display:none}.fixed .bad-t{display:none}.fixed .good-t{display:inline}
/* nav */
.s-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.s-logo{font:800 17px "Comic Sans MS","Comic Neue",cursive;color:#c0a;filter:blur(1.6px);letter-spacing:.06em;padding:2px 4px}
.s-logo.fixed{font:650 18px var(--display);color:#6b3a12;filter:none;letter-spacing:-.03em}
.s-links{display:flex;gap:6px;font-size:11px}
.s-links i{font-style:normal;padding:3px 4px;color:#555}
.s-links i:nth-child(1){transform:rotate(-7deg) translateY(4px)}
.s-links i:nth-child(2){transform:translateY(-5px);font-size:14px}
.s-links i:nth-child(3){transform:rotate(9deg);color:#f0f}
.s-links i:nth-child(4){transform:translate(-10px,6px)}
.s-links.fixed i{transform:none;font-size:11px;color:var(--ink-2)}
/* hero */
.s-hero{display:grid;gap:8px;margin-bottom:12px}
.s-h{font:400 23px/1.1 "Comic Sans MS","Comic Neue",cursive;color:#d9d9d9;margin:0;padding:2px 4px}
.s-h.fixed{font:620 25px/1.05 var(--display);color:#2a160a;letter-spacing:-.03em}
.s-p{font-size:8.5px;line-height:1.25;color:#999;margin:0;text-align:justify;padding:2px 4px}
.s-p.fixed{font-size:13.5px;line-height:1.5;color:var(--ink-2);text-align:left}
.s-cta{justify-self:start;font-size:9px;color:#00e;text-decoration:underline;padding:2px 4px}
.s-cta.fixed{font:600 13px var(--body);color:#fff;background:#b8541a;text-decoration:none;padding:9px 16px;border-radius:999px}
/* image */
.s-img{height:74px;border:1px dashed #bbb;display:grid;place-items:center;font:500 11px var(--mono);color:#b33;margin-bottom:12px;background:#fafafa}
.s-img.fixed{border-color:transparent;background:radial-gradient(circle at 30% 60%,#f0c98f 0 18%,transparent 19%),radial-gradient(circle at 62% 45%,#e1a866 0 22%,transparent 23%),radial-gradient(circle at 82% 65%,#c9844a 0 14%,transparent 15%),linear-gradient(120deg,#fbefdc,#f3dcc0);height:86px}
/* cards */
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.s-cards i{font-style:normal;font-size:11px;font-weight:600;padding:16px 8px;border-radius:8px;background:#f6efe7;color:#6b3a12;text-align:center;transition:transform .55s var(--ease)}
.s-cards i:nth-child(2){transform:translate(14px,16px)}
.s-cards i:nth-child(3){transform:translateY(-8px) scale(.85)}
.s-cards.fixed i{transform:none}
/* footer */
.s-foot{font-size:9.5px;color:#bbb;padding:6px 4px;border-top:1px solid var(--line)}
.s-foot.fixed{font-size:12px;color:#6b3a12;font-weight:600}
/* popup */
.s-popup{position:absolute;left:12%;right:12%;top:38%;background:#ff0;color:#f00;font:800 14px Impact,"Arial Black",sans-serif;text-align:center;padding:18px 10px;box-shadow:0 10px 30px rgba(0,0,0,.35);border:3px solid #f00;transform:rotate(-2deg);z-index:3}
.s-popup b{position:absolute;right:8px;top:2px;font-size:16px}
.s-popup.fixed{opacity:0;transform:translateY(30px) scale(.8) rotate(4deg);pointer-events:none}
.s-popup.fixed:after{display:none}
.site.miss{animation:shx .35s}
.site.done{box-shadow:0 0 0 2px var(--green),0 18px 36px -24px rgba(18,17,38,.5)}

/* industries drag strip */
.ind-strip{display:flex;gap:16px;overflow-x:auto;padding:0 max(var(--gut),(100vw - var(--max))/2) 8px;scroll-snap-type:x proximity;cursor:grab;scrollbar-width:none;-webkit-user-select:none;user-select:none}
.ind-strip::-webkit-scrollbar{display:none}
.ind-strip.drag{cursor:grabbing;scroll-snap-type:none}
.ind{flex:none;width:clamp(240px,24vw,320px);scroll-snap-align:start}
.ind img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);margin-bottom:16px;transition:transform .7s var(--ease),filter .5s;filter:saturate(.85);pointer-events:none}
.ind:hover img{transform:scale(.98);filter:saturate(1.05)}
.ind .mono{color:var(--mute)}
.ind h3{margin:6px 0 6px}
.ind p{font-size:14px;color:var(--ink-2);margin:0}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.card.art{min-height:280px;display:flex;flex-direction:column}
.card.art p{margin-top:auto}
.card.art h3{margin-bottom:24px}
@media(max-width:1080px){.faq-grid{grid-template-columns:1fr;gap:24px}}
@media(max-width:560px){.fx-stage{padding:10px}.site{padding:12px}.s-h{font-size:20px}.s-h.fixed{font-size:21px}}
