/* =========================================================================
   app-2026.css — the 2026 app shell.

   Loaded ONLY for the preview (`?v2=1`, see zz_v2() in zz-session.php), after
   zuzz-2026.css and account-2026.css. Every rule is scoped under [data-v2], so
   visitors outside the preview cannot be touched by anything in this file even
   if it is cached, fetched by mistake, or loaded by a page that forgot to
   check.

   Built entirely on the tokens in zuzz-2026.css - there are no palette values
   of its own. Flatten it with the palette, or it evaporates on a 2016 set:

       node tools/flatten-css.js --tokens-from=zuzz.tv/zuzz-2026.css zuzz.tv/app-2026.css

   THE RULES THIS FILE KEEPS (see .claude-docs/12):
   - no grid, inset, logical properties, min()/max(), :is(), aspect-ratio
   - :focus in its own ruleset; nothing revealed by :hover alone
   - flex `gap` only where losing it costs spacing, never layout
   - motion is transform and opacity only, and [data-tv] * cancels all of it
   - a literal value in front of every env(), which old engines drop
   ========================================================================= */

/* =========================================================================
   FOUNDATION
   ========================================================================= */

/* Inter, and a type rhythm that reads as considered: slightly tighter tracking
   on anything large, open tracking on the small caps labels. */
[data-v2] body {
    /*!fb*/ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-family: var(--zz-font-app);
    font-feature-settings: "cv11" 1, "ss01" 1;
    letter-spacing: -.006em;
    -webkit-tap-highlight-color: transparent;

    /* THE FOOTER SITS AT THE BOTTOM OF EVERY PAGE.
       A column that is at least one screen tall, whose main area takes the
       spare height. Flexbox reaches Chromium 21, so this holds on every set -
       the absolutely-positioned or calc(100vh - footer) versions do not. */
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}
[data-v2] body > .zz-head,
[data-v2] body > .zz-foot { -webkit-flex: 0 0 auto; flex: 0 0 auto; }
[data-v2] body > .zz-main { -webkit-flex: 1 0 auto; flex: 1 0 auto; width: 100%; }

/* Inputs, buttons and selects do not inherit the page font by default. */
[data-v2] input,
[data-v2] button,
[data-v2] select,
[data-v2] textarea { font-family: inherit; }

[data-v2] h1,
[data-v2] h2,
[data-v2] h3 { letter-spacing: -.022em; }

/* Dark only. The toggle is not rendered, and a stored "light" choice from the
   old design must not half-apply through a stale attribute. */
[data-v2] .zz-theme { display: none; }

/* =========================================================================
   BUTTONS
   One press response everywhere: a quick scale to .97, released on a fast
   ease-out. It is the cheapest thing on the page that makes it feel alive,
   and it is transform only, so it never triggers layout.
   ========================================================================= */
[data-v2] .zz-btn-cta,
[data-v2] .zz-btn-ghost,
[data-v2] .zz-btn-google,
[data-v2] .zz-btn-quiet,
[data-v2] .zz-tab,
[data-v2] .zz-sheet-opt,
[data-v2] .zz-row {
    /*!fb*/ transition: background-color 140ms cubic-bezier(.23, 1, .32, 1), border-color 140ms cubic-bezier(.23, 1, .32, 1), color 140ms cubic-bezier(.23, 1, .32, 1), transform 160ms cubic-bezier(.23, 1, .32, 1);
    transition: background-color var(--zz-d-1) var(--zz-ease-out),
                border-color var(--zz-d-1) var(--zz-ease-out),
                color var(--zz-d-1) var(--zz-ease-out),
                transform 160ms var(--zz-ease-out);
}
[data-v2] .zz-btn-cta:active,
[data-v2] .zz-btn-ghost:active,
[data-v2] .zz-btn-google:active,
[data-v2] .zz-btn-quiet:active,
[data-v2] .zz-sheet-opt:active { -webkit-transform: scale(.97); transform: scale(.97); }

[data-v2] .zz-btn-cta {
    min-height: 44px;
    padding: 0 20px;
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    font-weight: 600;
    letter-spacing: -.01em;
    /* A hairline of light along the top edge, the way a physical button catches
       it. Inset, so it adds no size and needs no extra element. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
[data-v2] .zz-btn-ghost {
    min-height: 44px;
    padding: 0 16px;
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    font-weight: 600;
    justify-content: center;
}
[data-v2] .zz-btn-block { min-height: 50px; /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); }

/* The small pill in the phone header. */
[data-v2] .zz-btn-sm {
    min-height: 34px;
    padding: 0 14px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
}

/* =========================================================================
   HEADER
   ========================================================================= */
/* THE FLOATING HEADER.
   Not a band across the whole window: a rounded island inside the page's own
   margins, with the league menu as a second rounded bar beneath it. Around them
   is only the page colour, fading out, so whatever scrolls underneath slips
   away cleanly instead of showing a hard edge.

   The top area is exactly 8px + a 56px island = --zz-header-h (64px), which is
   what lets the desktop header still slide its top row away on scroll and leave
   the league bar sitting 8px from the top. */
[data-v2] .zz-head {
    padding-top: 8px;
    background: linear-gradient(180deg, #080c0f 0, rgba(8, 12, 15, .92) 70%, rgba(8, 12, 15, 0) 100%);
    border-bottom: 0;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}
[data-v2] .zz-head-in {
    height: 56px;
    padding: 0 10px 0 16px;
    border-radius: 18px;
    background: rgba(13, 19, 23, .86);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
}

/* The league menu: its own rounded bar, the active league a soft pill. */
[data-v2] .zz-head-nav-row { margin-top: 8px; padding-bottom: 8px; }
[data-v2] .zz-head-nav-row > .zz-leagues {
    padding: 4px;
    border-radius: 16px;
    background: rgba(13, 19, 23, .86);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
}
[data-v2] .zz-head-nav-row .zz-leagues-scroll { padding: 0; }
[data-v2] .zz-head-nav-row .zz-league {
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    letter-spacing: .03em;
}
[data-v2] .zz-head-nav-row .zz-league.active {
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    /*!fb*/ box-shadow: inset 0 0 0 1px rgba(251, 98, 63, .35);
    box-shadow: inset 0 0 0 1px var(--zz-ember-line);
}
[data-v2] .zz-head-nav-row .zz-league.active::after { display: none; }
[data-v2] .zz-leagues-scroll {
    -webkit-mask-image: none;
            mask-image: none;
}
[data-v2] .zz-leagues.has-more-l .zz-leagues-scroll {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%);
}
[data-v2] .zz-leagues.has-more-r .zz-leagues-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
[data-v2] .zz-leagues.has-more-l.has-more-r .zz-leagues-scroll {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
[data-v2] .zz-head-nav-row .zz-leagues-more-l { left: 6px; }
[data-v2] .zz-head-nav-row .zz-leagues-more-r { right: 6px; }

/* Browsers with no blur get a solid island rather than see-through text. */
@supports not (backdrop-filter: blur(1px)) {
    [data-v2] .zz-head-in,
    [data-v2] .zz-head-nav-row > .zz-leagues { /*!fb*/ background: #0d1317; background: var(--zz-surface-1); }
}
/* A television cannot composite the blur at sixty frames a second. */
[data-tv][data-v2] .zz-head-in,
[data-tv][data-v2] .zz-head-nav-row > .zz-leagues {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
}

/* EVEN SPACING BELOW IT: the same gap between the menu, the player and the
   channel list, and the same rounded corners on all of them. */
@media (min-width: 1024px) {
    [data-v2] .zz-main { padding-top: 8px; }
    [data-v2] .zz-panel,
    [data-v2] .zz-player-frame {
        /*!fb*/ border-radius: 20px;
        border-radius: var(--zz-r-xl);
    }
}
@media (min-width: 1280px) {
    [data-v2] .zz-layout > .zz-rail { margin-right: 20px; }
}

/* PHONES: a little room under the island, and the stream pins itself below
   whatever the header really measures - taller on Sports, where the league bar
   shows. app-2026.js keeps --zz-headbox current; 72px is the island alone. */
@media (max-width: 1023.98px) {
    [data-v2] .zz-head { padding-bottom: 8px; }
    [data-v2] .zz-head-in { padding-left: 14px; border-radius: 16px; }
    [data-v2] .zz-player { top: 72px; /*!fb*/ top: 72px; top: var(--zz-headbox, 72px); }
    [data-v2] .zz-finder-box { top: 72px; /*!fb*/ top: 72px; top: var(--zz-headbox, 72px); }

    /* The player lines up with the island above it: an inset, rounded card
       rather than an edge-to-edge strip. The sticky container itself still
       spans the width (its negative margins are kept) and wears the page
       colour, so the list scrolls cleanly underneath instead of peeking out
       beside the card. */
    [data-v2] .zz-player {
        /*!fb*/ padding: 0 24px 8px;
        padding: 0 var(--zz-gutter) 8px;
        /*!fb*/ background: #080c0f;
        background: var(--zz-canvas);
    }
    [data-v2] .zz-player-frame {
        /*!fb*/ border-radius: 16px;
        border-radius: var(--zz-r-lg);
        /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
        border: 1px solid var(--zz-line-2);
    }
    [data-v2] .zz-player-bar { background: transparent; border-bottom: 0; padding-left: 4px; padding-right: 4px; }

    /* Nothing is playing yet: the poster says everything, so no empty bar with
       a lone close button under it. */
    [data-v2][data-home]:not([data-playing]) .zz-player-bar { display: none; }
}
[data-v2] .zz-logo img { width: 112px; height: 38px; }
@media (min-width: 1024px) {
    [data-v2] .zz-logo img { width: 124px; height: 42px; }
}

/* The phone bar: mark, then the bell and one action. The burger and drawer are
   gone - the tab bar at the bottom is the navigation now. */
[data-v2] .zz-head-app .zz-btn-cta { margin-left: 8px; }

/* The header does not slide away on a phone in the app shell. The player pins
   itself directly under it, and a header that leaves opens a gap above the
   stream for the length of every scroll. */
@media (max-width: 1023.98px) {
    [data-v2] .zz-head.is-condensed { -webkit-transform: none; transform: none; }
    [data-v2] .zz-head.is-condensed .zz-head-slide { opacity: 1; visibility: visible; }
}

/* The auth pages' header: the mark, centred, and nothing else to press. */
[data-v2] .zz-head-min-in { justify-content: center; }
[data-v2] .zz-head-min .zz-head-spacer { display: none; }
[data-v2] .zz-head-min .zz-logo img { height: 36px; width: auto; }

/* =========================================================================
   CARDS AND SURFACES
   ========================================================================= */
[data-v2] .zz-card {
    /*!fb*/ border-radius: 20px;
    border-radius: var(--zz-r-xl);
    /*!fb*/ background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 120px), #0d1317;
    background: linear-gradient(180deg, var(--zz-fill-1), rgba(255, 255, 255, 0) 120px), var(--zz-surface-1);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 80px -40px rgba(0, 0, 0, .8);
}
[data-v2] .zz-card-title {
    /*!fb*/ font-size: 20px;
    font-size: var(--zz-t-lg);
    font-weight: 700;
    letter-spacing: -.024em;
    line-height: 1.25;
}
[data-v2] .zz-card-text { line-height: 1.55; }

/* =========================================================================
   FORMS
   ========================================================================= */
[data-v2] .zz-label {
    /*!fb*/ margin: 16px 0 6px;
    margin: var(--zz-s-4) 0 6px;
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 500;
    letter-spacing: 0;
}
[data-v2] .zz-input {
    min-height: 50px;
    padding: 13px 16px;
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /* 16px, not 14. Anything smaller and iOS zooms the whole page the moment a
       field is tapped, and the layout appears to lurch sideways. */
    font-size: 16px;
    /*!fb*/ transition: border-color 140ms cubic-bezier(.23, 1, .32, 1), box-shadow 140ms cubic-bezier(.23, 1, .32, 1);
    transition: border-color var(--zz-d-1) var(--zz-ease-out),
                box-shadow var(--zz-d-1) var(--zz-ease-out);
}
[data-v2] .zz-input:focus {
    /*!fb*/ border-color: #fb623f;
    border-color: var(--zz-ember);
    /*!fb*/ box-shadow: 0 0 0 4px rgba(251, 98, 63, .12);
    box-shadow: 0 0 0 4px var(--zz-ember-ghost);
}
[data-v2] .zz-hint { /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); }

[data-v2] .zz-alert {
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    padding: 12px 14px;
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    line-height: 1.45;
}

/* =========================================================================
   SIGN IN, CREATE ACCOUNT, FORGOT, RESET, TV
   ========================================================================= */
[data-v2] .zz-auth {
    /*!fb*/ padding: 32px 0 48px;
    padding: var(--zz-s-6) 0 var(--zz-s-7);
}
[data-v2] .zz-main-narrow .zz-shell { max-width: 460px; }
[data-v2] .zz-auth-card {
    /*!fb*/ padding: 28px 24px 24px;
    padding: 28px var(--zz-s-5) var(--zz-s-5);
}
@media (min-width: 560px) {
    [data-v2] .zz-auth-card { padding: 36px 36px 32px; }
}

/* The page title every auth screen now opens with. */
[data-v2] .zz-auth-h {
    margin: 0 0 6px;
    /*!fb*/ font-size: 26px;
    font-size: var(--zz-t-xl);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
}
[data-v2] .zz-auth-lede {
    /*!fb*/ margin: 0 0 24px;
    margin: 0 0 var(--zz-s-5);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    line-height: 1.5;
}
[data-v2] .zz-auth-card-center { text-align: center; }

/* The segmented control. Taller, rounder, and the pill slides on the drawer
   curve rather than a stock ease. */
[data-v2] .zz-auth-switch {
    /*!fb*/ margin-bottom: 24px;
    margin-bottom: var(--zz-s-5);
    padding: 4px;
    /*!fb*/ border-radius: calc(12px + 2px);
    border-radius: calc(var(--zz-r) + 2px);
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
    border: 0;
}
[data-v2] .zz-auth-tab {
    min-height: 40px;
    /*!fb*/ border-radius: 10px;
    border-radius: var(--zz-r-btn);
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    letter-spacing: -.01em;
}
[data-v2] .zz-auth-slider {
    /*!fb*/ border-radius: 10px;
    border-radius: var(--zz-r-btn);
    /*!fb*/ background: #18232a;
    background: var(--zz-surface-3);
    border: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
    /*!fb*/ transition: transform 260ms cubic-bezier(.32, .72, 0, 1);
    transition: transform var(--zz-d-3) var(--zz-ease-drawer);
}

[data-v2] .zz-btn-google {
    min-height: 50px;
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    background: #10161a;
    font-size: 15px;
}
[data-v2] .zz-or {
    margin: 20px 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
[data-v2] .zz-form-between { /*!fb*/ margin: 16px 0 0; margin: var(--zz-s-4) 0 0; }
[data-v2] .zz-check { margin: 0; }
[data-v2] .zz-check input {
    /*!fb*/ accent-color: #fb623f;
    accent-color: var(--zz-ember);
}
[data-v2] .zz-auth-small { /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); font-weight: 500; }
[data-v2] .zz-auth-foot { /*!fb*/ margin: 24px 0 0; margin: var(--zz-s-5) 0 0; /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); }
[data-v2] .zz-auth-links { /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); }
[data-v2] .zz-auth-tv { border-top: 0; margin-top: 12px; padding-top: 0; }

/* The legal line under the sign-up button. */
[data-v2] .zz-auth-legal {
    /*!fb*/ margin: 16px 0 0;
    margin: var(--zz-s-4) 0 0;
    text-align: center;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 12px;
    line-height: 1.5;
}
[data-v2] .zz-auth-legal a { text-decoration: underline; }
[data-v2] .zz-auth-legal a:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }

