/* Hosting page: two option cards and a picture of where the data goes.
   Builds on ui.css (tokens, .u-card, .u-chip, .u-checks, .ac-close). */
.h-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.h-option{display:flex;flex-direction:column;gap:10px}
.h-option .u-h3{margin:4px 0 0}
.h-option .u-muted{margin:0}
.h-option .u-chip{align-self:flex-start}
.h-option .h-soon{background:#1c3a52;color:var(--u-soft)}
.h-option .h-now{background:#10301f;color:#6fe0ab}
.h-option ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--u-soft);font-size:15px}
.h-option li{display:flex;gap:10px;align-items:baseline}
.h-option li:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--u-blue);transform:translateY(-2px)}
.h-option .u-more{margin-top:auto;padding-top:10px}

/* where the data goes */
.h-map{margin-top:28px;display:grid;gap:12px;font-size:14px;line-height:1.4}
.h-env{padding:16px;border:1px dashed #2f5068;border-radius:14px;display:grid;gap:10px}
.h-env>span{color:var(--u-faint);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.h-box{padding:12px 14px;border:1px solid var(--u-line2);border-radius:10px;background:var(--u-card)}
.h-box b{display:block;color:var(--u-text)}
.h-box span{color:var(--u-muted)}
.h-arrow{color:var(--u-blue2);font-size:13px;text-align:center}
.h-us{display:flex;justify-content:space-between;gap:12px;align-items:center;border-style:dashed;background:transparent;color:var(--u-faint)}
.h-us b{color:var(--u-faint)}
.h-us em{font-style:normal;font-weight:700;color:#6fe0ab;white-space:nowrap}
.u-section.h-first{padding-top:56px}
@media(max-width:760px){.u-section.h-first{padding-top:40px}}