/* Steps preview: picture buttons for the industry picker and a five-step panel that always shows its own picture and text. */
.pic{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#000}
.pic img{display:block;width:100%;height:100%;object-fit:cover}
.pic-label{position:absolute;right:8px;bottom:6px;z-index:2;color:rgba(255,255,255,.72);background:rgba(0,0,0,.28);font-size:10.5px;line-height:1.2;font-weight:400;letter-spacing:.01em;padding:1px 5px;border-radius:3px;pointer-events:none}
/* industry picker */
#site-type .ip2-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:0 auto var(--s5);padding:0}
.ip2-tab{display:flex;flex-direction:column;align-items:stretch;padding:0;font:inherit;color:#fff;text-align:left;background:var(--dark3);border:3px solid rgba(255,255,255,.18);border-radius:12px;overflow:hidden;cursor:pointer}
.ip2-tab .pic{border-radius:0}
.ip2-name{display:flex;align-items:center;min-height:56px;padding:var(--s1) var(--s2);font-size:1.125rem;font-weight:700;line-height:1.25}
.ip2-tab:hover{border-color:var(--yellow)}
.ip2-tab[aria-selected="true"]{border-color:var(--yellow);background:var(--yellow);color:#0D0D0D}
.ip2-tab:focus-visible,.sx2-tab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ip2-nojs .ip2-tab{cursor:default}
.ip2-pane{display:block;max-width:980px;margin:0 auto}
.ip2-pane .ip-risks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.ip2-pane .ip-copy h3{margin-top:0}
.ip2-pane .ip-copy h3:not(:first-child){margin-top:var(--s4)}
.ip2-nojs .ip2-pane{margin-bottom:var(--s5)}
@media(max-width:900px){.ip2-pane .ip-risks{grid-template-columns:1fr}}
@media(max-width:700px){#site-type .ip2-tabs{grid-template-columns:1fr;gap:var(--s2)}}
/* five steps */
.sx2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:start}
.sx2-tabs{display:flex;flex-direction:column;gap:var(--s1);margin:0;padding:0;list-style:none}
.sx2-tab{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:64px;padding:var(--s1) var(--s2);text-align:left;font:inherit;font-size:1.0625rem;font-weight:700;color:#fff;background:var(--dark3);border:2px solid rgba(255,255,255,.18);border-radius:8px;cursor:pointer}
.sx2-tab:hover{border-color:var(--yellow)}
.sx2-tab[aria-selected="true"]{background:var(--yellow);color:#0D0D0D;border-color:var(--yellow)}
.sx2-num{flex:0 0 40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;background:rgba(255,255,255,.12);color:#fff}
.sx2-tab[aria-selected="true"] .sx2-num{background:#0D0D0D;color:var(--yellow)}
.sx2-lab small{display:block;font-size:.9375rem;font-weight:500;opacity:.92}
.sx2-panel{background:var(--dark3);border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden}
.sx2-pic{border-radius:0}
.sx2-text{padding:var(--s3)}
.sx2-text h3{font-size:1.375rem;color:#fff;margin:0 0 var(--s1)}
.sx2-text p{margin:0;color:var(--text)}
.sx2-text .btn{margin-top:var(--s3)}
/* with script: all panes share one cell so the panel never changes height; only the chosen one is visible */
.sx2:not(.sx2-nojs) .sx2-panel{display:grid}
.sx2:not(.sx2-nojs) .sx2-pane{grid-area:1/1;visibility:hidden}
.sx2:not(.sx2-nojs) .sx2-pane.is-on{visibility:visible}
/* without script every step is a readable block */
.sx2-nojs .sx2-tabs{display:none}
.sx2-nojs .sx2-pane+.sx2-pane{border-top:1px solid rgba(255,255,255,.14)}
@media(max-width:900px){.sx2{grid-template-columns:1fr;gap:var(--s3)}
 .sx2-tab{min-height:52px}.sx2-lab small{display:inline;margin-left:8px}.sx2-text .btn{width:100%}}
@media(max-width:480px){.sx2-lab small{display:none}.sx2-text{padding:var(--s2)}}
#assessment{scroll-margin-top:96px}
.hero-hint:empty{display:none}

.ip2-pane[hidden],.sx2-pane[hidden]{display:none!important}
.sx2:not(.sx2-nojs) .sx2-pane[hidden]{display:block!important}

.pic-label-card{right:8px;top:8px;bottom:auto}
.split-img{position:relative}
.ip2-extra{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:0 0 var(--s4)}
.pic43{aspect-ratio:4/3;margin:0}
@media(max-width:480px){.ip2-extra{gap:var(--s1)}}