/* home-ui.css: the signed-out look, layered over main.css on base_index pages (html.hm).
   Design layer only: no markup, heading, link or copy changes. main.css keeps the legacy
   homepage rules (many with !important), so this file out-specifies them by the html.hm
   prefix and repeats !important only where the legacy rule carries it.

   Dark from the plan cards down (PB, 2026-09-27: "we are going towards dark mode"; white
   cards and an off-white page read as "milk"). The artwork stays: the hands hero at its old
   crop, PB's scenes tinted under the video row, in the trust card and under the testimonials.
   The plan cards keep their white bodies on purpose, they are the one light object. */

/* Tokens, base type, nav, footer, the plan cards and the testimonials: static/css/site-dark.css
   (shared with every public page). This file holds the homepage's own sections. */

/* ---- hero ---- */
html.hm .page-main.home-page { margin-top: -102px; padding-top: 100px; }
/* The artwork keeps the old crop (main.css: 2260 px box, cover), so the hands and the figures in
   the fog stay big and visible (PB, 2026-09-27: "the old bg is better ... sinister look"). The
   overlay takes the edge off the top for the title and, right under the cards, fades the
   artwork into the dark page: its lower part is white fog, which is the milk PB does not want. */
html.hm .page-main.home-page:before { background-position: center top; }
html.hm .page-main.home-page:after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 2260px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(27, 24, 22, 0.30) 0px, rgba(27, 24, 22, 0.16) 500px, rgba(27, 24, 22, 0) 860px, rgba(27, 24, 22, 0) 980px, var(--hm-ink) 1210px);
}
html.hm .page-main.home-page .page-header {
    padding: 56px 0 24px;
    max-width: 860px;
    margin: 0 auto;
}
html.hm .page-main.home-page .page-header h1 {
    font-size: 46px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    color: var(--hm-on-dark-strong) !important;
    background: none !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 2px 28px rgba(0, 0, 0, 0.45) !important;
    margin-bottom: 14px !important;
}
html.hm .page-main.home-page .page-header h1 + br { display: none; }
html.hm .page-main.home-page .page-header h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: #ff5b60 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    margin-bottom: 18px !important;
}
html.hm .page-main.home-page .page-header p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: var(--hm-on-dark-strong) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 16px rgba(0, 0, 0, 0.5) !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}
html.hm .after-banner-text { margin: 22px 0 0; }
html.hm .after-banner-text strong {
    display: inline-block;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--hm-on-dark-strong);
    background: rgba(27, 24, 22, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 8px 18px;
}

