/* Discord bot hosting page (pages/discord-bot-hosting.html). The panels, tiles,
   headings and plan picker come from main.css and chapter.css; this file adds
   the page's hero and its previews of the dashboard. The previews take their
   colours and sizes from nextclient's own styles (Sidebar, console, modules,
   git, subdomains, settings and monitor), so they read as the real panel. */

.brand-icon {
    flex: none;
    width: 1em;
    height: 1em;
}

/* Hero: the headline over a browser showing the console */
.bh-hero {
    overflow: hidden;
    padding-bottom: 0;
}

.bh-hero-text {
    max-width: 980px;
    margin: 0 auto;
    padding-top: 24px;
    text-align: center;
}

.bh-title {
    margin: 28px 0 0;
    font-size: clamp(2.75rem, 5.4vw, 5.25rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #fff;
    text-wrap: balance;
}

.bh-lead {
    max-width: 640px;
    margin: 24px auto 0;
    font-size: 1.25rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.bh-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

.bh-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 14px;
    margin-top: 32px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
}

/* The rating above the trust cards, set like the hero's proof line */
.bh-rating {
    margin: 32px 0 24px;
}

.bh-proof strong {
    font-weight: 600;
    color: #fff;
}

.bh-proof-icon {
    color: #60a5fa;
}

.bh-shot {
    position: relative;
    max-width: 1180px;
    margin: 64px auto 0;
    padding: 0 16px;
}

.bh-glow {
    position: absolute;
    inset: 40px 10% auto;
    height: 420px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.28);
    filter: blur(90px);
    pointer-events: none;
}

/* The browser, as the getting-started section draws it (.fxg-browser) */
.bh-browser {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #0a0a15;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    color: #b4bfd0;
}

.bh-shot .bh-browser {
    border-radius: 10px 10px 0 0;
    box-shadow: 0 40px 100px rgba(3, 7, 18, 0.7);
}

.bh-browser-bar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 14px;
    height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: #1b1c29;
}

.bh-browser-dots {
    flex: none;
    width: 10px;
    height: 10px;
    margin-right: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 16px 0 rgba(255, 255, 255, 0.16), 32px 0 rgba(255, 255, 255, 0.16);
}

.bh-browser-url {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    max-width: 460px;
    height: 26px;
    margin: 0 auto;
    padding: 0 12px;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.7);
}

.bh-browser-url svg {
    flex: none;
    width: 11px;
    height: 11px;
}

.bh-browser-path {
    color: rgba(255, 255, 255, 0.45);
}

/* The panel: its sidebar and a page */
.bh-panel {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    height: 640px;
    overflow: hidden;
}

.bh-side {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0a0a15, #141421);
}

.bh-side-head {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 12px 16px;
}

.bh-side-head img {
    display: block;
    width: auto;
    height: 28px;
}

.bh-side-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

.bh-side-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -1px;
    padding: 9px 16px;
    background: #1b1b26;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.bh-side-sec i {
    font-size: 10px;
    opacity: 0.6;
}

.bh-side-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 14.7px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

.bh-side-item i,
.bh-side-item .brand-icon {
    width: 16px;
    font-size: 15px;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
}

.bh-side-item.is-active {
    background: #1a4a99;
    color: #fff;
}

.bh-side-item.is-active i {
    color: #fff;
}

.bh-main {
    min-width: 0;
    padding: 0 24px 24px;
}

.bh-pagehead {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 0 24px;
}

.bh-crop-pad .bh-pagehead {
    padding: 4px 0 18px;
}

.bh-pagehead-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: #0f162c;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
}

.bh-pagehead-title {
    display: block;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}

.bh-pagehead-sub {
    display: block;
    margin-top: 5px;
    font-size: 14.4px;
    color: rgba(255, 255, 255, 0.6);
}

/* Console box */
.bh-console {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: #141421;
}

.bh-console.is-flat {
    height: 100%;
    border-radius: 0;
}

.bh-console-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    padding: 16px 20px 12px;
}

.bh-console-name {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 17.6px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: #fff;
}

.bh-console-sep {
    margin: 0 8px;
    font-size: 19px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.2);
}

