/* The industry pages (everythingis9.xyz/websites): on top of /apps/apps.css, the same Everything Is 9 look. Phone first. */
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ac);color:#1a1200;padding:10px 14px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.tiny{font-size:.8rem;color:var(--fg2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hero h1{max-width:48rem;text-wrap:balance}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.facts li{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);color:var(--fg);font-size:.9rem}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac)}
.hero .row{margin-top:20px}

/* the demo: a computer and a phone side by side, both linking to the live demo */
.demo{margin:0}
.frames{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:end}
.frames a{display:block;color:inherit;text-decoration:none}
.frames img{display:block;width:100%;height:auto;background:#141210}
.desk{border-radius:14px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.desk .bar{display:flex;gap:6px;align-items:center;height:26px;padding:0 12px;background:#1b1813;border-bottom:1px solid var(--line)}
.desk .bar i{width:9px;height:9px;border-radius:50%;background:#3b352a}
.phone{width:min(46%,230px);justify-self:center;border-radius:30px;overflow:hidden;border:6px solid #1e1b15;outline:1px solid var(--line2);box-shadow:0 30px 60px -24px rgba(0,0,0,.85)}
@media(min-width:760px){.frames{grid-template-columns:1fr}.phone{position:absolute;right:-8px;bottom:-26px;width:min(27%,250px)}.demo{padding-bottom:30px}}
@media(max-width:759px){.frames .desk{display:none}.phone{width:min(78%,300px)}}
.demo figcaption{margin-top:18px;color:var(--fg2);font-size:.92rem;max-width:44rem}
.demo figcaption b{color:var(--fg);font-weight:600}
.desk:hover,.phone:hover{outline-color:var(--ac)}
.desk:focus-visible,.phone:focus-visible{outline:2px solid var(--ac);outline-offset:3px}

/* every trade's demo (home services) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin:16px 0 0;padding:0;list-style:none}
.tiles a{display:grid;gap:8px;color:var(--fg);text-decoration:none;font-weight:600;font-size:.92rem}
.tiles img{width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:16px;border:1px solid var(--line2);background:#141210}
.tiles a:hover img{border-color:var(--ac)}

/* what's on it, how it works, questions */
.feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:14px;margin:14px 0 0;padding:0;list-style:none}
.feats .card{gap:6px;align-content:start}
.feats p{margin:0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:14px;margin:14px 0 0;padding:0;list-style:none;counter-reset:st}
.steps li{counter-increment:st;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--raised)}
.steps li::before{content:counter(st);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ac);color:#1a1200;font:700 .95rem var(--body)}
.steps span{color:var(--fg2)}
.faq{display:grid;max-width:48rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-weight:600;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ac);font:400 1.4rem/1 var(--body)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 0 16px;color:var(--fg2);max-width:42rem}

/* the hub: one card per trade */
.inds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:14px;margin:14px 0 0;padding:0;list-style:none}
.ind{display:grid;gap:6px;align-content:start;height:100%;padding:12px 12px 16px;border-radius:18px;border:1px solid var(--line);background:var(--raised);color:var(--fg);text-decoration:none}
.ind img{width:100%;height:220px;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--line);margin-bottom:6px;background:#141210}
.ind b{font:500 1.2rem/1.2 var(--display)}
.ind .k{margin:0}
.ind .go{color:var(--ac);font-weight:600;font-size:.92rem;margin-top:4px}
.ind:hover{border-color:var(--line2)}
.ind:hover .go{color:var(--hi)}

/* the request form */
.start{margin:30px 0 10px;scroll-margin-top:72px}
.start .req{display:grid;gap:12px}
.start textarea{min-height:96px}
.start .msg{min-height:1.4em}
.start .msg a{color:var(--hi)}