/* A result screen: one icon, one sentence, one button. */
[data-v2] .zz-result-ico {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    /*!fb*/ margin: 4px auto 20px;
    margin: var(--zz-s-1) auto 20px;
    border-radius: 50%;
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
}
[data-v2] .zz-result-ico svg { width: 28px; height: 28px; }
[data-v2] .zz-result-ico.is-good { background: rgba(61, 220, 132, .12); /*!fb*/ color: #3ddc84; color: var(--zz-live-ink); }
[data-v2] .zz-result-ico .zz-tick { width: 64px; height: 64px; }

/* The TV code. Each character in its own tile reads faster from a sofa than a
   run of letters with tracking, and it cannot be misread as one word. */
[data-v2] .zz-code-value {
    padding: 18px 28px;
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    letter-spacing: .22em;
    font-size: 46px;
}
[data-v2][data-tv] .zz-code-value { font-size: 72px; }

/* ON A PHONE THE MAIN BUTTON STAYS WITHIN REACH.
   Sticky inside its own form, so it rides above the keyboard and the home
   indicator while a long form scrolls, and settles back into place at the end.
   No JavaScript and no fixed positioning to fight the on-screen keyboard. */
@media (max-width: 1023.98px) {
    [data-v2] .zz-auth .zz-form .zz-btn-block {
        position: -webkit-sticky;
        position: sticky;
        bottom: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 2;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px -8px rgba(0, 0, 0, .7);
    }
}

/* =========================================================================
   ONE MODAL SYSTEM
   The sign-in pop-up used to be its own component at z-index 90 with no blur,
   under the comparison dialog at 200 with blur. One scale, one backdrop, one
   arrival. On a phone it becomes a sheet from the bottom edge.
   ========================================================================= */
[data-v2] .zz-modal,
[data-v2] .zz-auth-modal {
    z-index: 200;
    background: rgba(4, 7, 9, .66);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
            backdrop-filter: blur(14px) saturate(120%);
}
[data-v2] .zz-modal.is-open { -webkit-animation: zz-fade 200ms ease-out both; animation: zz-fade 200ms ease-out both; }
[data-v2] .zz-modal.is-open .zz-modal-card {
    -webkit-animation: zz-rise 260ms cubic-bezier(.23, 1, .32, 1) both;
            animation: zz-rise 260ms cubic-bezier(.23, 1, .32, 1) both;
}
[data-v2] .zz-modal-card {
    /*!fb*/ border-radius: 20px;
    border-radius: var(--zz-r-xl);
}
@-webkit-keyframes zz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zz-fade { from { opacity: 0; } to { opacity: 1; } }
/* Never from scale(0): nothing in the real world appears from nothing. */
@-webkit-keyframes zz-rise {
    from { opacity: 0; -webkit-transform: translateY(10px) scale(.97); }
    to   { opacity: 1; -webkit-transform: none; }
}
@keyframes zz-rise {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 559.98px) {
    [data-v2] .zz-auth-modal { padding: 0; -webkit-align-items: flex-end; align-items: flex-end; }
    [data-v2] .zz-auth-modal-card { min-height: 0; margin: 0; }
    [data-v2] .zz-auth-modal .zz-auth-embed {
        min-height: 0;
        max-height: 92vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        padding-bottom: 24px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    [data-v2] .zz-auth-modal.is-open .zz-modal-card {
        -webkit-animation: zz-sheet 300ms cubic-bezier(.32, .72, 0, 1) both;
                animation: zz-sheet 300ms cubic-bezier(.32, .72, 0, 1) both;
    }
}
@-webkit-keyframes zz-sheet { from { -webkit-transform: translateY(100%); } to { -webkit-transform: none; } }
@keyframes zz-sheet { from { transform: translateY(100%); } to { transform: none; } }

/* =========================================================================
   SHEET — "choose how to pay", and anything else that asks one question
   ========================================================================= */
.zz-sheet {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 210;
    display: none;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 7, 9, .66);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}
.zz-sheet.is-open {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-animation: zz-fade 200ms ease-out both;
            animation: zz-fade 200ms ease-out both;
}
.zz-sheet-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    /*!fb*/ padding: 24px;
    padding: var(--zz-s-5);
    /*!fb*/ border-radius: 20px;
    border-radius: var(--zz-r-xl);
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9);
}
.zz-sheet.is-open .zz-sheet-card {
    -webkit-animation: zz-rise 260ms cubic-bezier(.23, 1, .32, 1) both;
            animation: zz-rise 260ms cubic-bezier(.23, 1, .32, 1) both;
}
.zz-sheet-grab { display: none; }
.zz-sheet-t {
    /*!fb*/ margin: 0 40px 4px 0;
    margin: 0 40px var(--zz-s-1) 0;
    /*!fb*/ font-size: 20px;
    font-size: var(--zz-t-lg);
    font-weight: 700;
    letter-spacing: -.024em;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
}
.zz-sheet-x {
    margin: 0 0 20px;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
}
.zz-sheet-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    cursor: pointer;
}
.zz-sheet-close:hover { /*!fb*/ background: rgba(255, 255, 255, .18); background: var(--zz-fill-4); /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
.zz-sheet-close:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }

/* One option per payment method: a big row, the method on the left, the name
   that will appear on the statement underneath in small print. */
.zz-sheet-opt {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    min-height: 64px;
    /*!fb*/ padding: 12px 16px;
    padding: var(--zz-s-3) var(--zz-s-4);
    /*!fb*/ border-radius: calc(12px + 2px);
    border-radius: calc(var(--zz-r) + 2px);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.zz-sheet-opt + .zz-sheet-opt { margin-top: 10px; }
.zz-sheet-opt:hover { /*!fb*/ border-color: rgba(251, 98, 63, .35); border-color: var(--zz-ember-line); /*!fb*/ background: rgba(251, 98, 63, .12); background: var(--zz-ember-ghost); }
.zz-sheet-opt:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
.zz-sheet-opt-ico {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 40px;
    height: 28px;
    margin-right: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 6px;
    background: #ffffff;
}
.zz-sheet-opt-ico svg { display: block; }
.zz-sheet-opt-main { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.zz-sheet-opt-main b { display: block; font-weight: 600; /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); letter-spacing: -.01em; }
.zz-sheet-opt-main small { display: block; margin-top: 2px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 12px; }
.zz-sheet-opt-go { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 12px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }
.zz-sheet-foot {
    /*!fb*/ margin: 16px 0 0;
    margin: var(--zz-s-4) 0 0;
    text-align: center;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 12px;
}

@media (max-width: 559.98px) {
    .zz-sheet { padding: 0; -webkit-align-items: flex-end; align-items: flex-end; }
    .zz-sheet-card {
        max-width: none;
        border-radius: 20px 20px 0 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        padding-bottom: 24px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    .zz-sheet.is-open .zz-sheet-card {
        -webkit-animation: zz-sheet 300ms cubic-bezier(.32, .72, 0, 1) both;
                animation: zz-sheet 300ms cubic-bezier(.32, .72, 0, 1) both;
    }
    .zz-sheet-grab {
        display: block;
        width: 36px; height: 5px;
        margin: -12px auto 14px;
        border-radius: 3px;
        /*!fb*/ background: rgba(255, 255, 255, .20);
        background: var(--zz-line-3);
    }
}

/* =========================================================================
   TOASTS
   Small confirmations that do not deserve a page: "Saved", "Copied",
   "Signed out of that device". Transitions, not keyframes, so a toast that is
   replaced mid-arrival retargets smoothly instead of restarting.
   Never on a television - see app-2026.js.
   ========================================================================= */
.zz-toasts {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 300;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px;
    pointer-events: none;
}
.zz-toast {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    max-width: 440px;
    margin-top: 8px;
    padding: 12px 16px;
    /*!fb*/ border-radius: calc(12px + 2px);
    border-radius: calc(var(--zz-r) + 2px);
    /*!fb*/ background: #18232a;
    background: var(--zz-surface-3);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    font-weight: 500;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9);
    pointer-events: auto;
    opacity: 0;
    -webkit-transform: translateY(12px) scale(.98);
            transform: translateY(12px) scale(.98);
    /*!fb*/ transition: opacity 200ms cubic-bezier(.23, 1, .32, 1), transform 260ms cubic-bezier(.23, 1, .32, 1);
    transition: opacity var(--zz-d-2) var(--zz-ease-out),
                transform var(--zz-d-3) var(--zz-ease-out);
}
.zz-toast.is-in { opacity: 1; -webkit-transform: none; transform: none; }
/* Leaving is quicker than arriving: nobody waits for a thing to go away. */
.zz-toast.is-out {
    opacity: 0;
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
    /*!fb*/ transition: opacity 140ms ease-in, transform 140ms ease-in;
    transition: opacity var(--zz-d-1) ease-in, transform var(--zz-d-1) ease-in;
}
.zz-toast-dot {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 50%;
    background: rgba(61, 220, 132, .16);
    /*!fb*/ color: #3ddc84;
    color: var(--zz-live-ink);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.zz-toast-dot svg { width: 12px; height: 12px; }
.zz-toast.is-warn .zz-toast-dot { /*!fb*/ background: rgba(251, 98, 63, .12); background: var(--zz-ember-ghost); /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); }

/* =========================================================================
   THE TAB BAR — phones and tablets
   ========================================================================= */
.zz-tabbar { display: none; }

@media (max-width: 1023.98px) {
    [data-v2] .zz-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 150;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        /*!fb*/ height: 64px;
        height: var(--zz-tabbar-h);
        /*!fb*/ height: calc(64px + env(safe-area-inset-bottom));
        height: calc(var(--zz-tabbar-h) + env(safe-area-inset-bottom));
        padding-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
        /*!fb*/ background: rgba(8, 12, 15, .96);
        background: var(--zz-veil-2);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
                backdrop-filter: blur(20px) saturate(160%);
        /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
        border-top: 1px solid var(--zz-line);
    }

    /* Room at the bottom of the page for the bar, so the last row is never
       stranded underneath it. */
    [data-v2][data-tabbar] body {
        /*!fb*/ padding-bottom: 64px;
        padding-bottom: var(--zz-tabbar-h);
        /*!fb*/ padding-bottom: calc(64px + env(safe-area-inset-bottom));
        padding-bottom: calc(var(--zz-tabbar-h) + env(safe-area-inset-bottom));
    }

    /* The web footer belongs to a web page. In the app shell its links live in
       the Account tab instead. */
    [data-v2][data-tabbar] .zz-foot { display: none; }
}