/* ---- generic cards, tables, buttons on the page (the crossplay card among them) ---- */
html.hm .home-page .card.shadow-sm {
    border: 1px solid var(--hm-line) !important;
    border-radius: var(--hm-radius);
    box-shadow: var(--hm-shadow) !important;
    background: var(--hm-card);
    color: var(--hm-text);
}
html.hm .home-page .card .h4, html.hm .home-page .card h2.h4 { font-size: 22px; font-weight: 700; color: var(--hm-text) !important; }
html.hm .home-page .card.shadow-sm p, html.hm .home-page .card.shadow-sm li { color: var(--hm-text); }
html.hm .home-page .text-uppercase.text-muted.small { letter-spacing: 0.12em; font-size: 11px; font-weight: 700; color: var(--hm-link) !important; }
html.hm .home-page .text-muted { color: var(--hm-muted) !important; }
html.hm .home-page .table { color: var(--hm-text) !important; font-size: 14px; }
html.hm .home-page .table th { border-top: 0; border-bottom: 1px solid var(--hm-line-strong); font-weight: 700; color: var(--hm-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
html.hm .home-page .table td { border-top: 1px solid var(--hm-line); color: var(--hm-text); }
html.hm .home-page .bg-light { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); }
html.hm .home-page .btn-outline-primary, html.hm .home-page .btn-outline-secondary {
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    background: transparent;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--hm-radius-sm);
    padding: 9px 14px;
}
html.hm .home-page .btn-outline-primary:hover, html.hm .home-page .btn-outline-secondary:hover { background: #fff; border-color: #fff; color: var(--hm-ink); }
html.hm .home-page .btn-outline-primary { background: var(--hm-red); border-color: var(--hm-red); color: #fff; }
html.hm .home-page .btn-outline-primary:hover { background: var(--hm-red-dark); border-color: var(--hm-red-dark); color: #fff; }
html.hm .home-page .text-success { color: var(--hm-green) !important; }

/* ---- brand strip: the block is centred, its lines are left-aligned so the icons form one column
   and a wrapped line continues under its text, not under its icon ---- */
html.hm .homepage-brand-block { margin: 28px auto 8px; max-width: 900px; }
html.hm .homepage-separator { display: none; }
html.hm .homepage-brand-blurb { width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; font-size: 15px; line-height: 1.7; color: var(--hm-muted) !important; }
html.hm .homepage-brand-blurb > br { display: none; }
html.hm .homepage-brand-blurb .blurb-line { display: block; position: relative; padding-left: 32px; margin-bottom: 8px; }
html.hm .homepage-brand-blurb .blurb-line:last-child { margin-bottom: 0; }
html.hm .homepage-brand-blurb strong { color: var(--hm-text) !important; }
html.hm .homepage-brand-blurb .blurb-line i { position: absolute; left: 0; top: 0.35em; width: 20px; margin: 0; text-align: center; color: var(--hm-red); }
html.hm .homepage-brand-blurb a { color: var(--hm-link) !important; font-weight: 600; }

/* ---- modpack rows ---- */
html.hm .mods-row { align-items: center; }
html.hm .mods-row img { max-width: 100%; height: auto; margin: 0 !important; border-radius: var(--hm-radius); }
html.hm .first-mod { margin-top: 48px; }
html.hm .mods-row h2, html.hm .mods-row h3 { font-size: 26px; font-weight: 700; color: var(--hm-text) !important; line-height: 1.25; margin: 0 0 8px !important; padding: 0 !important; }
html.hm .mods-row p { font-size: 16px; color: var(--hm-muted) !important; max-width: 520px; margin-left: auto; margin-right: auto; }
html.hm .second-mod { margin-top: 40px; }
html.hm .second-mod .col-md-4 img { margin-bottom: 14px !important; max-width: 260px; }
html.hm .third-mod { margin-top: 40px; }
html.hm .third-mod .col-md-6:first-of-type img { margin-top: 18px !important; position: static; }
html.hm .after-mods-text { margin: 28px 0 0; }
html.hm .after-mods-text h5 { font-size: 15px; color: var(--hm-muted) !important; font-weight: 400; line-height: 1.6; max-width: 760px; margin: 0 auto; }
html.hm .after-mods-text h5 strong { display: inline; color: var(--hm-text) !important; font-weight: 600; }

/* ---- video row: the moonlit horde PB supplied on 2026-09-27 under the video and its text ----
   The pseudo-element bleeds to the viewport edges, the top is tinted for the white text, and the
   scene fades into the dark page before the why-us grid (px stops, so it does not depend on the
   viewport width). Phones get the 1080 copy at cover with a heavier tint under the whole wrapper
   (video, why-us, trust card). */
html.hm .video-row { position: relative; z-index: 0; padding: 104px 0 8px; margin: 16px 0 0 !important; width: auto !important; }
html.hm .video-row:before {
    content: ""; display: block !important; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw;
    background:
        linear-gradient(180deg, rgba(27, 24, 22, 0) 0px, rgba(27, 24, 22, 0) 430px, var(--hm-ink) 660px),
        linear-gradient(180deg, rgba(27, 24, 22, 0.45) 0px, rgba(27, 24, 22, 0.35) 300px, rgba(27, 24, 22, 0.35) 660px),
        url("/static/img/cdn/art-horde-2560.webp") center top / 100% auto no-repeat;
}
html.hm .video-row > .container > .row:first-child { align-items: center; }
html.hm .video-row video { margin-top: 0; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: var(--hm-radius); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); background: var(--hm-ink); }
html.hm .video-row h2 { font-size: 30px !important; font-weight: 800 !important; color: #fff !important; background: none !important; text-shadow: none !important; margin: 8px 0 4px; }
html.hm .video-row > .container > .row > .col-md-6 h3 { font-size: 15px; font-weight: 700; color: var(--hm-link); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px !important; }
html.hm .video-row > .container > .row:first-child p { font-size: 16px; line-height: 1.7; color: #f1eee9; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); margin-top: 0 !important; text-align: left; }
html.hm .video-row > .container > .row:first-child p strong { font-size: 17px; color: #fff; font-weight: 700; }
html.hm .video-row .col-md-6.text-center { text-align: left !important; }

/* ---- why us ---- */
html.hm .why-us-header-row { margin-top: 56px; }
html.hm .why-us-header-row h3 { font-size: 26px !important; font-weight: 700 !important; color: var(--hm-text) !important; margin-bottom: 28px; text-transform: none; letter-spacing: -0.01em; }
html.hm .why-us-row .col-md-3 { margin-bottom: 28px; padding: 0 10px !important; }
html.hm .why-us-row .col-md-3 .col-auto { min-height: 52px; }
html.hm .why-us-row .col-md-3 h4 { font-size: 16px; font-weight: 700; color: var(--hm-text) !important; }
html.hm .why-us-row .col-md-3 p.medium { font-size: 14px; line-height: 1.6; color: var(--hm-muted) !important; }
html.hm .why-us-row .col-md-3 p.medium a { color: var(--hm-link) !important; }

/* ---- trust card: the red bunker scene, tinted ---- */
html.hm .home-alert {
    background: linear-gradient(180deg, rgba(27, 24, 22, 0.50), rgba(27, 24, 22, 0.66)), url("/static/img/cdn/art-bunker-1600.webp") center 40% / cover no-repeat !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--hm-radius) !important;
    box-shadow: var(--hm-shadow-lift);
    margin: 8px 0 48px !important;
    padding: 34px 28px 22px;
    color: var(--hm-on-dark);
}
html.hm .home-alert h3 { font-size: 24px !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 26px; text-transform: none; letter-spacing: -0.01em; }
html.hm .home-alert p { font-size: 15px; line-height: 1.7; color: var(--hm-on-dark); text-align: left; }
html.hm .home-alert .home-trust-stars { color: var(--hm-gold) !important; }
html.hm .home-alert img { margin-top: 0; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.22); }
html.hm .home-alert .col-md-6.text-center { text-align: left !important; }
html.hm .home-trust-line a { font-size: 15px; color: #fff; }
/* the trust band sits inside .video-row, so its rules must outrank the .video-row p strong ones */
html.hm .home-alert .home-trust-line strong { font-weight: 700; font-size: 16px !important; color: #fff !important; }

/* ---- how it works, public list, locations, map ---- */
html.hm .server-details h3 { font-size: 22px; font-weight: 700; color: var(--hm-text) !important; margin-bottom: 12px; }
html.hm .server-details p { font-size: 15px; line-height: 1.7; color: var(--hm-muted) !important; max-width: 560px; margin: 0 auto; }
html.hm .server-details p br { display: none; }
html.hm .server-details img { max-width: 460px; width: 100%; border-radius: var(--hm-radius-sm); border: 1px solid var(--hm-line-strong); margin: 6px auto 18px; display: block; }
html.hm .home-page .btn-outline { display: inline-block; margin: 18px 0 32px; font-size: 15px; font-weight: 600; padding: 10px 22px; border: 1.5px solid rgba(255, 255, 255, 0.4); color: #fff; border-radius: var(--hm-radius-sm); }
html.hm .home-page .btn-outline:hover { background: #fff; border-color: #fff; color: var(--hm-ink); text-decoration: none; }
html.hm .server-details .col-md-12 h3 { margin-top: 24px; }
html.hm .map-row img { margin-top: 16px; max-width: 900px; width: 100%; height: auto; border-radius: var(--hm-radius); border: 1px solid var(--hm-line-strong); box-shadow: var(--hm-shadow); }

/* ---- the three boxed blocks (inline-styled in the template): at-a-glance (white, radius
   10px), the guides callout (red left border) and plan-relevant guides (#fafafa). The
   selectors are qualified on the inline style text on purpose: a bare div[style] also
   matched the plan cards. ---- */
html.hm .home-page div[style*="border-radius:10px"],
html.hm .home-page div[style*="border-left: 4px solid #c44426"],
html.hm .home-page div[style*="background: #fafafa"] {
    background: var(--hm-card) !important;
    border: 1px solid var(--hm-line) !important;
    border-radius: var(--hm-radius) !important;
    box-shadow: var(--hm-shadow);
    padding: 22px 26px !important;
}
html.hm .home-page div[style*="border-left: 4px solid #c44426"] { border-left: 4px solid var(--hm-red) !important; }
html.hm .home-page div[style*="border-radius:10px"] h2 { font-size: 20px !important; font-weight: 700 !important; color: var(--hm-text) !important; }
html.hm .home-page div[style*="border-radius:10px"] li,
html.hm .home-page div[style*="border-left: 4px solid #c44426"] p,
html.hm .home-page div[style*="background: #fafafa"] p { color: var(--hm-muted) !important; font-size: 15px; line-height: 1.75 !important; }
html.hm .home-page div[style*="border-radius:10px"] li strong,
html.hm .home-page div[style*="border-left: 4px solid #c44426"] p strong,
html.hm .home-page div[style*="background: #fafafa"] p strong { color: var(--hm-text) !important; }
html.hm .home-page div[style*="border-left: 4px solid #c44426"] p:first-child,
html.hm .home-page div[style*="background: #fafafa"] p:first-child { color: var(--hm-text) !important; font-weight: 700 !important; font-size: 16px; }
html.hm .home-page div[style*="border-left: 4px solid #c44426"] a,
html.hm .home-page div[style*="background: #fafafa"] a { color: var(--hm-link) !important; font-weight: 500 !important; text-decoration: underline; text-decoration-color: rgba(255, 107, 112, 0.35); text-underline-offset: 2px; }
html.hm .home-page div[style*="border-left: 4px solid #c44426"] a:hover,
html.hm .home-page div[style*="background: #fafafa"] a:hover { color: #fff !important; }

/* ---- phones and tablets ---- */
@media (max-width: 1024px) {
    /* phones: the box is 760 px, so cover would squeeze the whole artwork into it and put the sunlit
       middle behind the paragraph; a fixed 1400 px height keeps the hands and the fog up there, and
       the overlay fades into the dark page inside the box */
    html.hm .page-main.home-page:before { height: 760px; background-size: auto 1400px !important; background-position: center top; }
    html.hm .page-main.home-page:after { height: 760px; background: linear-gradient(180deg, rgba(27, 24, 22, 0.30) 0px, rgba(27, 24, 22, 0.16) 240px, rgba(27, 24, 22, 0) 400px, rgba(27, 24, 22, 0) 500px, var(--hm-ink) 760px); }
    html.hm .why-us-row .col-md-3 { flex: 0 0 50% !important; max-width: 50% !important; }
    html.hm .video-row { padding-top: 28px; }
    html.hm .video-row:before {
        background:
            linear-gradient(180deg, rgba(27, 24, 22, 0.68), rgba(27, 24, 22, 0.82)),
            url("/static/img/cdn/art-horde-1080.webp") center top / cover no-repeat;
    }
    html.hm .home-alert { background-image: linear-gradient(180deg, rgba(27, 24, 22, 0.50), rgba(27, 24, 22, 0.66)), url("/static/img/cdn/art-bunker-1080.webp") !important; }
    html.hm .video-row > .container > .row:first-child h2, html.hm .video-row > .container > .row:first-child p strong { color: #fff !important; }
    html.hm .video-row > .container > .row:first-child p { color: #f1eee9 !important; }
    html.hm .video-row > .container > .row > .col-md-6 h3 { color: var(--hm-link) !important; }
    html.hm .why-us-header-row h3, html.hm .why-us-row .col-md-3 h4 { color: #fff !important; }
    html.hm .why-us-row .col-md-3 p.medium { color: var(--hm-on-dark) !important; }
    html.hm .video-row .home-alert h3 { color: #fff !important; }
    html.hm .video-row .home-alert p { color: var(--hm-on-dark) !important; }
}
@media (max-width: 767px) {
    html.hm .page-main.home-page { padding-top: 84px !important; }
    html.hm .page-main.home-page .page-header { padding-top: 28px; }
    html.hm .page-main.home-page .page-header h1 { font-size: 32px !important; }
    html.hm .page-main.home-page .page-header p { font-size: 16px !important; }
    html.hm .after-banner-text strong { font-size: 14px; }
    html.hm .why-us-row .col-md-3 { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 20px; }
    html.hm .home-alert { padding: 26px 16px 8px; }
    html.hm .home-alert .col-md-6.text-center { text-align: center !important; }
    html.hm .home-alert p { text-align: center; }
    html.hm .home-alert .home-trust-line { margin-bottom: 18px !important; }
    html.hm .home-page div[style*="border-radius:10px"] ul[style*="columns"] { columns: 1 !important; }
    html.hm .home-page div[style*="border-radius:10px"], html.hm .home-page div[style*="border-left: 4px solid #c44426"], html.hm .home-page div[style*="background: #fafafa"] { padding: 18px 18px !important; }
    html.hm .mods-row h2, html.hm .mods-row h3 { font-size: 22px; }
    html.hm .video-row h2 { font-size: 26px !important; }
    html.hm .video-row .col-md-6.text-center { text-align: center !important; }
    html.hm .video-row > .container > .row:first-child p { text-align: center; }
    html.hm .server-details p { text-align: center; }
}