/* ==========================================================================
   Bootstrap 5 shim — what Bootstrap 3 gave this page for free and Bootstrap 5
   no longer does, plus the styles for the three pieces added in v2 (the
   countdown, the notify-me form and its success note).
   ========================================================================== */

/* ---- Bootstrap 3 defaults the v1 stylesheet silently relied on ---------- */

/* Bootstrap 3 set html{font-size:10px}, and v1's body{font-size:100%}
   inherits that — so v1's body text is 10px, not 16. Nothing visible uses
   it (every text element sets its own px size) but parity is the standard;
   pinned on body, not html, so Bootstrap 5's rem-based components keep
   their 16px root. Line-height: BS3 1.42857, BS5 1.5. */
body { font-size: 10px; line-height: 1.42857143; }

/* BS3 headings carried margin 20px 0 10px and no RFS; BS5 zeroes the top
   margin, adds .5rem bottom and makes h1/h3 fluid. Sizes are pinned in
   style.css already; restore the vertical rhythm. */
.title { margin: 20px 0 10px; line-height: 1.1; }
.tagname { margin-bottom: 10px; line-height: 1.1; }
@media (max-width: 991px) { .tagname { line-height: 34px; } }

/* BS3 .progress was 20px tall with a 20px bottom margin; BS5 is 1rem (16px)
   and no margin. The label inside is 12px/20px, so the bar's height IS the
   label's line box in v1. */
.progress { height: 20px; margin-bottom: 20px; }
.progress-bar { line-height: 20px; }
/* v1's 2s fill (.six-sec-ease-in-out) is the page's one piece of motion.
   Bootstrap 5 disables .progress-bar's transition under
   prefers-reduced-motion; v1 never did — keep v1's behaviour. */
@media (prefers-reduced-motion: reduce) {
    .progress .progress-bar.six-sec-ease-in-out { transition: width 2s ease-in-out 0s; }
}

/* BS3 container tiers (750/970/1170) — as FIXED widths, the way BS3 had
   them, not max-widths. It matters here: .container sits inside .main,
   which is absolutely positioned and therefore shrink-to-fit. BS3's fixed
   width:1170px forced .main open to 1170px, and the progress bar (50% of
   .container) came out 585px; a max-width + width:100% container inside a
   shrink-to-fit block collapses to the heading's own width (~480px) and the
   bar with it. BS3 padding was 15px a side; BS5's is 12px. */
.container { padding-left: 15px; padding-right: 15px; }
@media (min-width: 768px)  { .container { width: 750px; max-width: none; } }
@media (min-width: 992px)  { .container { width: 970px; max-width: none; } }
@media (min-width: 1200px) { .container { width: 1170px; max-width: none; } }

/* wow.js fadeInDown, reproduced: hidden until scrolled into view, then a
   1000ms fade + slide from -100% (wow's fadeInDown keyframe), 300ms delay —
   the data-wow-* values v1 used. main.js adds .is-visible. */
.wow { visibility: hidden; }
.wow.is-visible {
    visibility: visible;
    animation: fadeInDown 1000ms ease 300ms both;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wow { visibility: visible; }
    .wow.is-visible { animation: none; }
}

/* Smooth-scroll for the one in-page anchor (the "stay connected" icon ->
   #notify); replaces mousescroll.js. */
html { scroll-behavior: smooth; }

/* ---- v2 additions ------------------------------------------------------- */

/* Countdown — four tiles under the heading, in the page's own blue/white. */
.countdown {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 30px 0 0;
}
.countdown-tile {
    min-width: 90px;
    padding: 14px 10px 12px;
    background: rgba(255, 255, 255, .85);
    border-bottom: 3px solid #1098f7;
}
.countdown-value {
    display: block;
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    color: #000;
    letter-spacing: 1px;
}
.countdown-label {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #17223c;
}
.countdown-done {
    display: none;
    margin: 30px 0 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1098f7;
}
.countdown.is-done { display: none; }
.countdown.is-done + .countdown-done { display: block; }

/* Notify-me form — sits between the progress bar and the social icons, the
   same 50% width as the bar. */