.zz-tab {
    position: relative;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 6px 0 4px;
    border: 0;
    background: transparent;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
}
.zz-tab svg { width: 24px; height: 24px; margin-bottom: 3px; display: block; }
.zz-tab:active { -webkit-transform: scale(.94); transform: scale(.94); }
.zz-tab.is-on { /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
.zz-tab.is-on svg { /*!fb*/ color: #fb623f; color: var(--zz-ember); }
.zz-tab:focus { outline: none; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
.zz-tab:focus svg { /*!fb*/ color: #fb623f; color: var(--zz-ember); }

/* A television never shows the bar. It is wide, it has a pointer and a
   desktop layout, and a bar pinned to an overscanned bottom edge is off the
   picture on half the sets in the field. */
[data-tv] .zz-tabbar { display: none !important; }
[data-tv][data-tabbar] body { padding-bottom: 2.5vh; }

/* =========================================================================
   HOMEPAGE
   ========================================================================= */

.zz-finder,
.zz-sports-clock,
.zz-leagues-more { display: none; }

[data-v2] .zz-pempty {
    overflow: hidden;
    padding: 20px;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    background: radial-gradient(60% 75% at 50% 36%, rgba(251, 98, 63, .13), rgba(251, 98, 63, 0) 70%),
                linear-gradient(180deg, #10181d 0, #0a0f13 100%);
}
[data-v2] .zz-pempty-in {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    max-width: 440px;
    -webkit-animation: zz-pempty-in 420ms cubic-bezier(.23, 1, .32, 1) both;
            animation: zz-pempty-in 420ms cubic-bezier(.23, 1, .32, 1) both;
}
@-webkit-keyframes zz-pempty-in { from { opacity: 0; -webkit-transform: translateY(8px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes zz-pempty-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

[data-v2] .zz-pempty-art {
    position: relative;
    display: block;
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
}
[data-v2] .zz-pempty-art:before,
[data-v2] .zz-pempty-art:after {
    content: "";
    position: absolute;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, .06);
}
[data-v2] .zz-pempty-art:before { top: -12px; right: -12px; bottom: -12px; left: -12px; }
[data-v2] .zz-pempty-art:after { top: -26px; right: -26px; bottom: -26px; left: -26px; border-radius: 42px; border-color: rgba(255, 255, 255, .03); }
[data-v2] .zz-pempty-tile {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    color: #ffffff;
    background: linear-gradient(160deg, #26323a 0, #141c21 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
                inset 0 0 0 1px rgba(255, 255, 255, .06),
                0 18px 36px -14px rgba(0, 0, 0, .9),
                0 0 56px -12px rgba(251, 98, 63, .5);
}
[data-v2] .zz-pempty svg { opacity: 1; margin-bottom: 0; }
[data-v2] .zz-pempty-tile svg { display: block; width: 34px; height: 34px; }

[data-v2] .zz-pempty-t {
    margin: 0 0 6px;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-align: center;
}
[data-v2] .zz-pempty-x {
    margin: 0 0 20px;
    max-width: 32ch;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

[data-v2] .zz-pempty-acts {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    margin: -5px;
}
[data-v2] .zz-pempty-btn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    height: 42px;
    margin: 5px;
    padding: 0 18px;
    border-radius: 999px;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    background: rgba(255, 255, 255, .06);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: background-color 160ms ease, border-color 160ms ease, -webkit-transform 160ms cubic-bezier(.23, 1, .32, 1);
            transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
[data-v2] .zz-pempty-btn svg { display: block; width: 16px; height: 16px; margin-right: 8px; }
[data-v2] a.zz-pempty-btn { text-decoration: none; }
[data-v2] a.zz-pempty-btn.is-primary { /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
[data-v2]:not([data-auth="in"]) .zz-pempty-member { display: none; }
[data-v2][data-auth="in"] .zz-pempty-guest { display: none; }
[data-v2] .zz-pempty-btn.is-primary {
    border-color: transparent;
    /*!fb*/ background: #fb623f;
    background: var(--zz-cta);
    color: #ffffff;
    box-shadow: 0 10px 24px -10px rgba(251, 98, 63, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}
[data-v2] .zz-pempty-dot {
    display: block;
    width: 8px;
    height: 8px;
    margin-right: 9px;
    border-radius: 50%;
    /*!fb*/ background: #3ddc84;
    background: var(--zz-live);
    box-shadow: 0 0 8px 0 rgba(61, 220, 132, .7);
}
[data-v2] .zz-pempty-btn:hover { background: rgba(255, 255, 255, .11); /*!fb*/ border-color: rgba(255, 255, 255, .20); border-color: var(--zz-line-3); }
[data-v2] .zz-pempty-btn.is-primary:hover { /*!fb*/ background: #da4819; background: var(--zz-cta-hi); border-color: transparent; }
[data-v2] .zz-pempty-btn:active { -webkit-transform: scale(.96); transform: scale(.96); }
[data-v2] .zz-pempty-btn:focus { outline: none; box-shadow: 0 0 0 3px #ffffff; }
[data-remote] .zz-pempty-btn:focus { /*!fb*/ background: rgba(251, 98, 63, .12); background: var(--zz-ember-ghost); /*!fb*/ border-color: #fb623f; border-color: var(--zz-ember); /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
[data-remote] .zz-pempty-btn.is-primary:focus { /*!fb*/ background: #fb623f; background: var(--zz-cta); border-color: transparent; }

@media (max-width: 1023.98px) {
    [data-v2] .zz-pempty { padding: 14px; }
    [data-v2] .zz-pempty-art { width: 58px; height: 58px; margin-bottom: 14px; }
    [data-v2] .zz-pempty-art:before { top: -9px; right: -9px; bottom: -9px; left: -9px; border-radius: 24px; }
    [data-v2] .zz-pempty-art:after { display: none; }
    [data-v2] .zz-pempty-tile { width: 58px; height: 58px; border-radius: 17px; }
    [data-v2] .zz-pempty-tile svg { width: 28px; height: 28px; }
    [data-v2] .zz-pempty-t { margin-bottom: 4px; font-size: 18px; }
    [data-v2] .zz-pempty-x { margin-bottom: 14px; font-size: 13px; }
    [data-v2] .zz-pempty-btn { height: 38px; margin: 4px; padding: 0 15px; font-size: 13px; }
    [data-v2] .zz-pempty-acts { margin: -4px; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
    [data-v2] .zz-pempty-art { width: 70px; height: 70px; margin-bottom: 18px; }
    [data-v2] .zz-pempty-art:before { top: -11px; right: -11px; bottom: -11px; left: -11px; border-radius: 28px; }
    [data-v2] .zz-pempty-tile { width: 70px; height: 70px; border-radius: 20px; }
    [data-v2] .zz-pempty-t { font-size: 21px; }
    [data-v2] .zz-pempty-x { font-size: 14px; margin-bottom: 18px; }
    [data-v2] .zz-pempty-btn { height: 42px; padding: 0 18px; font-size: 14px; }
}
@media (max-width: 359.98px) {
    [data-v2] .zz-pempty-x { display: none; }
    [data-v2] .zz-pempty-t { margin-bottom: 12px; }
}

[data-tv] .zz-pempty-art { width: 100px; height: 100px; margin-bottom: 28px; }
[data-tv] .zz-pempty-art:before { top: -16px; right: -16px; bottom: -16px; left: -16px; border-radius: 40px; }
[data-tv] .zz-pempty-art:after { top: -34px; right: -34px; bottom: -34px; left: -34px; border-radius: 54px; }
[data-tv] .zz-pempty-tile { width: 100px; height: 100px; border-radius: 28px; }
[data-tv] .zz-pempty-tile svg { width: 46px; height: 46px; }
[data-tv] .zz-pempty-in { max-width: 640px; }
[data-tv] .zz-pempty-t { margin-bottom: 10px; font-size: 32px; }
[data-tv] .zz-pempty-x { margin-bottom: 28px; font-size: 19px; }
[data-tv] .zz-pempty-btn { height: 58px; margin: 8px; padding: 0 28px; font-size: 19px; }
[data-tv] .zz-pempty-btn svg { width: 22px; height: 22px; margin-right: 10px; }
[data-tv] .zz-pempty-dot { width: 11px; height: 11px; margin-right: 12px; }
[data-tv] .zz-pempty-acts { margin: -8px; }
[data-tv] .zz-pempty-btn:hover { box-shadow: 0 0 0 4px #ffffff; }
[data-tv] .zz-pempty-btn:focus { box-shadow: 0 0 0 4px #ffffff; }

@media (prefers-reduced-motion: reduce) {
    [data-v2] .zz-pempty-in { -webkit-animation: none; animation: none; }
}

/* The league strip says when there is more of it, in the direction there is. */
[data-v2] .zz-leagues-more {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background-color: rgba(28, 38, 46, .62);
    background-image: radial-gradient(circle at 30% 18%, rgba(255, 214, 168, .42), rgba(255, 214, 168, 0) 58%),
                      linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 55%, rgba(251, 98, 63, .16));
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 6px 18px -6px rgba(0, 0, 0, .7), 0 0 18px -6px rgba(251, 140, 63, .6);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
            backdrop-filter: blur(10px) saturate(160%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: -webkit-transform 160ms cubic-bezier(.23, 1, .32, 1), box-shadow 160ms ease, border-color 160ms ease;
            transition: transform 160ms cubic-bezier(.23, 1, .32, 1), box-shadow 160ms ease, border-color 160ms ease;
}
[data-v2] .zz-leagues-more svg { display: block; width: 15px; height: 15px; -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
[data-v2] .zz-leagues-more:hover {
    border-color: rgba(255, 220, 190, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px -6px rgba(0, 0, 0, .7), 0 0 22px -4px rgba(251, 140, 63, .8);
}
[data-v2] .zz-leagues-more:active { -webkit-transform: scale(.9); transform: scale(.9); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    [data-v2] .zz-leagues-more { background-color: rgba(28, 38, 46, .94); }
}
[data-v2] .zz-leagues-more-l { left: 0; }
[data-v2] .zz-leagues-more-r { right: 0; }
[data-v2] .zz-leagues.has-more-l .zz-leagues-more-l,
[data-v2] .zz-leagues.has-more-r .zz-leagues-more-r {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
[data-v2] .zz-leagues-scroll.is-dragging { cursor: -webkit-grabbing; cursor: grabbing; }
[data-v2] .zz-leagues-scroll.is-dragging .zz-league { pointer-events: none; }
[data-tv] .zz-leagues-more { display: none !important; }

[data-v2] .zz-leagues.is-hint::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1.5px rgba(251, 98, 63, .7), inset 0 0 24px rgba(251, 140, 63, .22), 0 0 22px -6px rgba(251, 98, 63, .6);
    pointer-events: none;
    opacity: 0;
    -webkit-animation: zz-hint-glow 1500ms ease-in-out 3 both;
            animation: zz-hint-glow 1500ms ease-in-out 3 both;
}
@-webkit-keyframes zz-hint-glow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes zz-hint-glow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
[data-v2] .zz-leagues-tip {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 6;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 8px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background-color: rgba(28, 38, 46, .78);
    background-image: radial-gradient(circle at 20% 0%, rgba(255, 214, 168, .3), rgba(255, 214, 168, 0) 60%),
                      linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 26px -10px rgba(0, 0, 0, .8);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
            backdrop-filter: blur(12px) saturate(160%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-animation: zz-tip-in 280ms cubic-bezier(.23, 1, .32, 1) both;
            animation: zz-tip-in 280ms cubic-bezier(.23, 1, .32, 1) both;
}
[data-v2] .zz-leagues-tip svg { display: block; margin-right: 6px; /*!fb*/ color: #fb623f; color: var(--zz-ember); }
[data-v2] .zz-leagues-tip.is-out {
    opacity: 0;
    -webkit-transition: opacity 240ms ease;
            transition: opacity 240ms ease;
}
@-webkit-keyframes zz-tip-in { from { opacity: 0; -webkit-transform: translate(-50%, -4px); } to { opacity: 1; -webkit-transform: translate(-50%, 0); } }
@keyframes zz-tip-in { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
    [data-v2] .zz-leagues.is-hint::after { -webkit-animation: none; animation: none; opacity: 1; }
    [data-v2] .zz-leagues-tip { -webkit-animation: none; animation: none; }
}

@media (max-width: 1023.98px) {
    /* CHANNELS: the stream pinned at the top, the line-up under it, and the
       page itself scrolls - one scroll, not a box scrolling inside a page. */
    [data-v2][data-home]:not([data-tv]) .zz-head-nav-row { display: none; }
    [data-v2][data-home]:not([data-tv]) .zz-scroll { max-height: none; overflow: visible; }
    /* Every list keeps its search box on a phone too: channels by name, a
       league or Live by team. */
    [data-v2][data-home]:not([data-tv]) .zz-rail .zz-search { padding: 4px 0 8px; }
    [data-v2][data-home]:not([data-tv]) .zz-panel {
        /*!fb*/ border-radius: 16px;
        border-radius: var(--zz-r-lg);
        background: transparent;
        border: 0;
        overflow: visible;
    }
    [data-v2][data-home]:not([data-tv]) .zz-panel-head { padding: 16px 4px 8px; border-bottom: 0; }
    [data-v2][data-home]:not([data-tv]) .zz-panel .zz-scroll { padding: 0; background: transparent; }
    [data-v2][data-home]:not([data-tv]) .zz-railbar { display: none !important; }

    /* SPORTS: the league strip and the timezone, the schedule under them. */
    [data-v2][data-home][data-view="sports"]:not([data-tv]) .zz-head-nav-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
    }
    [data-v2][data-home][data-view="sports"] .zz-league:first-child { display: none; }
    [data-v2][data-home][data-view="sports"] .zz-sports-clock {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-left: 8px;
    }
    [data-v2] .zz-sports-clock ul { right: 0; }
    [data-v2] .zz-layout > .zz-head-nav-row {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    [data-v2][data-home]:not([data-tv]) .zz-layout > .zz-head-nav-row {
        position: -webkit-sticky;
        position: sticky;
        top: 72px;
        /*!fb*/ top: calc(72px + 0px);
        top: calc(var(--zz-headbox, 72px) + var(--zz-playerbox, 0px));
        z-index: 59;
        /*!fb*/ margin-left: calc(24px * -1);
        margin-left: calc(var(--zz-gutter) * -1);
        /*!fb*/ margin-right: calc(24px * -1);
        margin-right: calc(var(--zz-gutter) * -1);
        /*!fb*/ padding: 0 24px 8px;
        padding: 0 var(--zz-gutter) 8px;
        /*!fb*/ background: #080c0f;
        background: var(--zz-canvas);
    }
    [data-v2][data-home]:not([data-tv]) .zz-head,
    [data-v2][data-home]:not([data-tv]) .zz-player,
    [data-v2][data-home]:not([data-tv]) .zz-layout > .zz-head-nav-row,
    [data-v2][data-home]:not([data-tv]) .zz-tabbar {
        -webkit-transition: -webkit-transform 240ms cubic-bezier(.2, .8, .2, 1);
                transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
    }
    [data-v2][data-home][data-headaway]:not([data-tv]) .zz-head {
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
        -webkit-transform: translateY(calc(-100% - 16px));
                transform: translateY(calc(-100% - 16px));
    }
    [data-v2][data-home][data-headaway]:not([data-tv]):not([data-dock="mini"]) .zz-player,
    [data-v2][data-home][data-headaway]:not([data-tv]) .zz-layout > .zz-head-nav-row {
        -webkit-transform: translateY(-72px);
                transform: translateY(-72px);
        /*!fb*/ -webkit-transform: translateY(calc(72px * -1));
        -webkit-transform: translateY(calc(var(--zz-headbox, 72px) * -1));
                /*!fb*/ transform: translateY(calc(72px * -1));
                transform: translateY(calc(var(--zz-headbox, 72px) * -1));
        /*!fb*/ -webkit-transform: translateY(calc(env(safe-area-inset-top, 0px) - 72px));
        -webkit-transform: translateY(calc(env(safe-area-inset-top, 0px) - var(--zz-headbox, 72px)));
                /*!fb*/ transform: translateY(calc(env(safe-area-inset-top, 0px) - 72px));
                transform: translateY(calc(env(safe-area-inset-top, 0px) - var(--zz-headbox, 72px)));
    }
    [data-v2][data-home]:not([data-tv]) .zz-tabbar {
        -webkit-transition: -webkit-transform 160ms cubic-bezier(.23, 1, .32, 1);
                transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
    }
    [data-v2][data-home][data-tabaway]:not([data-tv]) .zz-tabbar {
        -webkit-transition: -webkit-transform 260ms cubic-bezier(.2, .8, .2, 1);
                transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }
    [data-v2] .zz-layout > .zz-head-nav-row > .zz-leagues {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        /*!fb*/ background: #0d1317;
        background: var(--zz-surface-1);
    }

    /* Nothing playing: no player at all outside the Channels tab. */
    [data-v2][data-home][data-view="sports"]:not([data-playing]) .zz-player,
    [data-v2][data-home][data-view="search"]:not([data-playing]) .zz-player { display: none; }

    /* SEARCH */
    [data-v2][data-home][data-view="search"] .zz-rail { display: none; }
    [data-v2][data-home][data-view="search"] .zz-finder { display: block; }

    /* THE MINI PLAYER. The same iframe, moved by CSS alone, so the stream never
       reloads: a 16:9 window at the left, what is playing beside it, above the
       tab bar. The embed draws a feed strip above its video; the frame is made
       that much taller and pulled up so only the picture shows. */
    [data-v2][data-home][data-dock="mini"]:not([data-tv]) .zz-player {
        position: fixed;
        top: auto;
        left: 8px;
        right: 8px;
        /*!fb*/ bottom: calc(64px + 8px);
        bottom: calc(var(--zz-tabbar-h) + 8px);
        /*!fb*/ bottom: calc(64px + 8px + env(safe-area-inset-bottom));
        bottom: calc(var(--zz-tabbar-h) + 8px + env(safe-area-inset-bottom));
        z-index: 140;
        margin: 0;
        padding: 0;
        /*!fb*/ height: 64px;
        height: var(--zz-mini-h);
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: stretch;
        align-items: stretch;
        overflow: hidden;
        /*!fb*/ border-radius: calc(12px + 2px);
        border-radius: calc(var(--zz-r) + 2px);
        /*!fb*/ background: #18232a;
        background: var(--zz-surface-3);
        /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
        border: 1px solid var(--zz-line-2);
        box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .9);
        cursor: pointer;
        -webkit-animation: zz-rise 260ms cubic-bezier(.23, 1, .32, 1) both;
                animation: zz-rise 260ms cubic-bezier(.23, 1, .32, 1) both;
    }
    [data-v2][data-home][data-dock="mini"]:not([data-tv]) .zz-player-frame {
        -webkit-flex: 0 0 114px;
        flex: 0 0 114px;
        width: 114px;
        /*!fb*/ height: 64px;
        height: var(--zz-mini-h);
        padding-bottom: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    [data-v2][data-home][data-dock="mini"]:not([data-tv]) .zz-player-frame iframe {
        bottom: auto;
        /*!fb*/ top: calc(48px * -1);
        top: calc(var(--zz-player-strip) * -1);
        /*!fb*/ height: calc(64px + 48px);
        height: calc(var(--zz-mini-h) + var(--zz-player-strip));
        pointer-events: none;
    }
    [data-v2][data-home][data-dock="mini"]:not([data-tv]) .zz-player-skel,
    [data-v2][data-home][data-dock="mini"]:not([data-tv]) .zz-player-idle { display: none; }
    [data-v2][data-home][data-dock="mini"]:not([data-tv]) .zz-player-bar {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        padding: 0 4px 0 12px;
        background: transparent;
        border: 0;
    }
    [data-v2][data-home][data-dock="mini"]:not([data-tv]) .zz-player-title {
        /*!fb*/ font-size: 14px;
        font-size: var(--zz-t-base);
    }
    [data-v2][data-home][data-dock="mini"]:not([data-tv]) .zz-player-close {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
    }
    [data-v2][data-home][data-dock="mini"] body {
        /*!fb*/ padding-bottom: calc(64px + 80px);
        padding-bottom: calc(var(--zz-tabbar-h) + 80px);
        /*!fb*/ padding-bottom: calc(64px + 80px + env(safe-area-inset-bottom));
        padding-bottom: calc(var(--zz-tabbar-h) + 80px + env(safe-area-inset-bottom));
    }
}

/* SEARCH - the box and its answers. */
[data-v2] .zz-finder { /*!fb*/ padding: 8px 0 24px; padding: var(--zz-s-2) 0 var(--zz-s-5); }
[data-v2] .zz-finder-box {
    position: -webkit-sticky;
    position: sticky;
    /*!fb*/ top: 64px;
    top: var(--zz-header-h);
    z-index: 5;
    /*!fb*/ padding: 8px 0 12px;
    padding: var(--zz-s-2) 0 var(--zz-s-3);
    /*!fb*/ background: #080c0f;
    background: var(--zz-canvas);
}
[data-v2] .zz-finder-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
[data-v2] .zz-finder-box input { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
[data-v2] .zz-finder-box svg {
    position: relative;
    z-index: 1;
    -webkit-flex: 0 0 18px;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0 -32px 0 14px;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    pointer-events: none;
}
[data-v2] .zz-finder-box input {
    width: 100%;
    height: 46px;
    padding: 0 44px 0 42px;
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}
[data-v2] .zz-finder-box input:focus {
    outline: none;
    /*!fb*/ border-color: #fb623f;
    border-color: var(--zz-ember);
    /*!fb*/ box-shadow: 0 0 0 4px rgba(251, 98, 63, .12);
    box-shadow: 0 0 0 4px var(--zz-ember-ghost);
}
[data-v2] .zz-finder-box input::-webkit-search-cancel-button { display: none; }
[data-v2] .zz-finder-clear {
    position: relative;
    z-index: 1;
    -webkit-flex: 0 0 32px;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 0 8px 0 -40px;
    border: 0;
    border-radius: 50%;
    /*!fb*/ background: rgba(255, 255, 255, .07);
    background: var(--zz-fill-3);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
[data-v2] .zz-finder-clear[hidden] { display: none !important; }
[data-v2] .zz-finder-h {
    /*!fb*/ margin: 16px 4px 6px;
    margin: var(--zz-s-4) var(--zz-s-1) 6px;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
[data-v2] .zz-finder-list > * + * { margin-top: 2px; }
[data-v2] .zz-finder-results:focus { outline: none; }
[data-v2] .zz-finder .zz-empty { min-height: 0; padding-top: 32px; }


/* =========================================================================
   PLANS
   ========================================================================= */
[data-v2] .zz-plans-page { /*!fb*/ padding: 32px 0 48px; padding: var(--zz-s-6) 0 var(--zz-s-7); }
[data-v2] .zz-plans-hero { text-align: center; /*!fb*/ margin-bottom: 32px; margin-bottom: var(--zz-s-6); }
[data-v2] .zz-plans-h {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.1;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
}
@media (min-width: 1024px) { [data-v2] .zz-plans-h { font-size: 44px; } }
[data-v2] .zz-plans-lede { margin: 10px 0 0; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); }

/* Weekly - ANNUAL - Monthly on a wide screen. Annual first on a phone. The DOM
   is hero-first, so keyboards and screen readers meet the best offer first,
   and `order` arranges them - flexbox, so every set can do it. */
[data-v2] .zz-plan-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    max-width: 1040px;
    margin: 0 auto;
}
[data-v2] .zz-plan {
    position: relative;
    /*!fb*/ margin-bottom: 16px;
    margin-bottom: var(--zz-s-4);
    /*!fb*/ padding: 24px 22px 22px;
    padding: var(--zz-s-5) 22px 22px;
    /*!fb*/ border-radius: 20px;
    border-radius: var(--zz-r-xl);
    /*!fb*/ background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 140px), #0d1317;
    background: linear-gradient(180deg, var(--zz-fill-1), rgba(255, 255, 255, 0) 140px), var(--zz-surface-1);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ transition: transform 260ms cubic-bezier(.23, 1, .32, 1), border-color 140ms cubic-bezier(.23, 1, .32, 1);
    transition: transform var(--zz-d-3) var(--zz-ease-out), border-color var(--zz-d-1) var(--zz-ease-out);
}
[data-v2] .zz-plan.is-hero {
    /*!fb*/ border-color: #fb623f;
    border-color: var(--zz-ember);
    /*!fb*/ background: radial-gradient(500px 260px at 50% 0, rgba(251, 98, 63, .16), rgba(251, 98, 63, 0) 70%), #0d1317;
    background: radial-gradient(500px 260px at 50% 0, rgba(251, 98, 63, .16), rgba(251, 98, 63, 0) 70%), var(--zz-surface-1);
    box-shadow: 0 30px 80px -40px rgba(251, 98, 63, .45);
}
@media (min-width: 900px) {
    [data-v2] .zz-plan-row {
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-align-items: center;
        align-items: center;
    }
    [data-v2] .zz-plan { -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; margin-bottom: 0; }
    [data-v2] .zz-plan-weekly  { -webkit-order: 1; order: 1; }
    [data-v2] .zz-plan-annual  { -webkit-order: 2; order: 2; }
    [data-v2] .zz-plan-monthly { -webkit-order: 3; order: 3; }
    [data-v2] .zz-plan + .zz-plan { margin-left: 0; }
    [data-v2] .zz-plan-annual { margin-left: 16px; margin-right: 16px; }
    /* The hero stands taller than its neighbours. */
    [data-v2] .zz-plan.is-hero { padding-top: 40px; padding-bottom: 32px; }
}
@media (hover: hover) and (pointer: fine) {
    [data-v2] .zz-plan:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
}

[data-v2] .zz-plan-flag {
    position: absolute;
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 999px;
    /*!fb*/ background: #fb623f;
    background: var(--zz-cta);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 6px 20px -6px rgba(251, 98, 63, .8);
}
[data-v2] .zz-plan-t {
    margin: 0;
    /*!fb*/ font-size: 20px;
    font-size: var(--zz-t-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
}
[data-v2] .zz-plan-sub { margin: 2px 0 16px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); }

/* One-time / Auto-renew. */
[data-v2] .zz-mode {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-bottom: 14px;
    padding: 3px;
    border-radius: 11px;
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
}
[data-v2] .zz-mode-opt { -webkit-flex: 1 1 0; flex: 1 1 0; position: relative; cursor: pointer; }
[data-v2] .zz-mode-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
[data-v2] .zz-mode-opt span {
    display: block;
    padding: 8px 6px;
    border-radius: 8px;
    text-align: center;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-size: 13px;
    font-weight: 600;
    /*!fb*/ transition: background-color 140ms cubic-bezier(.23, 1, .32, 1), color 140ms cubic-bezier(.23, 1, .32, 1);
    transition: background-color var(--zz-d-1) var(--zz-ease-out), color var(--zz-d-1) var(--zz-ease-out);
}
[data-v2] .zz-mode-opt input:checked + span {
    /*!fb*/ background: #18232a;
    background: var(--zz-surface-3);
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
[data-v2] .zz-mode-opt input:focus + span { box-shadow: 0 0 0 2px #fb623f; }
[data-tv] .zz-mode-opt:hover span { box-shadow: 0 0 0 3px #fb623f; color: #ffffff; }

[data-v2] .zz-plan-amt {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
[data-v2] .zz-plan-amt b {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -.035em;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
}
[data-v2] .zz-plan-was { margin-right: 8px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 18px; }
[data-v2] .zz-plan-save {
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(61, 220, 132, .14);
    /*!fb*/ color: #3ddc84;
    color: var(--zz-live-ink);
    font-size: 12px;
    font-weight: 700;
}
[data-v2] .zz-plan-note { margin: 4px 0 18px; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); }
[data-v2] .zz-plan-go { margin-top: 0; }
/* Only the hero wears the orange fill; the others are quieter, so the eye
   lands where the value is. */
[data-v2] .zz-plan-go.is-quiet {
    /*!fb*/ background: rgba(255, 255, 255, .07);
    background: var(--zz-fill-3);
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
[data-v2] .zz-plan-go.is-quiet:hover { /*!fb*/ background: rgba(255, 255, 255, .18); background: var(--zz-fill-4); }
[data-tv] .zz-plan:hover { /*!fb*/ border-color: #fb623f; border-color: var(--zz-ember); box-shadow: 0 0 0 3px rgba(251, 98, 63, .35); }
[data-tv] .zz-plan-go:hover { outline: 3px solid #ffffff; outline-offset: 2px; }

[data-v2] .zz-plans-trust {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    /*!fb*/ margin: 32px auto 8px;
    margin: var(--zz-s-6) auto var(--zz-s-2);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-size: 13px;
}
[data-v2] .zz-plans-trust > * { margin: 6px 12px; }
[data-v2] .zz-plans-secure svg { vertical-align: -3px; margin-right: 4px; }
[data-v2] .zz-mark {
    display: inline-block;
    margin: 2px 3px;
    padding: 3px 8px;
    border-radius: 6px;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
[data-v2] .zz-plans-fine { text-align: center; margin: 0 0 48px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 13px; }

/* WHY ZUZZ - alive, not a modal. */
[data-v2] .zz-why { max-width: 1040px; margin: 0 auto; /*!fb*/ padding: 48px 0 24px; padding: var(--zz-s-7) 0 var(--zz-s-5); text-align: center; }
[data-v2] .zz-why-eyebrow { margin: 0 0 8px; /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
[data-v2] .zz-why-h { margin: 0 auto 32px; max-width: 720px; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
@media (min-width: 1024px) { [data-v2] .zz-why-h { font-size: 36px; } }
[data-v2] .zz-why-tiles {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -6px 24px;
    text-align: left;
}
[data-v2] .zz-why-tile {
    -webkit-flex: 1 1 220px;
    flex: 1 1 220px;
    margin: 6px;
    padding: 18px;
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
}
[data-v2] .zz-why-tile b { display: block; margin-top: 12px; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); }
[data-v2] .zz-why-tile span { display: block; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); font-size: 13px; }
[data-v2] .zz-why-ico {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
}
[data-v2] .zz-cmp-wrap {
    overflow-x: auto;
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
}
[data-v2] .zz-cmp-wrap:focus { outline: none; }
[data-v2] .zz-cmp-wrap:focus-visible { outline: 2px solid #fb623f; outline-offset: 2px; }
[data-remote] .zz-cmp-wrap:focus { outline: 2px solid #fb623f; outline-offset: 2px; }
[data-v2] .zz-cmp-wrap .zz-cmp-table { min-width: 560px; }

/* The reveal: armed only by the script, so without it everything is visible. */
[data-v2] .zz-reveal.is-armed {
    opacity: 0;
    -webkit-transform: translateY(14px);
            transform: translateY(14px);
    /*!fb*/ transition: opacity 260ms cubic-bezier(.23, 1, .32, 1), transform 260ms cubic-bezier(.23, 1, .32, 1);
    transition: opacity var(--zz-d-3) var(--zz-ease-out), transform var(--zz-d-3) var(--zz-ease-out);
}
[data-v2] .zz-reveal.is-armed.is-in { opacity: 1; -webkit-transform: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-v2] .zz-reveal.is-armed { -webkit-transform: none; transform: none; }
}

/* FAQ - native <details>: no script, and a remote can open it. */
[data-v2] .zz-faq { max-width: 760px; margin: 0 auto; /*!fb*/ padding: 24px 0 0; padding: var(--zz-s-5) 0 0; }
[data-v2] .zz-faq-h { margin: 0 0 16px; font-size: 24px; font-weight: 700; letter-spacing: -.025em; text-align: center; }
[data-v2] .zz-faq-q {
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
}
[data-v2] .zz-faq-q summary {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    min-height: 56px;
    padding: 12px 4px;
    list-style: none;
    cursor: pointer;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ font-size: 16px;
    font-size: var(--zz-t-md);
    font-weight: 500;
}
[data-v2] .zz-faq-q summary::-webkit-details-marker { display: none; }
[data-v2] .zz-faq-q summary svg {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 12px;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ transition: transform 200ms cubic-bezier(.23, 1, .32, 1);
    transition: transform var(--zz-d-2) var(--zz-ease-out);
}
[data-v2] .zz-faq-q[open] summary svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
[data-v2] .zz-faq-q summary:focus { outline: 2px solid #fb623f; outline-offset: 2px; }
[data-v2] .zz-faq-q summary:hover { /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
[data-v2] .zz-faq-q p { margin: 0 4px 16px; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); line-height: 1.6; }
[data-v2] .zz-faq-more { text-align: center; /*!fb*/ margin: 24px 0 0; margin: var(--zz-s-5) 0 0; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }
[data-v2] .zz-faq-more a { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); font-weight: 600; }

/* =========================================================================
   FAQ, PRIVACY, TERMS
   A reading page: one column at a comfortable measure, headings that can be
   scanned, and body text a size larger than the rest of the site.
   ========================================================================= */
[data-v2] .zz-legal { max-width: 760px; margin: 0 auto; /*!fb*/ padding: 24px 0 48px; padding: var(--zz-s-5) 0 var(--zz-s-7); }
[data-v2] .zz-legal-h {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.03em;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
}
[data-v2] .zz-legal-sec + .zz-legal-sec { margin-top: 28px; }
[data-v2] .zz-legal-sec h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.015em;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
}
[data-v2] .zz-legal-sec p {
    margin: 0;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-size: 15px;
    line-height: 1.7;
}
[data-v2] .zz-legal a { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); text-decoration: underline; }
[data-v2] .zz-faq-page { max-width: none; padding-top: 0; }
[data-tv] .zz-legal-sec p { font-size: 19px; }

/* =========================================================================
   ACCOUNT
   ========================================================================= */

/* One markup, two arrangements, switched at the one breakpoint the site has. */
@media (max-width: 1023.98px) { [data-v2] .zz-only-wide { display: none !important; } }
@media (min-width: 1024px)    { [data-v2] .zz-only-narrow { display: none !important; } }

[data-v2] .zz-acc { /*!fb*/ padding: 24px 0 48px; padding: var(--zz-s-5) 0 var(--zz-s-7); }
[data-v2] .zz-acc-title {
    /*!fb*/ font-size: 26px;
    font-size: var(--zz-t-xl);
    letter-spacing: -.03em;
}
@media (max-width: 1023.98px) {
    /* The large title an iOS app opens each screen with. */
    [data-v2] .zz-acc { padding-top: 8px; }
    [data-v2] .zz-acc-title { font-size: 32px; line-height: 1.1; }
    [data-v2] .zz-acc-head { margin-bottom: 16px; }
}
[data-v2] .zz-acc-tabs { border-bottom-color: rgba(255, 255, 255, .07); }

/* "< Account" - the way back from a section, where a thumb expects it. */
[data-v2] .zz-navback {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    min-height: 44px;
    margin: 0 0 4px -6px;
    padding: 0 8px 0 2px;
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
    /*!fb*/ font-size: 16px;
    font-size: var(--zz-t-md);
    font-weight: 500;
    border-radius: 10px;
}
[data-v2] .zz-navback svg { margin-right: 2px; }
[data-v2] .zz-navback:hover { /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); }

/* The subscription card at the top of the phone list. */
[data-v2] .zz-subcard {
    /*!fb*/ margin-bottom: 24px;
    margin-bottom: var(--zz-s-5);
    padding: 20px;
    /*!fb*/ border-radius: 20px;
    border-radius: var(--zz-r-xl);
    /*!fb*/ background: radial-gradient(420px 200px at 100% 0, rgba(251, 98, 63, .10), rgba(251, 98, 63, 0) 70%), #0d1317;
    background: radial-gradient(420px 200px at 100% 0, rgba(251, 98, 63, .10), rgba(251, 98, 63, 0) 70%), var(--zz-surface-1);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
}
[data-v2] .zz-subcard.is-lapsed { /*!fb*/ border-color: rgba(251, 98, 63, .35); border-color: var(--zz-ember-line); }
[data-v2] .zz-subcard-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
[data-v2] .zz-subcard-top > div { min-width: 0; margin-right: 12px; }
[data-v2] .zz-subcard .zz-hub-plan { margin-bottom: 8px; }
[data-v2] .zz-subcard .zz-hub-when { margin-bottom: 4px; }
[data-v2] .zz-subcard-acts {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    /*!fb*/ margin-top: 16px;
    margin-top: var(--zz-s-4);
}
[data-v2] .zz-subcard-acts > * {
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    -webkit-justify-content: center;
    justify-content: center;
}
[data-v2] .zz-subcard-acts > * + * { margin-left: 10px; }
[data-v2] .zz-renew-off { margin: 10px auto 0; display: block; }

/* "Charged as ZUZ UPGRADE AI · PayPal" - small, and still legible. */
[data-v2] .zz-stmt-line {
    display: block;
    margin: 12px 0 18px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    line-height: 1.45;
}
[data-v2] .zz-stmt-line svg { display: inline-block; vertical-align: -3px; margin-right: 6px; color: #9aa7b0; }
[data-v2] .zz-stmt-line b { color: #f3f6f8; font-weight: 600; letter-spacing: .02em; }

/* THE GROUPED LIST. Rows sit on one rounded surface with hairlines between
   them, the pattern every iOS settings screen has taught people to read. */
[data-v2] .zz-group-h {
    /*!fb*/ margin: 24px 16px 8px;
    margin: var(--zz-s-5) var(--zz-s-4) var(--zz-s-2);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
[data-v2] .zz-group {
    /*!fb*/ margin-bottom: 16px;
    margin-bottom: var(--zz-s-4);
    overflow: hidden;
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
}
[data-v2] .zz-row {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    min-height: 56px;
    padding: 10px 14px 10px 16px;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    text-decoration: none;
}
[data-v2] .zz-row + .zz-row::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 60px;
    height: 1px;
    /*!fb*/ background: rgba(255, 255, 255, .07);
    background: var(--zz-line);
}
[data-v2] .zz-row:active { /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-fill-3); }
@media (hover: hover) and (pointer: fine) {
    [data-v2] .zz-row:hover { /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); }
}
[data-v2] .zz-row:focus { outline: none; /*!fb*/ background: rgba(251, 98, 63, .12); background: var(--zz-ember-ghost); }
[data-v2] .zz-row-ico {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-right: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 8px;
    /*!fb*/ background: rgba(255, 255, 255, .07);
    background: var(--zz-fill-3);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
}
[data-v2] .zz-row-main { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
[data-v2] .zz-row-main b { display: block; font-weight: 500; /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); letter-spacing: -.01em; }
[data-v2] .zz-row-main small { display: block; margin-top: 1px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 13px; }
[data-v2] .zz-row-chev { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 8px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); opacity: .7; }
[data-v2] .zz-row-chev svg { display: block; }
[data-v2] .zz-row-badge {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
[data-v2] .zz-row-count { -webkit-flex: 0 0 auto; flex: 0 0 auto; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 14px; }
[data-v2] .zz-row-out { -webkit-justify-content: center; justify-content: center; }
[data-v2] .zz-row-out .zz-row-main { text-align: center; }
[data-v2] .zz-row-out b { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); font-weight: 600; }
[data-v2] .zz-group[hidden] { display: none !important; }

/* Payments on a phone: one row per payment. */
[data-v2] .zz-pay-list { list-style: none; margin: 0; padding: 0; }
[data-v2] .zz-pay-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    /*!fb*/ padding: 12px 0;
    padding: var(--zz-s-3) 0;
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
}
[data-v2] .zz-pay-row:last-child { border-bottom: 0; }
[data-v2] .zz-pay-main { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin-right: 12px; }
[data-v2] .zz-pay-main b { display: block; /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); font-weight: 600; }
[data-v2] .zz-pay-main small { display: block; margin-top: 2px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 13px; }
[data-v2] .zz-pay-main .zz-stmt { /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); }
[data-v2] .zz-pay-ref { -webkit-flex: 0 0 auto; flex: 0 0 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

/* Televisions: the account rows are pointer targets from across a room. */
[data-tv] .zz-row { min-height: 72px; }
[data-tv] .zz-row:hover { /*!fb*/ background: rgba(251, 98, 63, .12); background: var(--zz-ember-ghost); }

/* =========================================================================
   INSTALL THE APP
   ========================================================================= */
.zz-install {
    position: fixed;
    left: 12px;
    right: 12px;
    z-index: 160;
    /*!fb*/ bottom: calc(64px + 12px);
    bottom: calc(var(--zz-tabbar-h) + 12px);
    /*!fb*/ bottom: calc(64px + 12px + env(safe-area-inset-bottom));
    bottom: calc(var(--zz-tabbar-h) + 12px + env(safe-area-inset-bottom));
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 12px 12px 14px;
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ background: #18232a;
    background: var(--zz-surface-3);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
    opacity: 0;
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
    /*!fb*/ transition: opacity 260ms cubic-bezier(.23, 1, .32, 1), transform 260ms cubic-bezier(.23, 1, .32, 1);
    transition: opacity var(--zz-d-3) var(--zz-ease-out),
                transform var(--zz-d-3) var(--zz-ease-out);
}
.zz-install.is-in { opacity: 1; -webkit-transform: none; transform: none; }
.zz-install-ico {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: 12px;
    border-radius: 11px;
    overflow: hidden;
}
.zz-install-ico img { width: 44px; height: 44px; }
.zz-install-main { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.zz-install-main b { display: block; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.zz-install-main small { display: block; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); font-size: 13px; line-height: 1.35; }
.zz-install-main small svg { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; }
.zz-install .zz-btn-cta { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 10px; min-height: 36px; padding: 0 14px; }
.zz-install-x {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-left: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    cursor: pointer;
}
.zz-install-x:hover { /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
.zz-install-x:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); }
@media (min-width: 1024px) { .zz-install { bottom: 24px; right: 24px; left: auto; width: 420px; } }
[data-tv] .zz-install { display: none !important; }

/* The quiet "Install app" item in the desktop header and account menu. Hidden
   until the browser says installing is possible. */
[data-v2] .zz-install-link[hidden] { display: none !important; }

/* =========================================================================
   THE BELL AND THE "WATCHING SOMEWHERE ELSE" POP-UP
   Both are drawn by their own scripts; the app shell only changes how they
   look and arrive.
   ========================================================================= */
[data-v2] .zz-note {
    /*!fb*/ border-radius: 20px;
    border-radius: var(--zz-r-xl);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .04);
    -webkit-transform-origin: 90% 0;
            transform-origin: 90% 0;
}
[data-v2] .zz-note:not([hidden]) {
    -webkit-animation: zz-drop 200ms cubic-bezier(.23, 1, .32, 1) both;
            animation: zz-drop 200ms cubic-bezier(.23, 1, .32, 1) both;
}
@-webkit-keyframes zz-drop { from { opacity: 0; -webkit-transform: translateY(-6px) scale(.97); } to { opacity: 1; -webkit-transform: none; } }
@keyframes zz-drop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 559.98px) {
    /* On a phone the panel is the width of the screen, under the bar. */
    [data-v2] .zz-note { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; max-width: none; }
}
[data-v2] .zz-kick-card {
    /*!fb*/ border-radius: calc(20px + 4px);
    border-radius: calc(var(--zz-r-xl) + 4px);
    /*!fb*/ padding: 32px 24px 24px;
    padding: var(--zz-s-6) var(--zz-s-5) var(--zz-s-5);
}
[data-v2] .zz-kick-t { font-size: 22px; letter-spacing: -.03em; }
@media (max-width: 559.98px) {
    [data-v2] .zz-kick { padding: 0; -webkit-align-items: flex-end; align-items: flex-end; }
    [data-v2] .zz-kick-card {
        max-width: none;
        border-radius: 24px 24px 0 0;
        padding-bottom: 24px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    [data-v2] .zz-kick.is-open .zz-modal-card {
        -webkit-animation: zz-sheet 300ms cubic-bezier(.32, .72, 0, 1) both;
                animation: zz-sheet 300ms cubic-bezier(.32, .72, 0, 1) both;
    }
}

/* =========================================================================
   THE SIGNED-IN HEADER AND THE ACCOUNT MENU
   Every piece is in the markup for every visitor; <html data-auth data-sub>
   (set before first paint from the zz_me cookie) decides what shows:
     signed out           Sign in + Get Access
     pass active          bell + avatar
     pass ends in 7 days  bell + avatar + Renew
     no pass              bell + avatar + Get Access
   Without the attributes - no script, no cookie - it is the signed-out
   header, which works on its own.
   ========================================================================= */
[data-v2] .zz-signin,
[data-v2] .zz-me-wrap,
[data-v2] .zz-cta-renew { display: none; }
[data-v2]:not([data-auth="in"]) .zz-signin {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
}
[data-v2][data-auth="in"] .zz-me-wrap {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
}
[data-v2]:not([data-auth="in"]) .zz-cta-access,
[data-v2][data-auth="in"] .zz-cta-start { display: none; }
[data-v2][data-auth="in"][data-sub="active"] .zz-cta-access,
[data-v2][data-auth="in"][data-sub="ending"] .zz-cta-access { display: none; }
[data-v2][data-auth="in"][data-sub="ending"] .zz-cta-renew {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
}
/* The bell is about the account; before signing in there is nothing in it. */
[data-v2]:not([data-auth="in"]) .zz-bell-wrap { display: none; }

/* "Sign in": present, but quiet - the orange button beside it is the offer. */
[data-v2] .zz-signin {
    -webkit-align-items: center;
    align-items: center;
    min-height: 40px;
    padding: 0 16px 0 13px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    border: 1px solid rgba(255, 255, 255, .16);
    background-color: rgba(255, 255, 255, .05);
    background-image: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    font-weight: 600;
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    text-decoration: none;
    white-space: nowrap;
    -webkit-transition: background-color 140ms ease, border-color 140ms ease, -webkit-transform 160ms cubic-bezier(.23, 1, .32, 1);
            transition: background-color 140ms ease, border-color 140ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
[data-v2] .zz-signin svg { display: block; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 16px; height: 16px; margin-right: 7px; }
[data-v2] .zz-signin:hover { background-color: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .26); }
[data-v2] .zz-signin:active { -webkit-transform: scale(.96); transform: scale(.96); }
[data-v2] .zz-signin + .zz-cta-start { margin-left: 8px; }
[data-v2] .zz-signin:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
[data-v2] .zz-head-app .zz-signin { min-height: 34px; padding: 0 11px 0 9px; margin-left: 4px; font-size: 13px; }
[data-v2] .zz-head-app .zz-signin svg { width: 15px; height: 15px; margin-right: 5px; }
[data-v2] .zz-head-app .zz-cta-renew { margin-left: 8px; }

/* The avatar: a 34px disc in a 44px target. Neutral on purpose - a slate
   disc, a white letter and a hairline, the way account avatars are drawn
   everywhere - so the orange stays reserved for the one thing to press.
   The pass is told by the words in the menu and the Renew button, not by
   the avatar's colour. */
[data-v2] .zz-me-wrap { -webkit-align-items: center; align-items: center; margin-left: 6px; }
[data-v2] .zz-me {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
[data-v2] .zz-me:focus { outline: none; }
[data-v2] .zz-me-av {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    background: #26323b;
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px #080c0f, 0 0 0 3.5px rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .10);
    -webkit-transition: -webkit-transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms, box-shadow 160ms;
            transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms, box-shadow 160ms;
}
[data-v2] .zz-me:hover .zz-me-av { background: #303d47; -webkit-transform: scale(1.04); transform: scale(1.04); }
[data-v2] .zz-me:active .zz-me-av { -webkit-transform: scale(.94); transform: scale(.94); }
[data-v2] .zz-me:focus .zz-me-av { box-shadow: 0 0 0 2px #080c0f, 0 0 0 4px #ffffff; }
[data-v2] .zz-me:hover .zz-me-av { box-shadow: 0 0 0 2px #080c0f, 0 0 0 3.5px rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .10); }
[data-v2] .zz-me[aria-expanded="true"] .zz-me-av { -webkit-transform: scale(.94); transform: scale(.94); }
[data-v2] .zz-me-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
/* Signed in but the name has not reached this page yet: a plain head. */
[data-v2] .zz-me-i:empty:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
}

/* The menu's own head: the big avatar, the name, the plan line. */
.zz-me-card:focus { outline: none; }
.zz-me-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 2px 48px 18px 2px;
}
[data-v2] .zz-me-av-lg { width: 52px; height: 52px; font-size: 21px; }
.zz-me-who { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin-left: 16px; }
.zz-me-name {
    display: block;
    overflow: hidden;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zz-me-plan {
    display: block;
    margin-top: 3px;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 13px;
}
.zz-me-plan.is-active { /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); }
.zz-me-plan.is-active:before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 7px 1px 0;
    border-radius: 50%;
    /*!fb*/ background: #3ddc84;
    background: var(--zz-live);
    vertical-align: middle;
}
.zz-me-plan.is-ending { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); font-weight: 600; }
.zz-me-get {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 16px;
}
.zz-me-get[hidden] { display: none; }
.zz-me-card .zz-group { margin-bottom: 12px; }
.zz-me-card .zz-group:last-child { margin-bottom: 0; }
.zz-me-card .zz-row-out { -webkit-justify-content: flex-start; justify-content: flex-start; }
.zz-me-card .zz-row-out .zz-row-main { text-align: left; }
.zz-me-card .zz-row-out .zz-row-ico { /*!fb*/ background: rgba(251, 98, 63, .12); background: var(--zz-ember-ghost); /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); }
.zz-me-card .zz-row[hidden] { display: none; }

/* PHONES AND TABLETS: a bottom sheet under the thumb, never a floating card. */
@media (max-width: 1023.98px) {
    html:not([data-tv]) .zz-me-menu {
        padding: 0;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }
    html:not([data-tv]) .zz-me-card {
        max-width: 520px;
        max-height: 88%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px 16px 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
        border-bottom: 0;
    }
    html:not([data-tv]) .zz-me-menu.is-open .zz-me-card {
        -webkit-animation: zz-sheet 300ms cubic-bezier(.32, .72, 0, 1) both;
                animation: zz-sheet 300ms cubic-bezier(.32, .72, 0, 1) both;
    }
    html:not([data-tv]) .zz-me-card .zz-sheet-grab {
        display: block;
        width: 36px;
        height: 5px;
        margin: -8px auto 14px;
        border-radius: 3px;
        /*!fb*/ background: rgba(255, 255, 255, .20);
        background: var(--zz-line-3);
    }
    html:not([data-tv]) .zz-me-card .zz-sheet-close { top: 18px; }
}

/* DESKTOP: a dropdown under the avatar. No dimmed page, no blur - it is a
   menu, not a dialog - and it arrives the way the bell's panel does. */
.zz-sheet.is-drop {
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    -webkit-animation: none;
            animation: none;
}
.zz-sheet.is-drop .zz-sheet-card {
    position: fixed;
    width: 340px;
    max-width: calc(100% - 24px);
    overflow-y: auto;
    padding: 16px;
    /*!fb*/ border-radius: 20px;
    border-radius: var(--zz-r-xl);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .04);
    -webkit-transform-origin: 90% 0;
            transform-origin: 90% 0;
}
.zz-sheet.is-drop.is-open .zz-sheet-card {
    -webkit-animation: zz-drop 200ms cubic-bezier(.23, 1, .32, 1) both;
            animation: zz-drop 200ms cubic-bezier(.23, 1, .32, 1) both;
}
.zz-sheet.is-drop .zz-sheet-grab,
.zz-sheet.is-drop .zz-sheet-close { display: none; }
.zz-sheet.is-drop .zz-me-head { padding: 4px 4px 16px; }
.zz-sheet.is-drop .zz-me-av-lg { width: 44px; height: 44px; font-size: 18px; }
.zz-sheet.is-drop .zz-me-who { margin-left: 14px; }
.zz-sheet.is-drop .zz-me-name { font-size: 16px; }
.zz-sheet.is-drop .zz-me-get { min-height: 42px; margin-bottom: 12px; }
.zz-sheet.is-drop .zz-group { margin-bottom: 10px; /*!fb*/ border-radius: 12px; border-radius: var(--zz-r); }
.zz-sheet.is-drop .zz-row { min-height: 44px; padding: 6px 12px; }
.zz-sheet.is-drop .zz-row-ico { width: 28px; height: 28px; margin-right: 12px; }
.zz-sheet.is-drop .zz-row-main b { font-size: 14px; }
.zz-sheet.is-drop .zz-row + .zz-row:before { left: 52px; }

/* TELEVISIONS: the same sheet, centred and sized to be read from the sofa. */
[data-tv] .zz-me-card { max-width: 620px; max-height: 92%; overflow-y: auto; padding: 32px; }
[data-tv] .zz-me-head { padding-bottom: 20px; }
[data-tv] .zz-me-av-lg { width: 72px; height: 72px; font-size: 30px; }
[data-tv] .zz-me-who { margin-left: 22px; }
[data-tv] .zz-me-name { font-size: 28px; }
[data-tv] .zz-me-plan { font-size: 18px; margin-top: 6px; }
[data-tv] .zz-me-card .zz-row { min-height: 60px; }
[data-tv] .zz-me-card .zz-row-main b { font-size: 20px; }
[data-tv] .zz-me-card .zz-row:focus { /*!fb*/ background: rgba(251, 98, 63, .12); background: var(--zz-ember-ghost); box-shadow: inset 4px 0 0 #fb623f; }
[data-tv] .zz-me .zz-me-av { width: 40px; height: 40px; font-size: 17px; }
[data-tv] .zz-me { width: 52px; height: 52px; }
/* =========================================================================
   IN-APP NAVIGATION
   An account screen opened from the homepage is drawn in #zz-pageview, beside
   the (hidden) channel list, so the stream never has to stop: on a phone it
   is the mini bar above the tabs, on a desktop or a television a small player
   floating at the bottom left (the chat bubble lives at the right).
   ========================================================================= */
[data-v2] .zz-pageview { display: none; }
[data-v2][data-view="page"] .zz-pageview { display: block; }
[data-v2][data-home][data-view="page"] .zz-rail,
[data-v2][data-home][data-view="page"] .zz-finder,
[data-v2][data-home][data-view="page"] .zz-head-nav-row { display: none; }
[data-v2][data-home][data-view="page"]:not([data-dock="mini"]) .zz-player { display: none; }
[data-v2][data-home][data-view="page"] .zz-layout { min-height: 0; padding-top: 0; padding-bottom: 0; }
[data-nav-focus]:focus { outline: none; }
.zz-nav-in {
    -webkit-animation: zz-fade 180ms ease-out both;
            animation: zz-fade 180ms ease-out both;
}

@media (min-width: 1024px) {
    [data-v2][data-home][data-view="page"][data-dock="mini"] .zz-player {
        position: fixed;
        top: auto;
        left: 24px;
        right: auto;
        bottom: 24px;
        z-index: 140;
        width: 380px;
        height: 72px;
        margin: 0;
        padding: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: stretch;
        align-items: stretch;
        overflow: hidden;
        /*!fb*/ border-radius: calc(12px + 2px);
        border-radius: calc(var(--zz-r) + 2px);
        /*!fb*/ background: #18232a;
        background: var(--zz-surface-3);
        /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
        border: 1px solid var(--zz-line-2);
        box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
        cursor: pointer;
        -webkit-animation: zz-rise 260ms cubic-bezier(.23, 1, .32, 1) both;
                animation: zz-rise 260ms cubic-bezier(.23, 1, .32, 1) both;
    }
    [data-v2][data-home][data-view="page"][data-dock="mini"] .zz-player-frame {
        position: relative;
        -webkit-flex: 0 0 128px;
        flex: 0 0 128px;
        width: 128px;
        height: 72px;
        padding-bottom: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
    }
    [data-v2][data-home][data-view="page"][data-dock="mini"] .zz-player-frame iframe {
        bottom: auto;
        /*!fb*/ top: calc(48px * -1);
        top: calc(var(--zz-player-strip) * -1);
        /*!fb*/ height: calc(72px + 48px);
        height: calc(72px + var(--zz-player-strip));
        pointer-events: none;
    }
    [data-v2][data-home][data-view="page"][data-dock="mini"] .zz-player-skel,
    [data-v2][data-home][data-view="page"][data-dock="mini"] .zz-player-idle { display: none; }
    [data-v2][data-home][data-view="page"][data-dock="mini"] .zz-player-bar {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        padding: 0 4px 0 14px;
        background: transparent;
        border: 0;
    }
    /* No room is kept under the page for the player: the footer stays exactly
       where it is, and the player rises above it instead (Lift in app-2026.js). */
    [data-v2][data-home][data-view="page"][data-dock="mini"] .zz-player-title { /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); }
    [data-v2][data-home][data-view="page"][data-dock="mini"] .zz-player-close {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
    }
}

/* The thin bar along the top while a screen is on its way. */
.zz-navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    width: 0;
    height: 2px;
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: width 2400ms cubic-bezier(.1, .7, .2, 1), opacity 200ms;
            transition: width 2400ms cubic-bezier(.1, .7, .2, 1), opacity 200ms;
}
.zz-navbar.is-on { width: 80%; opacity: 1; }
.zz-navbar.is-done {
    width: 100%;
    opacity: 0;
    -webkit-transition: width 160ms ease-out, opacity 240ms 120ms;
            transition: width 160ms ease-out, opacity 240ms 120ms;
}

/* =========================================================================
   ACCOUNT · AFFILIATE PROGRAM
   Cards in one column on a phone; pairs side by side from 1024px. No flex
   gap anywhere (Chromium 84+): spacing is margins, for the 2016 TV floor.
   ========================================================================= */
@media (min-width: 1024px) {
    [data-v2] .zz-aff-pair {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    [data-v2] .zz-aff-pair > .zz-card { -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; }
    [data-v2] .zz-aff-pair > .zz-card + .zz-card { margin-left: 16px; }
}

/* The balance. */
[data-v2] .zz-aff-hero {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
[data-v2] .zz-aff-hero-main { -webkit-flex: 1 1 320px; flex: 1 1 320px; min-width: 0; margin-right: 24px; }
[data-v2] .zz-aff-balance {
    margin: 4px 0 14px;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
}
[data-v2] .zz-aff-bar { height: 8px; overflow: hidden; border-radius: 999px; /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-fill-3); }
[data-v2] .zz-aff-bar span { display: block; height: 100%; border-radius: 999px; /*!fb*/ background: #fb623f; background: var(--zz-ember); }
[data-v2] .zz-aff-hero-note { margin: 12px 0 0; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); }
[data-v2] .zz-aff-hero-note b { /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
[data-v2] .zz-aff-hero-side {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    margin-top: 18px;
}
[data-v2] .zz-aff-fact { margin: 0 28px 4px 0; }
[data-v2] .zz-aff-fact small { display: block; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 12px; }
[data-v2] .zz-aff-fact b { display: block; margin: 2px 0; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); font-size: 20px; font-weight: 700; }
[data-v2] .zz-aff-addpm { margin-bottom: 4px; }

/* The link: address, copy, where it lands, share, QR. */
[data-v2] .zz-aff-urlrow {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    margin: 4px 0 14px;
}
[data-v2] .zz-aff-url {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
}
[data-v2] .zz-aff-urlrow .zz-aff-copy { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 8px; }
[data-v2] .zz-aff-land {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 0 12px;
}
[data-v2] .zz-aff-land-t { margin: 4px 10px 4px 0; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); }
[data-v2] .zz-aff-seg {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
}
[data-v2] .zz-aff-seg-b {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
[data-v2] .zz-aff-seg-b { white-space: nowrap; }
[data-v2] .zz-aff-seg-b:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
@media (max-width: 559.98px) {
    [data-v2] .zz-aff-seg-b { padding: 0 10px; }
}
[data-v2] .zz-aff-seg-b.is-on { /*!fb*/ background: #18232a; background: var(--zz-surface-3); /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
[data-v2] .zz-aff-seg-b:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 1px; }
[data-v2] .zz-aff-share {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -4px 6px;
}
[data-v2] .zz-aff-sh {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    min-height: 38px;
    margin: 4px;
    padding: 0 14px;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    border-radius: 999px;
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
[data-v2] .zz-aff-sh svg { margin-right: 6px; }
[data-v2] .zz-aff-sh:hover { /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-fill-3); }
[data-v2] .zz-aff-sh:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
[data-v2] .zz-aff-sh[hidden] { display: none; }
[data-v2] .zz-aff-qrbox > summary,
[data-v2] .zz-aff-tablebox > summary,
[data-v2] .zz-aff-hiddenbox > summary,
[data-v2] .zz-aff-morebox > summary {
    display: inline-block;
    padding: 8px 0;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    font-weight: 600;
    cursor: pointer;
}
[data-v2] .zz-aff-qrbox > summary:focus,
[data-v2] .zz-aff-tablebox > summary:focus,
[data-v2] .zz-aff-hiddenbox > summary:focus,
[data-v2] .zz-aff-morebox > summary:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
[data-v2] .zz-aff-qr { width: 180px; height: 180px; margin: 8px 0; padding: 12px; border-radius: 12px; background: #ffffff; }
[data-v2] .zz-aff-qr svg { display: block; width: 100%; height: 100%; }

/* How it works - only before the first click. */
[data-v2] .zz-aff-steps { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: zzaff; }
[data-v2] .zz-aff-steps li { position: relative; padding: 0 0 18px 46px; counter-increment: zzaff; }
[data-v2] .zz-aff-steps li:before {
    content: counter(zzaff);
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
    font-weight: 700;
    line-height: 30px;
    text-align: center;
}
[data-v2] .zz-aff-steps b { display: block; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
[data-v2] .zz-aff-steps span { display: block; margin-top: 2px; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); }

/* Performance: ranges, KPIs, the chart. */
[data-v2] .zz-aff-perf-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 10px;
}
[data-v2] .zz-aff-perf-head .zz-card-title { margin: 0 16px 8px 0; }
[data-v2] .zz-aff-ranges {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -3px 8px;
}
[data-v2] .zz-aff-range {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    min-height: 34px;
    margin: 3px;
    padding: 0 12px;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    border-radius: 999px;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
[data-v2] .zz-aff-range:hover { /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
[data-v2] .zz-aff-range.is-on { border-color: transparent; /*!fb*/ background: #ffffff; background: var(--zz-ink-hi); /*!fb*/ color: #080c0f; color: var(--zz-canvas); }
[data-v2] .zz-aff-range:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
[data-v2] .zz-aff-kpis {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -6px 14px;
}
[data-v2] .zz-aff-kpi {
    -webkit-flex: 1 1 140px;
    flex: 1 1 140px;
    min-width: 0;
    margin: 6px;
    padding: 12px 14px;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    border-radius: 12px;
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
}
[data-v2] .zz-aff-kpi small { display: block; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
[data-v2] .zz-aff-kpi b {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-v2] .zz-aff-delta {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    /*!fb*/ background: rgba(255, 255, 255, .07);
    background: var(--zz-fill-3);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-size: 12px;
    font-weight: 600;
}
[data-v2] .zz-aff-delta.is-up { background: rgba(61, 220, 132, .12); /*!fb*/ color: #3ddc84; color: var(--zz-live-ink); }
[data-v2] .zz-aff-delta.is-down { background: rgba(251, 98, 63, .12); color: #ff8a7a; }
@media (max-width: 559.98px) {
    [data-v2] .zz-aff-kpi { -webkit-flex-basis: 40%; flex-basis: 40%; }
    [data-v2] .zz-aff-balance { font-size: 36px; }
    [data-v2] .zz-aff-hero-main { margin-right: 0; }
}
[data-v2] .zz-aff-series { margin-bottom: 12px; }
[data-v2] .zz-aff-fig { margin: 0; }
[data-v2] .zz-aff-fig[hidden] { display: none; }
[data-v2] .zz-aff-plot { position: relative; height: 220px; padding-top: 22px; }
[data-v2] .zz-aff-svg { display: block; width: 100%; height: 100%; overflow: visible; }
[data-v2] .zz-aff-grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
[data-v2] .zz-aff-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
[data-v2] .zz-aff-area { stroke: none; opacity: .16; }
[data-v2] .zz-aff-barr { opacity: .9; }
[data-v2] .zz-aff-c-earnings .zz-aff-barr { /*!fb*/ fill: #fb623f; fill: var(--zz-ember); }
[data-v2] .zz-aff-c-sales .zz-aff-barr { /*!fb*/ fill: #3ddc84; fill: var(--zz-live); }
[data-v2] .zz-aff-c-clicks .zz-aff-barr { fill: #6ea8ff; }
[data-v2] .zz-aff-c-signups .zz-aff-barr { fill: #b58cff; }
[data-v2] .zz-aff-c-earnings .zz-aff-line { /*!fb*/ stroke: #fb623f; stroke: var(--zz-ember); }
[data-v2] .zz-aff-c-earnings .zz-aff-area { /*!fb*/ fill: #fb623f; fill: var(--zz-ember); }
[data-v2] .zz-aff-c-sales .zz-aff-line { /*!fb*/ stroke: #3ddc84; stroke: var(--zz-live); }
[data-v2] .zz-aff-c-sales .zz-aff-area { /*!fb*/ fill: #3ddc84; fill: var(--zz-live); }
[data-v2] .zz-aff-c-clicks .zz-aff-line { stroke: #6ea8ff; }
[data-v2] .zz-aff-c-clicks .zz-aff-area { fill: #6ea8ff; }
[data-v2] .zz-aff-c-signups .zz-aff-line { stroke: #b58cff; }
[data-v2] .zz-aff-c-signups .zz-aff-area { fill: #b58cff; }
[data-v2] .zz-aff-ymax { position: absolute; top: 0; left: 0; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 12px; }
[data-v2] .zz-aff-xl {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-top: 6px;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 12px;
}
[data-v2] .zz-aff-tip {
    position: absolute;
    top: 0;
    z-index: 2;
    padding: 6px 10px;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    border-radius: 8px;
    /*!fb*/ background: #18232a;
    background: var(--zz-surface-3);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .8);
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}
[data-v2] .zz-aff-tip b { display: block; }
[data-v2] .zz-aff-tip small { display: block; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 11px; }
[data-v2] .zz-aff-tip[hidden],
[data-v2] .zz-aff-dot[hidden] { display: none; }
[data-v2] .zz-aff-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    /*!fb*/ border: 2px solid #080c0f;
    border: 2px solid var(--zz-canvas);
    border-radius: 50%;
    /*!fb*/ background: #ffffff;
    background: var(--zz-ink-hi);
    pointer-events: none;
}
@media (max-width: 559.98px) {
    [data-v2] .zz-aff-plot { height: 170px; }
}
[data-v2] .zz-aff-perf-foot {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-top: 14px;
}
[data-v2] .zz-aff-tablebox { -webkit-flex: 1 1 300px; flex: 1 1 300px; min-width: 0; }
[data-v2] .zz-aff-csv { margin: 4px 0 0 auto; }

/* Lists: recent sales, payout breakdowns. */
[data-v2] .zz-aff-list { margin: 0; padding: 0; list-style: none; }
[data-v2] .zz-aff-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px 0;
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
}
[data-v2] .zz-aff-item:last-child { border-bottom: 0; }
[data-v2] .zz-aff-item-main { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin-right: 12px; }
[data-v2] .zz-aff-item-main b { display: block; overflow: hidden; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
[data-v2] .zz-aff-item-main small { display: block; margin-top: 2px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 13px; }
[data-v2] .zz-aff-amt { -webkit-flex: 0 0 auto; flex: 0 0 auto; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); font-weight: 700; }
[data-v2] .zz-aff-item.is-void .zz-aff-amt { /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }
[data-v2] .zz-aff-note { margin-top: 10px; font-size: 13px; }

/* Where clicks come from. */
[data-v2] .zz-aff-bars { margin: 4px 0 0; padding: 0; list-style: none; }
[data-v2] .zz-aff-bars li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: baseline;
    align-items: baseline;
    padding: 8px 0;
}
[data-v2] .zz-aff-bars-t { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; overflow: hidden; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); text-overflow: ellipsis; white-space: nowrap; }
[data-v2] .zz-aff-bars-n { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 12px; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); font-size: 13px; }
[data-v2] .zz-aff-bars-track { display: block; -webkit-flex: 1 1 100%; flex: 1 1 100%; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 999px; /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); }
[data-v2] .zz-aff-bars-track span { display: block; height: 100%; border-radius: 999px; background: #6ea8ff; }

/* Tracked links. */
[data-v2] .zz-aff-newlink { margin: 8px 0 12px; }
[data-v2] .zz-aff-newlink-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    margin: 0 -6px;
}
[data-v2] .zz-aff-newlink-row > * { margin: 0 6px 8px; }
[data-v2] .zz-aff-newlink-name { -webkit-flex: 2 1 200px; flex: 2 1 200px; min-width: 0; }
[data-v2] .zz-aff-newlink-to { -webkit-flex: 1 1 140px; flex: 1 1 140px; min-width: 0; }
[data-v2] .zz-aff-newlink .zz-label { margin-top: 0; }
[data-v2] .zz-aff-newlink .zz-input { width: 100%; margin: 0; }
[data-v2] .zz-aff-tls { margin: 0; padding: 0; list-style: none; }
[data-v2] .zz-aff-tl { padding: 14px 0; /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07); border-top: 1px solid var(--zz-line); }
[data-v2] .zz-aff-tl-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
}
[data-v2] .zz-aff-tl-name { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin-right: 8px; }
[data-v2] .zz-aff-tl-name b { display: block; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); font-weight: 600; }
[data-v2] .zz-aff-tl-name small { display: block; font-size: 13px; }
[data-v2] .zz-aff-tl-acts { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
[data-v2] .zz-aff-tl-acts form { margin: 0 0 0 4px; }
[data-v2] .zz-aff-tl-url {
    display: block;
    margin: 6px 0 10px;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
}
[data-v2] .zz-aff-tl-stats { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0; }
[data-v2] .zz-aff-tl-stats div { margin-right: 22px; }
[data-v2] .zz-aff-tl-stats dt { /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 12px; }
[data-v2] .zz-aff-tl-stats dd { margin: 0; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); font-weight: 600; }
[data-v2] .zz-aff-hiddenbox { margin-top: 6px; }

/* Ready-made links. */
[data-v2] .zz-aff-promos { margin: 0; padding: 0; list-style: none; }
[data-v2] .zz-aff-promo-i {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    padding: 12px 0;
    /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
    border-top: 1px solid var(--zz-line);
}
[data-v2] .zz-aff-promo-main { -webkit-flex: 1 1 220px; flex: 1 1 220px; min-width: 0; margin-right: 8px; }
[data-v2] .zz-aff-promo-main b { display: block; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); font-weight: 600; }
[data-v2] .zz-aff-promo-main small { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
[data-v2] .zz-aff-promo-acts { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
[data-v2] .zz-aff-preview[hidden] { display: none; }
[data-v2] .zz-aff-promo-img { display: block; -webkit-flex: 1 1 100%; flex: 1 1 100%; max-width: 100%; height: auto; margin-top: 10px; border-radius: 8px; }

/* Payouts: each one opens to the sales it paid. */
[data-v2] .zz-aff-payout { /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07); border-top: 1px solid var(--zz-line); }
[data-v2] .zz-aff-payout > summary {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 12px 0;
    list-style: none;
    cursor: pointer;
}
[data-v2] .zz-aff-payout > summary::-webkit-details-marker { display: none; }
[data-v2] .zz-aff-payout > summary:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
[data-v2] .zz-aff-payout > summary:after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -4px 4px 0 14px;
    /*!fb*/ border-right: 2px solid #7e8b95;
    border-right: 2px solid var(--zz-ink-3);
    /*!fb*/ border-bottom: 2px solid #7e8b95;
    border-bottom: 2px solid var(--zz-ink-3);
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
[data-v2] .zz-aff-payout[open] > summary:after { margin-top: 4px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
[data-v2] .zz-aff-payout-main { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin-right: 12px; }
[data-v2] .zz-aff-payout-main b { display: block; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); font-weight: 600; }
[data-v2] .zz-aff-payout-main small { display: block; font-size: 13px; }
[data-v2] .zz-aff-payout .zz-aff-list { margin: 0 0 12px; padding: 2px 14px; border-radius: 12px; /*!fb*/ background: rgba(255, 255, 255, .03); background: var(--zz-fill-1); }

/* The payout method form: one method's fields at a time. */
[data-v2] .zz-aff-fields { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
[data-v2] .zz-aff-fields[hidden] { display: none; }
[data-v2] .zz-aff-fields-t { margin: 0 0 4px; padding: 0; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); font-weight: 600; }
[data-v2] .zz-aff-pm .zz-btn-cta { margin-top: 16px; }

/* Televisions: nothing to paste into, no share sheet - the link and its QR. */
[data-tv] .zz-aff-copy,
[data-tv] .zz-aff-share,
[data-tv] .zz-aff-csv { display: none; }
[data-tv] .zz-aff-qr { width: 240px; height: 240px; }

[data-v2] .zz-player-bar {
    margin-top: 8px;
    padding: 8px 8px 8px 16px;
    min-height: 52px;
    border-radius: 16px;
    background: rgba(13, 19, 23, .86);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
}
@media (max-width: 1023.98px) {
    [data-v2] .zz-player-bar {
        padding-left: 14px;
        padding-right: 8px;
        background: rgba(13, 19, 23, .86);
        border: 1px solid rgba(255, 255, 255, .07);
    }
}
[data-v2][data-home][data-dock="mini"] .zz-player-bar {
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
}
.zz-tvbtn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 36px;
    margin-left: 8px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #f3f6f8;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.zz-tvbtn svg {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 8px;
}
.zz-tvbtn:hover,
.zz-tvbtn:focus {
    border-color: rgba(251, 98, 63, .5);
    background: rgba(251, 98, 63, .12);
    outline: none;
}
[data-tv] .zz-tvbtn,
[data-tv] [data-tvhelp],
[data-dock="mini"] .zz-tvbtn { display: none !important; }
.zz-tvh-card {
    max-width: 540px;
    max-height: 88vh;
    overflow-y: auto;
}
.zz-tvh-tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -4px 16px;
}
.zz-tvh-tab {
    margin: 4px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: #9aa7b0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.zz-tvh-tab.is-on {
    border-color: #fb623f;
    background: #fb623f;
    color: #ffffff;
}
.zz-tvh-tab:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
.zz-tvh-lead {
    margin: 0 0 12px;
    color: #f3f6f8;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}
.zz-tvh-h {
    margin: 16px 0 6px;
    color: #f3f6f8;
    font-size: 13px;
    font-weight: 700;
}
.zz-tvh-steps {
    margin: 0 0 12px;
    padding: 0 0 0 20px;
    color: #c9d2d8;
    font-size: 14px;
    line-height: 1.55;
}
.zz-tvh-steps li { margin-bottom: 6px; }
.zz-tvh-note {
    margin: 0;
    color: #7e8b95;
    font-size: 12px;
    line-height: 1.5;
}
[data-tv] .zz-aff-plot { height: 260px; }
/* =========================================================================
   MOTION PREFERENCES
   Reduced motion keeps the fades - they carry meaning - and drops the travel.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    [data-v2] .zz-modal.is-open .zz-modal-card,
    [data-v2] .zz-auth-modal.is-open .zz-modal-card,
    .zz-sheet.is-open .zz-sheet-card {
        -webkit-animation-name: zz-fade;
                animation-name: zz-fade;
    }
    .zz-toast,
    .zz-install { -webkit-transform: none; transform: none; }
    [data-v2] .zz-btn-cta:active,
    [data-v2] .zz-btn-ghost:active,
    [data-v2] .zz-tab:active { -webkit-transform: none; transform: none; }
}

/* =========================================================================
   LIVE CHAT - the header button and the panel (zz_chat_html in zz-page.php)
   A bottom sheet on phones and tablets, a floating window on a computer, a
   large dialog with a QR code on a television.
   ========================================================================= */
.zz-chatbtn {
    display: none;
    position: relative;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-left: 2px;
    padding: 0;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    border: 1px solid transparent;
    background: transparent;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    cursor: pointer;
}
.zz-chatbtn svg { display: block; width: 21px; height: 21px; }
[data-v2] .zz-head-app .zz-chatbtn,
[data-v2][data-tv] .zz-head-desk .zz-chatbtn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
}
.zz-chatbtn:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); }
.zz-chatbtn:active { -webkit-transform: scale(.94); transform: scale(.94); }
.zz-chatbtn:focus { outline: none; }
.zz-chatbtn:focus-visible { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
[data-remote] .zz-chatbtn:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); /*!fb*/ background: rgba(251, 98, 63, .12); background: var(--zz-ember-ghost); }
[data-tv] .zz-chatbtn { width: 48px; height: 48px; margin-right: 6px; }
[data-tv] .zz-chatbtn svg { width: 25px; height: 25px; }
[data-tv] .zz-chatbtn:hover { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
.zz-clockbtn { display: none; }
[data-v2] .zz-head-app .zz-clockbtn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-left: 2px;
    padding: 0;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    border: 1px solid transparent;
    background: transparent;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
}
[data-v2] .zz-head-app .zz-clockbtn svg { display: block; width: 21px; height: 21px; opacity: 1; }
[data-v2] .zz-head-app .zz-clockbtn:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ background: rgba(255, 255, 255, .05); background: var(--zz-fill-2); border-color: transparent; }
[data-v2] .zz-head-app .zz-clockbtn:active { -webkit-transform: scale(.94); transform: scale(.94); }
[data-v2] .zz-head-app .zz-clockbtn ul { width: 170px; max-height: 60vh; right: -48px; }
[data-remote] .zz-clockbtn:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
@media (max-width: 459.98px) {
    [data-v2] .zz-head-app { padding-left: 12px; padding-right: 8px; }
    [data-v2] .zz-head-app .zz-logo img { width: 96px; height: 32.6px; }
    [data-v2] .zz-head-app .zz-chatbtn,
    [data-v2] .zz-head-app .zz-clockbtn { width: 34px; margin-left: 0; }
    [data-v2] .zz-head-app .zz-bell-wrap .zz-bell { width: 36px; }
    [data-v2] .zz-head-app .zz-signin { padding: 0 9px 0 7px; margin-left: 2px; }
    [data-v2] .zz-head-app .zz-signin svg { width: 14px; height: 14px; margin-right: 4px; }
    [data-v2] .zz-head-app .zz-btn-sm { padding: 0 10px; }
    [data-v2] .zz-head-app .zz-btn-cta,
    [data-v2] .zz-head-app .zz-cta-renew { margin-left: 6px; }
    [data-v2] .zz-head-app .zz-clockbtn ul { right: -40px; }
}
@media (max-width: 419.98px) {
    [data-v2] .zz-head-app .zz-signin { padding: 0 8px 0 6px; }
    [data-v2] .zz-head-app .zz-btn-sm { padding: 0 8px; }
    [data-v2] .zz-head-app .zz-btn-cta,
    [data-v2] .zz-head-app .zz-cta-renew { margin-left: 4px; }
}
@media (max-width: 389.98px) {
    html[data-v2] .zz-head-app .zz-signin { display: none; }
}
@media (max-width: 369.98px) {
    [data-v2] .zz-head-app .zz-logo img { width: 80px; height: 27.2px; }
    [data-v2] .zz-head-app .zz-btn-sm { padding: 0 9px; }
    [data-v2] .zz-head-app .zz-bell-wrap .zz-bell { width: 34px; }
}
@media (max-width: 339.98px) {
    html[data-v2][data-auth="in"] .zz-head-app .zz-chatbtn { display: none; }
}

.zz-chat-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    height: 640px;
    max-height: 100%;
    padding: 0;
    overflow: hidden;
}
.zz-chat-card:focus { outline: none; }
.zz-chat-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 14px 14px 14px 18px;
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
}
.zz-chat-av {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
    /*!fb*/ box-shadow: inset 0 0 0 1px rgba(251, 98, 63, .35);
    box-shadow: inset 0 0 0 1px var(--zz-ember-line);
}
.zz-chat-av svg { display: block; }
.zz-chat-who { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.zz-chat-who b { display: block; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.zz-chat-who small { display: block; margin-top: 2px; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); font-size: 12px; }
.zz-chat .zz-sheet-close {
    position: relative;
    top: auto;
    right: auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 12px;
}
.zz-chat-body {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
}
.zz-chat-tv { display: none; }
.zz-chat-frame {
    position: relative;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
}
.zz-chat-frame iframe {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
    opacity: 0;
    -webkit-transition: opacity 200ms ease;
            transition: opacity 200ms ease;
}
.zz-chat.is-ready .zz-chat-frame iframe { opacity: 1; }
.zz-chat-load {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 13px;
}
.zz-chat.is-ready .zz-chat-load { display: none; }
.zz-chat-spin {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
    border-radius: 50%;
    /*!fb*/ border: 3px solid rgba(255, 255, 255, .12);
    border: 3px solid var(--zz-line-2);
    /*!fb*/ border-top-color: #fb623f;
    border-top-color: var(--zz-ember);
    -webkit-animation: zz-chat-spin 800ms linear infinite;
            animation: zz-chat-spin 800ms linear infinite;
}
@-webkit-keyframes zz-chat-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes zz-chat-spin { to { transform: rotate(360deg); } }
.zz-chat-out {
    display: block;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
    border-top: 1px solid var(--zz-line);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}
.zz-chat-out:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
.zz-chat-out:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: -2px; }

@media (max-width: 1023.98px) {
    html:not([data-tv]) .zz-chat {
        padding: 0;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }
    html:not([data-tv]) .zz-chat-card {
        max-width: 560px;
        height: 88%;
        max-height: none;
        border-radius: 24px 24px 0 0;
        border-bottom: 0;
    }
    html:not([data-tv]) .zz-chat.is-open .zz-chat-card {
        -webkit-animation: zz-sheet 300ms cubic-bezier(.32, .72, 0, 1) both;
                animation: zz-sheet 300ms cubic-bezier(.32, .72, 0, 1) both;
    }
    html:not([data-tv]) .zz-chat .zz-sheet-grab {
        display: block;
        position: absolute;
        top: 7px;
        left: 50%;
        width: 36px;
        height: 5px;
        margin: 0 0 0 -18px;
        border-radius: 3px;
        /*!fb*/ background: rgba(255, 255, 255, .20);
        background: var(--zz-line-3);
    }
    html:not([data-tv]) .zz-chat-head { padding-top: 20px; }
}

@media (min-width: 1024px) {
    html:not([data-tv]) .zz-chat {
        padding: 24px;
        -webkit-align-items: flex-end;
        align-items: flex-end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        background: transparent;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        pointer-events: none;
    }
    html:not([data-tv]) .zz-chat-card {
        width: 400px;
        height: 620px;
        pointer-events: auto;
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04);
    }
}

[data-tv] .zz-chat-card { width: 90%; max-width: 1100px; height: 80vh; }
[data-tv] .zz-chat-head { padding: 20px 20px 20px 28px; }
[data-tv] .zz-chat-av { width: 52px; height: 52px; margin-right: 16px; }
[data-tv] .zz-chat-av svg { width: 26px; height: 26px; }
[data-tv] .zz-chat-who b { font-size: 26px; }
[data-tv] .zz-chat-who small { font-size: 17px; }
[data-tv] .zz-chat .zz-sheet-close { width: 56px; height: 56px; }
[data-tv] .zz-chat .zz-sheet-close svg { width: 24px; height: 24px; }
[data-tv] .zz-chat .zz-sheet-close:hover { /*!fb*/ outline: 3px solid #fb623f; outline: 3px solid var(--zz-ember); outline-offset: 2px; }
[data-tv] .zz-chat .zz-sheet-close:focus { /*!fb*/ outline: 3px solid #fb623f; outline: 3px solid var(--zz-ember); outline-offset: 2px; }
[data-tv] .zz-chat-tv {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: 0 0 380px;
    flex: 0 0 380px;
    width: 380px;
    padding: 32px;
    /*!fb*/ border-right: 1px solid rgba(255, 255, 255, .07);
    border-right: 1px solid var(--zz-line);
    text-align: center;
}
.zz-chat-qr {
    width: 250px;
    height: 250px;
    margin-bottom: 24px;
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
}
.zz-chat-qr svg { display: block; width: 100%; height: 100%; }
.zz-chat-tv-t { margin: 0 0 8px; /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); font-size: 24px; font-weight: 700; }
.zz-chat-tv-x { margin: 0; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); font-size: 17px; line-height: 1.5; }
[data-tv] .zz-chat-out { display: none; }

@media (prefers-reduced-motion: reduce) {
    html:not([data-tv]) .zz-chat.is-open .zz-chat-card {
        -webkit-animation-name: zz-fade;
                animation-name: zz-fade;
    }
    .zz-chat-spin { -webkit-animation-duration: 2400ms; animation-duration: 2400ms; }
}

@media (prefers-reduced-motion: reduce) {
    [data-v2][data-home] .zz-head,
    [data-v2][data-home] .zz-player,
    [data-v2][data-home] .zz-layout > .zz-head-nav-row,
    [data-v2][data-home] .zz-tabbar {
        -webkit-transition: none;
                transition: none;
    }
}

[data-v2] .zz-why-box { -webkit-align-items: center; align-items: center; padding: 24px; }
[data-v2] .zz-why-card {
    width: auto;
    max-width: 1200px;
    padding: 0;
    background: #05080a;
    line-height: 0;
}
[data-v2] .zz-why-img {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    max-height: 88vh;
    -o-object-fit: contain;
       object-fit: contain;
    background: #05080a;
}
[data-v2] .zz-why-card .zz-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(8, 12, 15, .72);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
@media (max-width: 559.98px) {
    [data-v2] .zz-why-box { padding: 12px; }
    [data-v2] .zz-why-card { border-radius: 14px; }
    [data-v2] .zz-why-card { overflow: visible; }
    [data-v2] .zz-why-img { border-radius: 14px; }
    [data-v2] .zz-why-card .zz-modal-close { top: -46px; right: 0; width: 38px; height: 38px; }
}
@media (orientation: landscape) and (max-height: 500px) {
    [data-v2] .zz-why-box { padding: 8px; }
    [data-v2] .zz-why-img { width: auto; max-height: 92vh; }
}
[data-tv] .zz-why-card .zz-modal-close { width: 56px; height: 56px; top: 16px; right: 16px; }

[data-v2] .zz-why-link svg { width: 17px; height: 17px; }
.zz-whybtn { display: none; }
@media (max-width: 1023.98px) {
    [data-v2] .zz-head-app .zz-whybtn {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        margin-left: 2px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        /*!fb*/ color: #9aa7b0;
        color: var(--zz-ink-2);
        cursor: pointer;
    }
    [data-v2] .zz-head-app .zz-whybtn:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); background: rgba(255, 255, 255, .05); }
    [data-v2] .zz-head-app .zz-whybtn:active { -webkit-transform: scale(.94); transform: scale(.94); }
}
@media (max-width: 459.98px) {
    [data-v2] .zz-head-app .zz-whybtn { width: 34px; margin-left: 0; }
}
@media (max-width: 439.98px) {
    html[data-v2]:not([data-auth="in"]) .zz-head-app .zz-whybtn { display: none; }
}
@media (max-width: 409.98px) {
    html[data-v2] .zz-head-app .zz-whybtn { display: none; }
}

[data-v2] .zz-pempty-why {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 14px;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
[data-v2] .zz-pempty-why svg { display: block; margin-right: 6px; }
[data-v2] .zz-pempty-why:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); background: rgba(255, 255, 255, .06); }
@media (max-width: 1023.98px) {
    [data-v2] .zz-pempty-why { margin-top: 8px; font-size: 12px; }
}
@media (max-width: 359.98px) {
    [data-v2] .zz-pempty-why { display: none; }
}

[data-v2] .zz-me-av-lg { box-shadow: 0 0 0 3px #0d1317, 0 0 0 5px rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .10); }

[data-v2] .zz-me-up { margin-bottom: 12px; border-radius: 16px; border: 1px solid rgba(251, 98, 63, .30); background: linear-gradient(180deg, rgba(251, 98, 63, .10), rgba(251, 98, 63, .03)); overflow: hidden; }
[data-v2] .zz-me-up[hidden] { display: none; }
[data-v2] .zz-me-up-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
[data-v2] .zz-me-up-ico {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 12px;
    border-radius: 50%;
    background: #fb623f;
    color: #ffffff;
}
[data-v2] .zz-me-up-t { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
[data-v2] .zz-me-up-chev { -webkit-transition: -webkit-transform 200ms ease; transition: transform 200ms ease; color: #9aa7b0; }
[data-v2] .zz-me-up.is-open .zz-me-up-chev { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
[data-v2] .zz-me-up-list { padding: 0 10px 10px; }
[data-v2] .zz-me-up-list[hidden] { display: none; }
[data-v2] .zz-up-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 8px;
    padding: 10px 10px 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    color: #f3f6f8;
    text-decoration: none;
}
[data-v2] .zz-up-row.is-current { opacity: .55; }
[data-v2] .zz-up-row.is-up:hover { border-color: rgba(251, 98, 63, .5); background: rgba(251, 98, 63, .10); }
[data-v2] .zz-up-main { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
[data-v2] .zz-up-main b { display: block; font-size: 15px; font-weight: 600; }
[data-v2] .zz-up-main small { display: block; margin-top: 1px; color: #7e8b95; font-size: 12px; }
[data-v2] .zz-up-price { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; margin: 0 10px; white-space: nowrap; }
[data-v2] .zz-up-price s { color: #7e8b95; font-size: 11px; }
[data-v2] .zz-up-price b { color: #ffffff; font-size: 16px; font-weight: 700; }
[data-v2] .zz-up-go { -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 7px 12px; border-radius: 10px; background: #fb623f; color: #ffffff; font-size: 13px; font-weight: 700; }
[data-v2] .zz-up-row.is-current .zz-up-go { background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: #9aa7b0; font-weight: 600; }
[data-tv] .zz-me-up-btn { min-height: 72px; font-size: 20px; }
[data-tv] .zz-up-row { padding: 16px; }
[data-tv] .zz-up-row.is-up:focus,
[data-tv] .zz-me-up-btn:focus { outline: 3px solid #ffffff; outline-offset: 2px; }

[data-v2] .zz-me-legal,
[data-v2] .zz-auth-legal-fold { display: none; }
[data-v2] details.zz-me-legal > summary,
[data-v2] details.zz-auth-legal-fold > summary { list-style: none; cursor: pointer; }
[data-v2] details > summary.zz-legal-sum::-webkit-details-marker { display: none; }
[data-v2] .zz-legal-chev { -webkit-flex: 0 0 auto; flex: 0 0 auto; color: #7e8b95; -webkit-transition: -webkit-transform 200ms ease; transition: transform 200ms ease; }
[data-v2] details[open] .zz-legal-chev { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
[data-v2] .zz-legal-links { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 4px 12px 14px 58px; }
[data-v2] .zz-legal-links a { margin: 6px 18px 6px 0; color: #9aa7b0; font-size: 14px; text-decoration: none; }
[data-v2] .zz-legal-links a:hover { color: #f3f6f8; text-decoration: underline; }
@media (max-width: 1023.98px) {
    [data-v2]:not([data-tv]) .zz-foot { display: none; }
    [data-v2]:not([data-tv]) .zz-me-legal { display: block; }
    [data-v2]:not([data-tv]) .zz-auth-legal-fold { display: block; margin-top: 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); }
}

[data-v2] .zz-tvh-ico {
    display: inline-block;
    vertical-align: -3px;
    padding: 2px;
    margin: 0 1px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    line-height: 0;
}
[data-v2] .zz-tvh-ico svg { display: block; width: 15px; height: 15px; }

[data-v2] .zz-pempty-why { margin-top: 10px; padding: 4px 8px; font-size: 12px; }
[data-v2] .zz-pempty-why svg { width: 13px; height: 13px; margin-right: 5px; }
@media (max-width: 1023.98px) {
    [data-v2] .zz-pempty-why { margin-top: 6px; font-size: 11px; }
}

[data-v2] .zz-tv-card { max-width: 820px; margin-left: auto; margin-right: auto; }
[data-v2] .zz-tv-split {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    margin: 8px 0 20px;
}
[data-v2] .zz-tv-half {
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    padding: 18px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    text-align: center;
}
[data-v2] .zz-tv-step { margin: 0 0 12px; color: #9aa7b0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
[data-v2] .zz-tv-split .zz-code { margin: 4px 0 12px; max-width: 100%; }
[data-v2] .zz-tv-split .zz-code-value { max-width: 100%; padding: 14px 16px; font-size: 34px; letter-spacing: .14em; white-space: nowrap; }
[data-v2] .zz-tv-split .zz-code-where { margin: 0; font-size: 14px; line-height: 1.45; }
[data-v2] .zz-tv-split .zz-code-life { margin: 10px 0 0; font-size: 13px; }
[data-v2] .zz-tv-or {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 44px;
    color: #7e8b95;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
[data-v2] .zz-tv-qr {
    width: 168px;
    height: 168px;
    margin: 0 0 12px;
    padding: 8px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(251, 98, 63, .22);
}
[data-v2] .zz-tv-qr svg { display: block; width: 100%; height: 100%; }
@media (max-width: 639.98px) {
    [data-v2] .zz-tv-split { -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; }
    [data-v2] .zz-tv-or { width: auto; height: 34px; }
    [data-v2] .zz-tv-split .zz-code-value { font-size: 30px; }
}
[data-v2][data-tv] .zz-tv-card { max-width: 1040px; }
[data-v2][data-tv] .zz-tv-half { padding: 26px 20px; }
[data-v2][data-tv] .zz-tv-step { font-size: 17px; margin-bottom: 18px; }
[data-v2][data-tv] .zz-tv-split .zz-code-value { font-size: 58px; padding: 18px 22px; letter-spacing: .12em; }
[data-v2][data-tv] .zz-tv-split .zz-code-where { font-size: 20px; }
[data-v2][data-tv] .zz-tv-split .zz-code-life { font-size: 19px; }
[data-v2][data-tv] .zz-tv-qr { width: 250px; height: 250px; padding: 12px; }
[data-v2][data-tv] .zz-tv-or { width: 64px; font-size: 18px; }

[data-v2] .zz-why-box.is-tall { -webkit-align-items: flex-start; align-items: flex-start; padding: 60px 12px 24px; }
[data-v2] .zz-why-img.is-tall { width: 100%; max-width: 520px; max-height: none; margin: 0 auto; }
[data-v2] .zz-why-box.is-tall .zz-why-card { max-width: 520px; margin: 0 auto; }

[data-v2] .zz-cta-watch { display: none; }
[data-v2] .zz-head-desk .zz-cta-watch,
[data-v2] .zz-head-min .zz-cta-watch {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    margin-right: 8px;
    white-space: nowrap;
}
[data-v2] .zz-head-desk .zz-cta-watch svg,
[data-v2] .zz-head-min .zz-cta-watch svg { display: block; margin-right: 7px; }
[data-v2][data-auth="in"][data-sub="active"] .zz-head-desk .zz-cta-watch,
[data-v2][data-auth="in"][data-sub="ending"] .zz-head-desk .zz-cta-watch,
[data-v2][data-auth="in"][data-sub="active"] .zz-head-min .zz-cta-watch,
[data-v2][data-auth="in"][data-sub="ending"] .zz-head-min .zz-cta-watch {
    border-color: transparent;
    background: #fb623f;
    color: #ffffff;
    box-shadow: 0 10px 24px -12px rgba(251, 98, 63, .85), inset 0 1px 0 rgba(255, 255, 255, .2);
}
[data-v2][data-auth="in"][data-sub="active"] .zz-head-desk .zz-cta-watch:hover,
[data-v2][data-auth="in"][data-sub="ending"] .zz-head-desk .zz-cta-watch:hover { background: #da4819; }
[data-v2][data-auth="in"][data-sub="active"] .zz-head-app .zz-cta-watch {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    margin-left: 6px;
}
@media (max-width: 1023.98px) {
    [data-v2] .zz-head-min .zz-cta-watch { display: none; }
}
[data-tv] .zz-head-desk .zz-cta-watch:hover,
[data-tv] .zz-head-desk .zz-cta-watch:focus { outline: 3px solid #ffffff; outline-offset: 2px; }

[data-v2] .zz-acc-tabs-top { margin-top: 4px; margin-bottom: 20px; }
[data-v2] .zz-acc-v2 .zz-acc-banner { margin-bottom: 20px; }
[data-v2] .zz-acc-banner-new {
    border-color: rgba(255, 255, 255, .10);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
}
@media (max-width: 1023.98px) {
    [data-v2] .zz-acc { padding-top: 0; }
    [data-v2] .zz-acc-tabs-top {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        margin: 0 -16px 16px;
        padding: 0 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
    }
    [data-v2] .zz-acc-tabs-top::-webkit-scrollbar { display: none; }
    [data-v2] .zz-acc-tabs-top .zz-acc-tab { -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 14px 12px; font-size: 13px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    [data-v2] .zz-acc-tabs-top { margin-left: -24px; margin-right: -24px; padding: 0 18px; }
}
@media (min-width: 1024px) {
    [data-v2] .zz-acc.zz-acc-v2 { padding-top: 6px; }
}

[data-v2] .zz-ov-upgrade {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    border-color: rgba(251, 98, 63, .45);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}
[data-v2] .zz-ov-upgrade svg { display: block; margin-right: 6px; color: #fb623f; }
[data-v2] .zz-ov-upgrade:hover { background: rgba(251, 98, 63, .12); border-color: #fb623f; }

[data-v2] .zz-me-stmt { display: block; margin-top: 2px; color: #7e8b95; font-size: 12px; line-height: 1.3; }
[data-v2] .zz-me-stmt[hidden] { display: none; }
[data-v2] .zz-up-stmt { margin: 10px 4px 2px; color: #7e8b95; font-size: 12px; line-height: 1.4; }
[data-v2] .zz-up-stmt b { color: #f3f6f8; font-weight: 600; }
[data-v2] .zz-plan-stmt { margin: 10px 0 0; color: #7e8b95; font-size: 12px; line-height: 1.4; text-align: center; }
[data-v2] .zz-plan-stmt b { color: #d7dde2; font-weight: 600; }
[data-tv] .zz-stmt-line,
[data-tv] .zz-plan-stmt { font-size: 18px; }
[data-v2] .zz-plan-stmt-once { margin: 18px 0 4px; font-size: 13px; }
[data-v2] .zz-plans-contact { max-width: 560px; margin: 8px auto 0; }
[data-v2] .zz-plans-contact-acts { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; margin: 14px -5px 0; }
[data-v2] .zz-plans-contact-acts a { margin: 5px; }

.zz-pay-note {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 220;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 380px;
    max-width: calc(100% - 32px);
    padding: 16px 18px 16px 16px;
    border-radius: 18px;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    background-color: rgba(13, 19, 23, .86);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-family: var(--zz-font);
    opacity: 0;
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    -webkit-transition: opacity 200ms ease, -webkit-transform 260ms cubic-bezier(.2, .8, .2, 1);
            transition: opacity 200ms ease, transform 260ms cubic-bezier(.2, .8, .2, 1);
}
.zz-pay-note[hidden] { display: none; }
.zz-pay-note.is-in { opacity: 1; -webkit-transform: none; transform: none; }
.zz-pay-note-ico {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 12px;
    border-radius: 50%;
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember);
}
.zz-pay-note-body { min-width: 0; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; padding-right: 18px; }
.zz-pay-note-t { display: block; /*!fb*/ font-size: 16px; font-size: var(--zz-t-md); font-weight: 700; line-height: 1.3; }
.zz-pay-note-x2 { margin: 4px 0 0; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); line-height: 1.45; }
.zz-pay-note-fine { margin: 6px 0 0; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); line-height: 1.4; }
.zz-pay-note-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 12px -4px -4px;
}
.zz-pay-note-row a,
.zz-pay-note-row button { margin: 4px; font-family: inherit; }
.zz-pay-note-x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    cursor: pointer;
}
.zz-pay-note-x:hover,
.zz-pay-note-x:focus { /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-fill-3); /*!fb*/ color: #f3f6f8; color: var(--zz-ink); outline: none; }
.zz-pay-note.is-back .zz-pay-note-done { /*!fb*/ box-shadow: 0 0 0 3px rgba(251, 98, 63, .35); box-shadow: 0 0 0 3px var(--zz-ember-line); }
@media (max-width: 600px) {
    .zz-pay-note { right: 12px; bottom: 12px; left: 12px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .zz-pay-note { -webkit-transition: none; transition: none; }
}