/* How to Watch page (/HowToWatch, /Satellites). */

.htw-page {
    --htw-navy: #000a44;
    --htw-deep: #020619;
    --htw-gold: #f5c127;
    --htw-red: #c40000;
    --htw-ink: #1d1d29;
    --htw-line: #e6e7ef;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3.5rem;
    font-family: 'Maven Pro', sans-serif;
    color: var(--htw-ink);
}

/* ---------- Hero: text beside the orbiting globe ---------- */
.htw-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 1rem;
    min-height: 480px;
    padding: 2.5rem 2.5rem 2.5rem 3rem;
    border-radius: 1.5rem;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(1200px 500px at 85% 50%, rgba(40, 80, 200, .35), transparent 60%),
        radial-gradient(600px 300px at 0% 100%, rgba(245, 193, 39, .12), transparent 70%),
        linear-gradient(160deg, #020a3a 0%, var(--htw-deep) 70%);
    isolation: isolate;
}
/* Star field: two layers of tiny dots drifting slowly. */
.htw-hero::before, .htw-hero::after {
    content: "";
    position: absolute;
    inset: -50%;
    z-index: -1;
    background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, .8), transparent),
        radial-gradient(1px 1px at 90px 120px, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1.5px 1.5px at 160px 60px, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1px 1px at 230px 170px, rgba(255, 255, 255, .4), transparent);
    background-size: 260px 200px;
    animation: htw-drift 120s linear infinite;
    opacity: .7;
}
.htw-hero::after {
    background-size: 380px 300px;
    animation-duration: 200s;
    opacity: .4;
}
@keyframes htw-drift { to { transform: translate(260px, 200px); } }

.htw-hero-text { position: relative; z-index: 1; max-width: 520px; }
.htw-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .8rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 2rem;
    background: rgba(255, 255, 255, .06);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #dfe3ff;
}
.htw-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255, 59, 59, .7); animation: htw-ping 1.8s infinite; }
@keyframes htw-ping { 70% { box-shadow: 0 0 0 .6rem rgba(255, 59, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); } }