.notify {
    width: 50%;
    margin: 0 auto 40px;
}
.notify-lead {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    margin: 0 0 14px;
}
.notify-row {
    display: flex;
}
.notify .form-control {
    flex: 1 1 auto;
    height: 48px;
    border: 2px solid #fff;
    border-right: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .92);
    color: #17223c;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 0 16px;
}
.notify .form-control::placeholder { color: #6b7280; opacity: 1; }
.notify .form-control:focus { border-color: #1098f7; box-shadow: none; }
.notify .btn {
    height: 48px;
    padding: 0 26px;
    border: 2px solid #1098f7;
    border-radius: 0;
    background: #1098f7;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.notify .btn:hover, .notify .btn:focus { background: #0b7fd1; border-color: #0b7fd1; color: #fff; }
.notify .form-control.is-invalid { border-color: #e0245e; }
.notify-note {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
}
.notify-note[hidden] { display: none; }
.notify-error { color: #ffd1dc; }

@media (max-width: 991px) {
    .countdown { gap: 8px; margin-top: 20px; }
    .countdown-tile { min-width: 68px; padding: 10px 6px 8px; }
    .countdown-value { font-size: 26px; }
    .countdown-label { font-size: 10px; letter-spacing: 1px; }
    .notify { margin-bottom: 30px; }
}
@media (max-width: 767px) {
    .notify { width: 100%; }
}
@media (max-width: 500px) {
    .countdown { gap: 6px; }
    .countdown-tile { min-width: 0; flex: 1 1 0; padding: 8px 4px 6px; }
    .countdown-value { font-size: 22px; }
    .countdown-label { font-size: 9px; letter-spacing: 1px; }
    .notify-row { flex-direction: column; }
    .notify .form-control { border-right: 2px solid #fff; }
    .notify .btn { margin-top: 8px; }
}

/* ---- v2 companion pages (thank-you, maintenance, privacy) --------------- */

/* Footer link row — the page had no navigation at all; this is the one way
   into the three new pages. Under the social icons, above the copyright. */
.page-links {
    margin: 26px 0 0;
}
.page-links a {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 10px;
}
.page-links a:hover, .page-links a:focus { color: #1098f7; }

/* One-line lead under the heading on the companion pages. */
.page-lead {
    max-width: 560px;
    margin: 24px auto 0;
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
}
.page-cta { margin: 0 0 6px; }
.btn-outline {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid #fff;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 0;
}
.btn-outline:hover, .btn-outline:focus { border-color: #1098f7; color: #1098f7; background: transparent; }

/* Privacy: a short document. The page's centred, absolutely-positioned
   .main can't hold a scrolling column, so this page flows normally. */
.main-doc {
    position: static;
    transform: none;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}
.doc {
    text-align: left;
    background: rgba(255, 255, 255, .92);
    padding: 28px 32px;
    margin: 30px 0;
}
.doc h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1098f7;
    margin: 18px 0 6px;
}
.doc h2:first-child { margin-top: 0; }
.doc p {
    font-size: 14px;
    line-height: 23px;
    font-weight: 400;
    color: #17223c;
    margin: 0 0 6px;
}
.doc a { color: #1098f7; text-decoration: underline; }
.doc-updated { margin-top: 18px !important; font-size: 12px !important; color: #6b7280 !important; }

@media (max-width: 991px) {
    .page-links { margin-top: 20px; }
    .page-lead { margin-top: 16px; font-size: 14px; line-height: 22px; }
}
@media (max-width: 500px) {
    .page-links a { margin: 0 6px; font-size: 11px; letter-spacing: 1px; }
    .doc { padding: 20px 18px; }
}
.notify-privacy { margin: 10px 0 0; font-size: 11px; letter-spacing: 1px; color: rgba(255,255,255,.75); }
.notify-privacy a { color: #fff; text-decoration: underline; }
.notify-privacy a:hover { color: #1098f7; }

/* Under 400px v1 drops .main out of its centring transform and pins it at
   top:30% — fine for v1's five short rows, but with the countdown and the
   form the page is taller than the viewport and that 30% is dead space
   above the fold. Start at the top instead, with the 40px body padding v1
   already had. The countdown and form also need the side gutter the
   absolutely-positioned .main never gave them. */
@media (max-width: 400px) {
    .main {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        min-height: calc(100vh - 80px); /* body pads 40px top + bottom */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .countdown, .notify, .page-lead { padding-left: 15px; padding-right: 15px; }
    .countdown { box-sizing: border-box; }
}

/* 401–767px: v1 keeps .main absolutely positioned here, which makes it
   shrink-to-fit its widest child. Bootstrap 3's fixed-width .container
   propped it open at 750px+ but that tier only starts at 768; below it the
   block collapses to ~230–300px in the middle of a 430–767px screen, and
   the countdown and the form (both sized as a percentage of .main) collapse
   with it — 100px+ of empty space each side on a Pro Max or a Pixel. Give
   .main the viewport's width with the 15px gutter the ≤400 rule uses. */
@media (min-width: 401px) and (max-width: 767.98px) {
    .main { width: 100%; left: 0; transform: translateY(-50%); padding: 0 15px; box-sizing: border-box; }
    .container { width: auto; padding: 0; }
}

/* The privacy page flows normally (.main-doc, above) — but the two phone
   rules for .main come later in this file at equal specificity and win,
   so on a 401–767px phone the document picked up translateY(-50%) and
   half of it left the screen. Restate the doc layout with the extra class
   and after those rules, so it holds at every width. */
.main.main-doc {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    min-height: 0;
    display: block;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}