.bh-addr {
    display: inline-flex;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.bh-addr span {
    padding: 5px 10px;
    font-size: 13.6px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
}

.bh-addr em {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    font-size: 12px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.42);
}

.bh-console-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bh-cbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.68);
}

.bh-cbtn i {
    font-size: 12px;
}

.bh-cbtn.is-start {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.bh-cbtn.is-restart {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

.bh-cbtn.is-stop {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.bh-cbtn.is-off {
    opacity: 0.4;
}

.bh-term {
    display: flex;
    flex-direction: column;
    padding: 16px;
    font-family: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, Consolas, monospace;
    font-size: 12.8px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: #e8ecf1;
}

.bh-term > span {
    white-space: pre-wrap;
    word-break: break-word;
}

.bh-term.is-tall {
    padding-bottom: 210px;
}

.bh-term.is-lib {
    min-height: 210px;
}

.bh-falix {
    font-weight: 600;
    color: #0ea5e9;
}

.bh-ok {
    color: #00ff00;
}

.bh-down {
    font-weight: 600;
    color: #ef4444;
}

.bh-dim {
    color: rgba(232, 236, 241, 0.55);
}

.bh-ts {
    font-size: 0.9em;
    color: rgba(209, 213, 219, 0.6);
}

.bh-info {
    color: rgba(165, 180, 252, 0.85);
}

.bh-err {
    color: rgba(248, 113, 113, 0.85);
}

.bh-tag {
    color: #67e8f9;
    opacity: 0.8;
}

.bh-term-input {
    padding: 16px;
}

.bh-term-input > div {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 88px 0 40px;
    border-radius: 8px;
    background: #23232f;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12.8px;
    color: rgba(255, 255, 255, 0.4);
}

.bh-term-input b {
    position: absolute;
    left: 15px;
    font-size: 16px;
    color: #4e97f5;
}

.bh-term-input .is-clock,
.bh-term-input .is-send {
    position: absolute;
    top: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 13px;
}

.bh-term-input .is-clock {
    right: 50px;
    background: rgba(255, 255, 255, 0.04);
    color: #94a0b4;
}

.bh-term-input .is-send {
    right: 10px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.bh-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-height: 42px;
    padding: 0 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.bh-statusbar > span {
    display: flex;
    gap: 4px;
}

.bh-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #c8d0dd;
}

.bh-pill i {
    font-size: 13px;
    opacity: 0.7;
}

.bh-pill small {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.5;
}

.bh-pill img {
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 3px;
    object-fit: cover;
}

.bh-pill.is-online {
    background: rgba(34, 197, 94, 0.1);
    font-weight: 700;
    color: #4ade80;
}

.bh-pill.is-online::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.bh-pill.is-uptime {
    background: rgba(165, 180, 252, 0.08);
    color: #93bbfc;
}

/* Resource charts under the console */
.bh-charts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.bh-chart {
    overflow: hidden;
    border-radius: 12px;
    background: #141421;
}

.bh-chart-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 0;
    font-size: 12.8px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
}

.bh-chart-top small {
    margin-left: auto;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
}

.bh-chart-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.bh-chart-dot.is-blue {
    background: #3b82f6;
}

.bh-chart-dot.is-green {
    background: #10b981;
}

.bh-chart-dot.is-purple {
    background: #8b5cf6;
}

.bh-chart-value {
    padding: 4px 16px 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #fff;
}

.bh-chart-value.is-net {
    font-size: 20px;
}

.bh-chart-value .is-down {
    color: #8b5cf6;
}

.bh-chart-value .is-up {
    color: #ec4899;
}

.bh-chart svg,
.bh-monitor-panel svg {
    display: block;
    width: 100%;
    height: 88px;
}

/* The chat card beside the console */
.bh-chat {
    position: absolute;
    z-index: 2;
    top: 214px;
    right: -6px;
    width: 340px;
    overflow: hidden;
    border-radius: 14px;
    background: #1b1c29;
    box-shadow: 0 30px 70px rgba(3, 7, 18, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
    text-align: left;
}

.bh-chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.bh-chat-head i,
.bh-chat-head .brand-icon {
    color: rgba(255, 255, 255, 0.55);
}

.bh-chat-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
}

.bh-msg {
    display: flex;
    gap: 10px;
}

.bh-msg > div {
    min-width: 0;
}

.bh-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

.bh-avatar.is-amber {
    background: #f5b942;
    color: #0b111b;
}

.bh-avatar.is-blue {
    background: #2563eb;
    color: #fff;
}

.bh-msg-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}

.bh-msg-meta time {
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}

.bh-app-tag {
    padding: 1px 5px;
    border-radius: 4px;
    background: #2563eb;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bh-slash {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(96, 165, 250, 0.16);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12.5px;
    color: #93c5fd;
}

.bh-embed {
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.bh-embed b {
    display: block;
    font-size: 13.5px;
    color: #fff;
}

.bh-embed span {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.68);
}

.bh-chat-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.bh-chat-btns span {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* A crop of a panel page bleeding out of a feature tile, as the features grid does */
.bh-crop {
    position: relative;
    flex: 1 1 auto;
    min-height: 300px;
    margin: 28px -29px -29px 0;
    overflow: hidden;
    border-radius: 12px 0 0 0;
    background: #0a0a15;
    box-shadow: 0 24px 48px rgba(3, 7, 18, 0.5);
    outline: 1px solid rgba(255, 255, 255, 0.1);
    outline-offset: -1px;
    color: #b4bfd0;
}

.bh-crop.is-short {
    min-height: 0;
}

.bh-crop-pad {
    padding: 18px;
}

/* Small coloured icon tiles, as the panel draws them */
.bh-tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
}

.bh-tile.is-blue { background: rgba(59, 130, 246, 0.16); color: #93c5fd; }
.bh-tile.is-green { background: rgba(34, 197, 94, 0.14); color: #86efac; }
.bh-tile.is-amber { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.bh-tile.is-red { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
.bh-tile.is-purple { background: rgba(139, 92, 246, 0.14); color: #c4b5fd; }
.bh-tile.is-sky { background: rgba(14, 165, 233, 0.14); color: #7dd3fc; }
.bh-tile.is-indigo { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }

.bh-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bh-chip.is-ok { background: rgba(34, 197, 94, 0.12); color: #86efac; }
.bh-chip.is-warn { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.bh-chip.is-danger { background: rgba(248, 113, 113, 0.14); color: #f87171; }
.bh-chip.is-blue { background: rgba(59, 130, 246, 0.16); color: #8fc0ff; }
.bh-chip.is-amber { background: rgba(245, 176, 65, 0.14); color: #f9cc85; }

.bh-premium {
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(245, 185, 66, 0.16);
    font-size: 11px;
    font-weight: 600;
    color: #f7cc72;
}

.bh-pbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.bh-pbtn i {
    font-size: 12px;
}

.bh-pbtn.is-primary { background: #1e2a4d; color: #60a5fa; }
.bh-pbtn.is-secondary { background: #2a2a38; color: #edf0f5; }
.bh-pbtn.is-success { background: rgba(0, 210, 122, 0.22); color: #00d27a; }

/* The panel's "Missing dependency" dialog */
.bh-modal {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 18px;
    width: min(350px, 64%);
    padding: 20px 22px;
    border-radius: 20px;
    background: #141421;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.bh-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 600;
    color: #fbbf24;
}

.bh-modal-alert {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.1);
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.bh-modal-alert b {
    display: block;
    color: #fff;
}

.bh-modal-sec {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
}

.bh-modal-sec code {
    font-size: 13px;
    color: #fbbf24;
}

.bh-modal-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.bh-modal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* Felix, as the main page's features tile draws it */
.bh-felix {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 18px;
    background: #141421;
}

.bh-felix-prompt {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.bh-felix-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.bh-felix-row b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.bh-felix-row b + span {
    display: block;
    margin-top: 1px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
}

.bh-felix-row > i {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.bh-felix-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 46px;
    margin-top: 6px;
    padding: 0 7px 0 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.bh-felix-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-size: 12px;
    color: #fff;
}

/* Tabs, rows, inputs and switches from the panel's settings pages */
.bh-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.bh-tabs.is-dark {
    background: #1b1e2a;
}

.bh-tabs span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 13.6px;
    font-weight: 500;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.9);
}

.bh-tabs span i {
    font-size: 12px;
    opacity: 0.8;
}

.bh-tabs span.is-active {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.bh-select,
.bh-input {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 16px;
    overflow: hidden;
    border-radius: 14px;
    background: #23232f;
    font-size: 14.4px;
    white-space: nowrap;
    color: #fff;
}

.bh-select {
    margin-bottom: 10px;
}

.bh-select i {
    margin-left: auto;
    font-size: 11px;
    color: #60a5fa;
}

.bh-input i {
    margin-left: auto;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
}

.bh-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #141421;
}

.bh-row + .bh-row {
    margin-top: 6px;
}

.bh-row .bh-tile {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 16px;
}

.bh-row-text {
    flex: 1;
    min-width: 0;
}

.bh-row-text b {
    display: block;
    font-size: 14.4px;
    font-weight: 600;
    color: #fff;
}

.bh-row-text span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.53);
}

.bh-row-chev {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.bh-switch {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #3b82f6;
}

.bh-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
}

.bh-env {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #141421;
}

.bh-env b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.bh-env b + span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
}

.bh-env .bh-input {
    min-height: 42px;
    border-radius: 12px;
}

.bh-env code,
.bh-input code {
    font-size: 13px;
    color: inherit;
}

/* Monitoring */
.bh-health {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 16px 20px;
    border-radius: 14px;
    background: #191928;
}

.bh-health-dot {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #00d27a;
    box-shadow: 0 0 0 5px rgba(0, 210, 122, 0.18);
}

.bh-health b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #00d27a;
}

.bh-health b + span {
    display: block;
    font-size: 13.4px;
    color: rgba(255, 255, 255, 0.8);
}

.bh-health-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-left: auto;
}

.bh-health-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bh-health-stat .bh-tile {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 12px;
}

.bh-health-stat small {
    display: block;
    font-size: 10.9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.bh-health-stat strong {
    display: block;
    font-size: 15.7px;
    font-weight: 700;
    color: #fff;
}

.bh-monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.bh-monitor-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: #191928;
}

.bh-monitor-panel svg {
    flex: 1;
    min-height: 88px;
}

.bh-monitor-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 4px;
    font-size: 13.8px;
    font-weight: 700;
    color: #fff;
}

.bh-monitor-head small {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

.bh-monitor-list {
    padding: 8px 12px 14px;
}

.bh-event {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.bh-event + .bh-event {
    margin-top: 8px;
}

.bh-event b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
}

.bh-event b + span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.bh-event code {
    padding: 2px 7px;
    border-radius: 5px;
    background: #1f2029;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.8);
}

/* Packages */
.bh-pk-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bh-pk-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 12px;
    background: #1b2333;
}

.bh-pk-stat.is-green {
    background: rgba(34, 197, 94, 0.1);
}

.bh-pk-stat .bh-tile {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 11px;
}

.bh-pk-stat b {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.bh-pk-stat b + span {
    font-size: 11.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.bh-pk-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 8px 8px 8px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.45);
}

.bh-pk-search > span {
    flex: 1;
}

.bh-pk-search em {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13.5px;
    font-style: normal;
    color: #fff;
}

.bh-pk-search em i {
    font-size: 10px;
    color: #60a5fa;
}

.bh-pk-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: #1b2333;
}

.bh-pk-row + .bh-pk-row {
    margin-top: 8px;
}

.bh-pk-row .bh-tile {
    width: 44px;
    height: 44px;
    font-size: 17px;
}

.bh-pk-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15.2px;
    font-weight: 600;
    color: #fff;
}

.bh-pk-ver {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.095);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.bh-pk-good {
    font-size: 12.5px;
    font-weight: 500;
    color: #86efac;
}

.bh-pk-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 5px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.68);
}

.bh-pk-meta i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.bh-pk-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.bh-pk-act.is-delete {
    background: rgba(248, 113, 113, 0.14);
    color: #fca5a5;
}

.bh-pk-task {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

.bh-pk-task b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.bh-pk-task b + span {
    display: block;
    font-size: 12px;
    color: #86efac;
}

/* Git */
.bh-git-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #181a29;
}

.bh-git-glyph {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 20px;
    color: #fff;
}

.bh-git-repo {
    min-width: 0;
    overflow: hidden;
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.74);
}

.bh-git-repo b {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.bh-git-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 12.8px;
    font-weight: 600;
    white-space: nowrap;
    color: #3fe0a8;
}

.bh-git-state::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
}

.bh-git-head .bh-pbtn {
    margin-left: auto;
}

.bh-deploy {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.bh-deploy + .bh-deploy {
    margin-top: 6px;
}

.bh-deploy-main {
    flex: 1;
    min-width: 0;
}

.bh-deploy-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13.1px;
    font-weight: 700;
}

.bh-deploy-top .is-ok {
    color: #3fe0a8;
}

.bh-deploy-top .is-bad {
    color: #ec5b75;
}

.bh-deploy-top code {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.bh-deploy-msg {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    font-size: 13.8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.95);
}

.bh-deploy-meta {
    display: block;
    margin-top: 2px;
    font-size: 12.2px;
    color: rgba(255, 255, 255, 0.6);
}

/* Schedule canvas, drawn as placed nodes */
.bh-canvas {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: #0f0f1b radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 22px 22px;
}

.bh-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 236px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #1b1b29;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 10px 24px rgba(0, 0, 0, 0.35);
}

.bh-node .bh-tile {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 13px;
}

.bh-node small {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.bh-node b {
    display: block;
    font-size: 13.4px;
    font-weight: 600;
    color: #fff;
}

.bh-wire {
    position: absolute;
    border-top: 2px solid rgba(255, 255, 255, 0.25);
}

.bh-wire.is-v {
    border-top: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.25);
}

.bh-wire.is-ok {
    border-color: rgba(74, 222, 128, 0.6);
}

.bh-wire.is-bad {
    border-color: rgba(248, 113, 113, 0.6);
}

.bh-port {
    position: absolute;
}

.bh-canvas-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 6px;
}