.htw-hero h1 {
    margin: 1rem 0 .75rem;
    font-family: 'Barlow', sans-serif;
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
    color: #fff;   /* the site's typography sets every heading black */
}
.htw-hero p { margin: 0; font-size: 1.08rem; line-height: 1.6; color: #c6cbe6; }

.htw-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.htw-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1.3rem;
    border-radius: 2rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s, background-color .2s, border-color .2s;
}
.htw-btn:hover { transform: translateY(-2px); }
.htw-btn-live { background: var(--htw-red); color: #fff; box-shadow: 0 10px 24px rgba(196, 0, 0, .35); }
.htw-btn-live:hover { background: #a30000; color: #fff; }
.htw-btn-ghost { border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.htw-btn-ghost:hover { border-color: var(--htw-gold); color: var(--htw-gold); }

.htw-stats { display: flex; gap: 2rem; margin: 2rem 0 0; }
.htw-stats div { display: flex; flex-direction: column-reverse; }
.htw-stats dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #9aa1c9; }
.htw-stats dd { margin: 0; font-family: 'Barlow', sans-serif; font-size: 2rem; font-weight: 700; color: var(--htw-gold); line-height: 1.1; }

.htw-globe-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 520px; justify-self: center; }
.htw-globe { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.htw-globe:active { cursor: grabbing; }
.htw-globe.is-pointing { cursor: pointer; }
.htw-globe-tip {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    padding: .35rem .65rem;
    border-radius: .5rem;
    background: rgba(2, 6, 25, .9);
    border: 1px solid rgba(245, 193, 39, .6);
    color: #fff;
    font-size: .8rem;
    white-space: nowrap;
}
.htw-globe-tip b { color: var(--htw-gold); }

/* ---------- In-page navigation ---------- */
.htw-nav {
    display: flex;
    gap: .5rem;
    margin: 1.5rem 0 .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .25rem;
}
.htw-nav::-webkit-scrollbar { display: none; }
.htw-nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.05rem;
    border: 1px solid var(--htw-line);
    border-radius: 2rem;
    background: #fff;
    color: var(--htw-navy);
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}
.htw-nav a:hover { border-color: var(--htw-gold); background: #fffbea; }

/* ---------- Sections ---------- */
.htw-section { margin-top: 2.5rem; scroll-margin-top: 90px; }
.htw-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 3px solid var(--htw-navy); }
.htw-section-head h2 { margin: 0; font-family: 'Barlow', sans-serif; font-size: 1.85rem; font-weight: 700; color: var(--htw-navy); }
.htw-section-head p { margin: 0; color: #666; font-size: .95rem; }
.htw-empty { color: #666; }

/* Satellite cards */
.htw-sats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 1.1rem; }
.htw-sat {
    padding: 1.2rem 1.2rem .6rem;
    border: 1px solid var(--htw-line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 10, 68, .05);
    transition: border-color .2s, box-shadow .2s, transform .2s;
    outline: none;
}
.htw-sat:hover, .htw-sat:focus-visible, .htw-sat.is-active {
    border-color: var(--htw-gold);
    box-shadow: 0 12px 28px rgba(0, 10, 68, .12);
    transform: translateY(-2px);
}
.htw-sat > header { display: flex; align-items: center; gap: .85rem; margin-bottom: .6rem; }
.htw-sat-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, var(--htw-navy), #1c2f8f);
    color: var(--htw-gold);
    font-size: 1.1rem;
}
.htw-sat h3 { margin: 0; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--htw-navy); line-height: 1.2; }
.htw-pos { display: inline-block; margin-top: .15rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: #d99100; }

.htw-tp { width: 100%; border-collapse: collapse; font-size: .95rem; }
.htw-tp th { white-space: nowrap; padding: .4rem .35rem; border-bottom: 1px solid var(--htw-line); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8ea6; text-align: left; }
.htw-tp td { padding: .6rem .35rem; border-bottom: 1px solid #f0f1f6; vertical-align: middle; white-space: nowrap; }
.htw-tp tr:last-child td { border-bottom: 0; }
.htw-tp strong { font-family: 'Barlow', sans-serif; font-size: 1.15rem; color: var(--htw-navy); }
.htw-tp small { color: #8a8ea6; font-size: .72rem; }
.htw-pol { display: inline-block; padding: .12rem .5rem; border-radius: 2rem; font-size: .75rem; font-weight: 700; }
.htw-pol-h { background: #e8eeff; color: #1c3bb0; }
.htw-pol-v { background: #fff3cf; color: #8a5a00; }
.htw-pol-c { background: #e9f8ef; color: #17733d; }
.htw-fec { display: block; margin-top: .15rem; }
.htw-muted { color: #aaa; }
.htw-copy-cell { width: 1%; text-align: right; }
.htw-copy {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--htw-line);
    border-radius: .5rem;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.htw-copy:hover, .htw-copy:focus-visible { border-color: var(--htw-navy); background: var(--htw-navy); color: #fff; }
.htw-copy.is-done { border-color: #17733d; background: #17733d; color: #fff; }

/* Link cards */
.htw-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .85rem; }
.htw-link {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
    padding: .95rem 1rem;
    border: 1px solid var(--htw-line);
    border-radius: .9rem;
    background: #fff;
    color: var(--htw-ink);
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
a.htw-link:hover, a.htw-link:focus-visible { border-color: var(--htw-gold); box-shadow: 0 10px 22px rgba(0, 10, 68, .1); transform: translateY(-2px); color: var(--htw-ink); }
.htw-link-icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #f1f2f8; color: var(--htw-navy); font-size: 1.15rem; transition: background-color .2s, color .2s; }
a.htw-link:hover .htw-link-icon { background: var(--htw-navy); color: var(--htw-gold); }
.htw-link-text { display: flex; flex-direction: column; min-width: 0; }
.htw-link-text strong { font-size: 1rem; color: var(--htw-navy); }
.htw-link-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #777; font-size: .82rem; }
.htw-link-go { margin-left: auto; color: #b9bccb; font-size: .8rem; }
.htw-link-info { background: #fafbfe; }

.htw-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 50;
    transform: translate(-50%, 150%);
    padding: .65rem 1.1rem;
    border-radius: 2rem;
    background: var(--htw-navy);
    color: #fff;
    font-size: .9rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    opacity: 0;
    transition: transform .3s, opacity .3s;
    pointer-events: none;
}
.htw-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 991.98px) {
    .htw-hero { grid-template-columns: minmax(0, 1fr); padding: 2rem 1.5rem 1rem; min-height: 0; text-align: center; }
    .htw-hero-text { max-width: 640px; margin: 0 auto; }
    .htw-hero-actions, .htw-stats { justify-content: center; }
    .htw-globe-wrap { max-width: 460px; }
}
@media (max-width: 575.98px) {
    .htw-page { padding: .75rem .75rem 3rem; }
    .htw-hero { border-radius: 1rem; padding: 1.6rem 1rem .5rem; }
    .htw-stats { gap: 1.25rem; }
    .htw-stats dd { font-size: 1.6rem; }
    .htw-section-head h2 { font-size: 1.5rem; }
    .htw-tp td:nth-child(3) { font-size: .85rem; }
    .htw-tp td { padding: .55rem .25rem; }
    .htw-tp th { letter-spacing: .03em; font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
    .htw-hero::before, .htw-hero::after, .htw-dot { animation: none; }
    .htw-btn, .htw-sat, .htw-link { transition: none; }
}