/* And the rest */
.bh-more {
    display: grid;
    gap: 24px;
}

.bh-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-tools li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.86);
}

.bh-tools i {
    width: 16px;
    font-size: 15px;
    text-align: center;
    color: #60a5fa;
}

/* Split sections with points beside a preview */
.bh-split {
    align-items: center;
}

.bh-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.bh-points li {
    display: flex;
    gap: 14px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.68);
}

.bh-points li > span:last-child b {
    display: block;
    margin-bottom: 4px;
    font-size: 16.5px;
    font-weight: 600;
    color: #fff;
}

.bh-points .fp-icon-tile {
    flex: none;
    width: 40px;
    height: 40px;
}

/* Templates shelf, as the modpacks tile shows packs */
.bh-shelf {
    display: flex;
    gap: 14px;
    margin: 40px -32px 0 0;
    padding: 0 32px 4px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.bh-pack {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 6px;
    width: 200px;
    padding: 10px;
    border-radius: 14px;
    background: #1b2333;
}

.bh-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background-image: url('/assets/img/chapters/pixels.svg?v=1');
    background-size: 180px;
    font-size: 76px;
    color: #fff;
}

.bh-cover.is-discordjs { background-color: #5865f2; }
.bh-cover.is-typescript { background-color: #3178c6; }
.bh-cover.is-discordpy { background-color: #306998; color: #ffd43b; }
.bh-cover.is-moderation { background-color: #9f1d2a; }
.bh-cover.is-welcome { background-color: #15803d; }
.bh-cover.is-leveling { background-color: #b45309; }
.bh-cover.is-relay { background-color: #24292f; }

.bh-cover-tag {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.bh-pack-name {
    margin: 6px 0 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
}

.bh-pack-by {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

.bh-pack-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
}

.bh-pack-btn:hover {
    color: #fff;
    filter: brightness(1.15);
}

.bh-pack-btn.is-green { background: #176f4e; }
.bh-pack-btn.is-blue { background: #2f5597; }

/* Library picker */
.bh-libs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 48px;
}

.bh-lib-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.bh-lib {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 12px 16px;
    border: 0;
    border-radius: 16px;
    background: rgba(30, 41, 59, 0.6);
    text-align: left;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.bh-lib:hover {
    background: rgba(30, 41, 59, 0.95);
}

.bh-lib.active {
    background: rgba(37, 99, 235, 0.16);
    box-shadow: inset 0 0 0 1.5px rgba(96, 165, 250, 0.6);
}

.bh-lib b {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
}

.bh-lib small {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.58);
}

.bh-lib-logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--logo) 14%, transparent);
    font-size: 24px;
    color: var(--logo);
}

.bh-lib-console {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.bh-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bh-facts div {
    padding: 16px 20px;
}

.bh-facts div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.bh-facts dt {
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.58);
}

.bh-facts dd {
    margin: 4px 0 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
}

.bh-tip {
    display: flex;
    gap: 10px;
    margin: 0 20px 20px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(96, 165, 250, 0.08);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.84);
}

.bh-tip i {
    margin-top: 3px;
    color: #60a5fa;
}

/* Network › Internal network */
.bh-net {
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.bh-net-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 20px;
    background: rgba(59, 130, 246, 0.08);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.bh-net-strip b {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.8px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #3b82f6;
}

.bh-net-lines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 16px 20px;
}

.bh-net-line {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bh-net-line code {
    display: block;
    font-size: 13.5px;
    color: #fff;
}

.bh-net-line code + span {
    display: block;
    margin-top: 2px;
    font-size: 12.8px;
    color: rgba(255, 255, 255, 0.72);
}

.bh-net-label {
    margin: 16px 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
}

.bh-net-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Pricing additions to the game plan picker */
.bh-includes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px 24px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.bh-includes li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.86);
}

.bh-includes i {
    color: #60a5fa;
}

.bh-free {
    display: grid;
    gap: 24px;
    margin-top: 28px;
    align-items: center;
}

.bh-free .fp-title {
    margin-top: 10px;
}

.bh-free-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.bh-free-specs div {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.bh-free-specs dt {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

.bh-free-specs dd {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.bh-free-end {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bh-timer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: #141421;
}

.bh-timer .bh-pill {
    align-self: flex-start;
}

.bh-meter {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.bh-meter span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: 999px;
    background: #3bd671;
}

.bh-cta {
    text-align: center;
}

.bh-cta .fp-heading,
.bh-cta .fp-intro {
    margin-inline: auto;
}

@media (min-width: 992px) {
    .bh-more {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        align-items: center;
    }

    .bh-libs {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .bh-free {
        grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    }
}

@media (max-width: 1099.98px) {
    .bh-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-side {
        display: none;
    }

    .bh-chat {
        top: auto;
        right: 16px;
        bottom: 24px;
    }
}

@media (max-width: 767.98px) {
    .bh-hero-text {
        padding-top: 0;
    }

    .bh-lead {
        font-size: 1.05rem;
    }

    .bh-proof {
        flex-direction: column;
        gap: 6px;
        font-size: 14px;
    }

    .bh-proof .hh-dot {
        display: none;
    }

    .bh-shot {
        margin-top: 40px;
        padding: 0;
    }

    .bh-panel {
        height: 520px;
    }

    .bh-main {
        padding: 0 12px 12px;
    }

    .bh-charts {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-console-actions .bh-cbtn span {
        display: none;
    }

    .bh-chat {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        margin: -120px 12px 0;
    }

    .bh-crop {
        margin-right: -23px;
        margin-bottom: -23px;
    }

    /* The missing-dependency card sits under the log instead of over it */
    .bh-console.is-flat {
        height: auto;
    }

    .bh-term.is-tall {
        padding-bottom: 16px;
    }

    .bh-modal {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        margin: 0 12px 12px;
    }

    .bh-git-head {
        flex-wrap: wrap;
    }

    /* The schedule canvas becomes a column; its inline positions only apply
       while the nodes are positioned */
    .bh-canvas {
        isolation: isolate;
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: auto;
        padding: 60px 14px 14px;
    }

    .bh-canvas::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 86px;
        bottom: 40px;
        left: 41px;
        border-left: 2px solid rgba(255, 255, 255, 0.25);
    }

    .bh-wire,
    .bh-port {
        display: none;
    }

    .bh-node {
        position: static;
        width: auto;
    }

    .bh-env {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bh-env .bh-input {
        grid-column: 1 / -1;
    }

    .bh-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-facts div + div {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .bh-health-stats {
        margin-left: 0;
    }

    .bh-free-specs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}