/**
 * Netivi.bz storefront.
 *
 * Loads AFTER assets/css/tokens.css and consumes its variables, so the
 * storefront, the portal and the admin cannot drift apart on spacing, type
 * scale or surface colour. What it overrides is the palette: the portal's amber
 * belongs to TVGO, and this is Netivi — blue #0870CF and red #FF0024, sampled
 * from the wordmark.
 *
 * The canvas stays dark. That is not a stylistic preference borrowed from the
 * admin: it is what a television product looks like everywhere the customer
 * already watches, it keeps artwork and logos from fighting the page, and it
 * means tokens.css's surfaces work unmodified.
 *
 * No framework, no build step, no web fonts. One request for the CSS, one for
 * the logo. The audience is on Belize mobile data.
 */

:root {
    /* ── Netivi brand ────────────────────────────────────────────────── */
    /* The wordmark blue is #0870CF. On a near-black canvas it sits just
       under the 4.5:1 text ratio, so interactive elements use the lifted
       --nv-blue while #0870CF stays for large fills where contrast is not
       the constraint. Using one value for both would have made every link
       on the page technically unreadable. */
    --nv-blue-deep: #0870CF;
    --nv-blue:      #2A8FE8;
    --nv-blue-lift: #57ABF2;
    --nv-red:       #FF0024;
    --nv-red-lift:  #FF3A55;
    --nv-cyan:      #00B0F0;

    /* 2026-11-04 (owner, palette D): midnight navy instead of neutral black, after DirecTV / Disney+. */
    --nv-bg:      #050B1C;
    --nv-surface: #0A1430;
    --nv-raised:  #101C3F;
    --nv-line:    #1B2A55;
    --nv-line-2:  #2A3C70;

    --nv-text:   #FFFFFF;
    --nv-body:   #C3C9D4;
    --nv-muted:  #8891A0;

    --nv-radius:    14px;
    --nv-radius-sm: 10px;
    --nv-max:       1180px;

    /* Reach for the brand where tokens.css assumes TVGO amber. */
    --border-focus: var(--nv-blue);
}

/* ── reset ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--nv-bg);
    color: var(--nv-body);
    font-family: var(--font-sans);
    /* 17px, not 16. Everything on this page is rem-based, so this is the one
       number that moves the whole scale - and the page is read on phones, in
       grey on black, which is the hardest case there is. */
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--nv-blue-lift); text-decoration: none; }
a:hover { color: var(--nv-blue); }

h1, h2, h3, h4 { color: var(--nv-text); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.85rem, 4.1vw, 2.9rem); letter-spacing: -.02em; }
h3 { font-size: 1.22rem; }
p  { margin: 0 0 1rem; }

:focus-visible {
    outline: 3px solid var(--nv-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Keyboard users need to land below the sticky header, not behind it. */
.nv-skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--nv-blue-deep); color: #fff; padding: 12px 18px;
    border-radius: 0 0 var(--nv-radius-sm) 0; font-weight: 600;
}
.nv-skip:focus { left: 0; color: #fff; }

/* ── layout ─────────────────────────────────────────────────────────── */

.nv-wrap { width: 100%; max-width: var(--nv-max); margin: 0 auto; padding: 0 20px; }

section { padding: 84px 0; position: relative; }
/* Palette D: the alternate sections are LIGHT bands (DirecTV's rhythm), so the page breathes between the dark ones.
   Everything inside reads its colours from these tokens, so the components themselves are unchanged. */
section.nv-alt {
    --nv-bg: #F4F7FC; --nv-surface: #FFFFFF; --nv-raised: #FFFFFF; --nv-line: #DDE4F0; --nv-line-2: #C5CFE3;
    --nv-text: #0A1633; --nv-body: #38445F; --nv-muted: #67718E;
    background: #F4F7FC; color: var(--nv-body);
}
section.nv-alt .nv-input, section.nv-alt .nv-select, section.nv-alt .nv-textarea { background: #FFFFFF; color: #0A1633; border-color: #C5CFE3; }
section.nv-alt .nv-card, section.nv-alt .nv-feature, section.nv-alt details {
    background: #FFFFFF; border-color: #DDE4F0; box-shadow: 0 6px 22px rgba(10, 30, 80, .08);
}
section.nv-alt .nv-btn-ghost { color: #0A1633; border-color: #C5CFE3; }

.nv-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.nv-head p { color: var(--nv-muted); font-size: 1.16rem; margin: 0; }

.nv-eyebrow {
    display: inline-block; margin-bottom: 14px;
    font-size: .82rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: var(--nv-cyan);
}

/* ── header ─────────────────────────────────────────────────────────── */

.nv-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(5, 11, 28, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nv-line);
}
/* The mark's three colours as a hairline under the header - the first thing
   the page does after showing the logo is repeat it. */
.nv-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg,
        var(--nv-blue-deep) 0%, var(--nv-blue) 22%, var(--nv-cyan) 46%,
        var(--nv-red) 74%, var(--nv-red-lift) 100%);
    opacity: .9;
}
.nv-header .nv-wrap {
    display: flex; align-items: center; gap: 28px;
    height: 70px;
}
.nv-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; min-height: 44px; }
.nv-logo img { height: 34px; width: auto; }
.nv-logo .nv-tag {
    font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--nv-muted); border-left: 1px solid var(--nv-line-2); padding-left: 11px;
}

.nv-nav { display: flex; gap: 26px; margin-left: auto; }
.nv-nav a {
    color: var(--nv-body); font-size: 1rem; font-weight: 500;
    padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nv-nav a:hover { color: var(--nv-text); border-bottom-color: var(--nv-red); }

.nv-burger {
    display: none; margin-left: auto;
    background: none; border: 1px solid var(--nv-line-2); border-radius: 9px;
    color: var(--nv-text); font-size: 1.25rem; cursor: pointer; line-height: 1;
    /* This is THE navigation control on a phone and it was 40x36. 44 is the
       floor for something a thumb has to find without looking. */
    min-width: 44px; min-height: 44px; padding: 0 12px;
}

@media (max-width: 900px) {
    .nv-nav {
        display: none; position: absolute; top: 70px; left: 0; right: 0;
        flex-direction: column; gap: 0;
        background: var(--nv-surface); border-bottom: 1px solid var(--nv-line);
        padding: 8px 20px 16px;
    }
    .nv-nav.open { display: flex; }
    .nv-nav a { padding: 13px 0; border-bottom: 1px solid var(--nv-line); }
    .nv-burger { display: block; }
    .nv-header .nv-btn-wa { display: none; }
}

/* Below this the header cannot hold logo + tagline + burger + account button
   at the larger type - "My account" ran off the right edge. The tagline is the
   one of the four that says nothing the logo has not already said. */
@media (max-width: 620px) {
    .nv-header .nv-wrap { gap: 14px; }
    .nv-logo .nv-tag { display: none; }
    .nv-logo img { height: 30px; }
    .nv-header .nv-btn { padding: 10px 17px; font-size: .95rem; }
}

/* ── buttons ────────────────────────────────────────────────────────── */

.nv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
    font-size: 1.05rem; font-weight: 600; font-family: inherit;
    cursor: pointer; text-align: center; transition: background .15s, border-color .15s, transform .1s;
}
.nv-btn:active { transform: translateY(1px); }

.nv-btn-primary {
    background: linear-gradient(135deg, var(--nv-blue-deep), var(--nv-blue));
    color: #fff; box-shadow: 0 6px 22px rgba(8, 112, 207, .32);
}
.nv-btn-primary:hover { background: linear-gradient(135deg, var(--nv-blue), var(--nv-blue-lift)); color: #fff; }
.nv-btn-primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.nv-btn-red { background: var(--nv-red); color: #fff; }
.nv-btn-red:hover { background: var(--nv-red-lift); color: #fff; }

.nv-btn-ghost { background: transparent; border-color: var(--nv-line-2); color: var(--nv-text); }
.nv-btn-ghost:hover { border-color: var(--nv-blue); color: var(--nv-text); background: rgba(42,143,232,.08); }

.nv-btn-wa { background: #25D366; color: #062611; font-weight: 700; }
.nv-btn-wa:hover { background: #3FE07B; color: #062611; }

.nv-btn-block { width: 100%; }

/* ── hero ───────────────────────────────────────────────────────────── */

.nv-hero {
    padding: clamp(64px, 9vw, 116px) 0 clamp(76px, 10vw, 128px);
    position: relative; overflow: hidden;
    /* Brand-coloured pools behind the poster wall, tinting it blue at the top
       left and red at the top right. The old site's hero was a wall of real
       film posters with a price baked into the pixels; the wall above is
       generated, so it owes nobody a licence and cannot go stale. */
    background:
        radial-gradient(70% 60% at 50% -8%, rgba(0, 52, 128, .85), transparent 70%),
        radial-gradient(700px 380px at 96% 10%, rgba(255, 0, 36, .10), transparent 60%),
        var(--nv-bg);
}
.nv-hero::after {
    /* A faint grid, masked to fade out before it reaches the copy. */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 0%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 35%, transparent 78%);
}
.nv-hero .nv-wrap { position: relative; z-index: 2; }

/* One centred column. This was 1fr + a 440px signup card, and the card was so
   much taller than the copy that it set the height of the entire first screen -
   a visitor met a ten-field form before reading what Netivi is. The card now
   has its own section below; the hero just has to say what this is and point
   at it. */
.nv-hero-grid { max-width: 820px; margin: 0 auto; text-align: center; }

.nv-hero-cta {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px; margin-bottom: 34px;
}

/* Same reasoning as the lede: these sit on the collage too. The headline is
   heavy enough to read without help, but a bright poster passing behind the
   thin strokes of "Netivi" still eats them. */
.nv-hero h1 {
    margin-bottom: 18px;
    text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 4px 28px rgba(0,0,0,.65);
}
.nv-hero .nv-eyebrow {
    text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.8);
}
/* MAX! — HOT RED, and it has to stay hot the whole way across.
   The gradient used to run to #FF7A45, which is salmon. Half the word was
   therefore orange, and on a dark wall that reads as muted rather than loud.
   Both stops now sit in the red, so it intensifies instead of fading out.

   TWO THINGS THE GRADIENT FORCES. The glyphs are transparent with the colour
   clipped to them, so (a) an inherited text-shadow paints a dark smear BEHIND
   the letters instead of under them — which it was doing, and is why this
   looked muddy — and (b) the only way to give it a glow is filter:drop-shadow,
   which applies to the rendered result rather than to the text box. */
.nv-hero h1 .nv-max {
    background: linear-gradient(100deg, #FF0026 0%, #FF1A2E 45%, #FF3421 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    white-space: nowrap;
    text-shadow: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.55))
            drop-shadow(0 0 22px rgba(255,20,45,.55));
}
/* THE HERO LEDE SITS ON MOVING ARTWORK, which body copy normally does not.
   It was 18.4px, weight 400, in the standard grey (#C3C9D4), with no shadow —
   and poster titles were legibly showing through the sentence. The headline
   above it survived only because it is 800 weight and enormous.
   So: near-white rather than grey, a little heavier, a little larger, and a
   shadow. The shadow is what actually does the work; without it no size or
   colour holds up against a frame that changes underneath it. */
.nv-lede {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 500;
    color: #F2F5FA;
    line-height: 1.5;
    max-width: 46ch; margin: 0 auto 30px;
    text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 2px 16px rgba(0,0,0,.8);
}
.nv-lede strong { color: #fff; font-weight: 800; }


/* ── signup card ────────────────────────────────────────────────────── */

/* ── hero collage ───────────────────────────────────────────────────── */

/* Tilted rows of thumbnails behind the headline, the way the Netflix signup
   page does it. Everything is generated - an SVG motif over a graded sky with
   an invented title - so no film artwork is fetched or served and there is
   nothing here to take down.

   Rows, not columns, and packed at a 7px gap. The first version used wide
   columns of portrait posters with 16px between them, which reads as a
   pinboard. Density and the tilt are most of what makes a wall a wall. */
.nv-wall {
    position: absolute; inset: 0;
    overflow: hidden; pointer-events: none; z-index: 0;
    /* Depth. The rows sit on a plane that leans away, so they are not simply
       level - which is the difference between a collage and a spreadsheet. */
    perspective: 1400px;
}

.nv-wall-plane {
    position: absolute; inset: -18% -14%;
    display: flex; flex-direction: column; gap: 7px;
    transform: rotateX(13deg) rotateZ(-5deg) scale(1.16);
    transform-origin: 50% 40%;
}

.nv-wall-row {
    display: flex; gap: 7px; flex: 0 0 auto;
    width: max-content;
    animation: nv-slide 80s linear infinite;
    will-change: transform;   /* its own layer, so the slide does not repaint */
}
/* Alternating direction and speed, so the wall never reads as one sheet. */
.nv-wall-row:nth-child(even) { animation-direction: reverse; animation-duration: 104s; }
.nv-wall-row:nth-child(3n)   { animation-duration: 92s; }
.nv-wall-row:nth-child(5n)   { animation-duration: 118s; }
/* Offset each row's start so the tiles do not line up into visible columns. */
.nv-wall-row:nth-child(2n) { margin-left: -70px; }
.nv-wall-row:nth-child(3n) { margin-left: -140px; }
.nv-wall-row:nth-child(5n) { margin-left: -40px; }

@keyframes nv-slide { to { transform: translate3d(-50%, 0, 0); } }

/* Half the rows on a phone: they cost frames and the scrim hides them anyway. */
@media (max-width: 900px) {
    .nv-wall-row:nth-child(4),
    .nv-wall-row:nth-child(6) { display: none; }
    .nv-wall-plane { gap: 6px; transform: rotateX(7deg) rotateZ(-5deg) scale(1.2); }
}

/* ── one tile ───────────────────────────────────────────────────────── */

.nv-tile {
    flex: 0 0 auto; margin: 0; position: relative;
    width: clamp(146px, 15vw, 226px); aspect-ratio: 16 / 9;
    border-radius: 4px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: #0d1016;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .6);
}
/* A real shelf mixes shapes; object-fit crops the same 16:9 frame to portrait. */
.nv-tile.nv-tall { width: clamp(96px, 9.6vw, 148px); aspect-ratio: 2 / 3; }

.nv-tile img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    /* The grade is baked into the files, so there is no filter here to pay for
       on 126 tiles - the browser just draws them. */
}

/* Only the gradient the title needs to sit on. The vignette and the colour
   grade are already in the image. */
.nv-tile::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.3) 32%, transparent 62%);
}

/* ── the title on the tile ──────────────────────────────────────────── */

.nv-tile-txt {
    position: relative; z-index: 1;
    padding: 0 7% 7%; text-align: center;
    display: flex; flex-direction: column; gap: 1px;
}
.nv-tile-txt b {
    font-size: .8em; line-height: 1.04; font-weight: 800;
    letter-spacing: -.01em; color: #fff;
    text-shadow: 0 2px 7px rgba(0,0,0,.85);
}
.nv-tile-txt i {
    font-style: normal; font-size: .42em; letter-spacing: .2em;
    color: rgba(255,255,255,.7); text-transform: uppercase;
}
/* Sized in em so one rule scales the type with the tile. */
.nv-tile { font-size: clamp(11px, 1.05vw, 15px); }
.nv-tile.nv-tall .nv-tile-txt b { font-size: .86em; }

/* The scrim. It goes nearly black under the headline and thins toward the
   corners, so the wall is texture where the eye is not and artwork where it
   wanders. */
.nv-wall::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(60% 52% at 50% 48%, rgba(5, 11, 28, .9) 0%,
                                            rgba(5, 11, 28, .62) 42%,
                                            rgba(5, 11, 28, .04) 82%),
        linear-gradient(to bottom, rgba(5,11,28,.8) 0%, transparent 18%,
                                   transparent 58%, var(--nv-bg) 99%);
}

/* A wall that never stops moving is a poor neighbour to anyone who asked it
   to. The artwork survives; only the slide goes. */
@media (prefers-reduced-motion: reduce) {
    .nv-wall-row { animation: none; }
}

/* The card no longer has to fit a 440px column, so the form runs two up and
   stops being a long strip: who you are on the left, the optional extras on
   the right. Kept to 880px - a full-width form would put the phone field a
   third of a screen away from its label row. */
.nv-signup-sec .nv-signup { max-width: 880px; margin: 0 auto; padding: 32px; }

.nv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }

/* Below this the two columns would each be too narrow for the five device
   buttons and the +501 prefix to sit comfortably. */
@media (max-width: 800px) {
    .nv-form-grid { grid-template-columns: 1fr; gap: 0; }
    .nv-signup-sec .nv-signup { padding: 26px; }
}

/* On a 320px phone the five device buttons measured 40px wide - under the
   44px floor, and they are the one control every signup has to touch. The
   width comes back from the card's own side padding and the gaps. */
@media (max-width: 400px) {
    .nv-signup-sec .nv-signup { padding: 22px 16px; }
    .nv-devices { gap: 5px; }
    .nv-devices label { padding-left: 0; padding-right: 0; }
}

.nv-form-foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--nv-line); }

/* Anchors land under the sticky header otherwise - and four links on this page
   point at #signup, so it is the one that gets used. */
:target { scroll-margin-top: 90px; }

.nv-card {
    background: var(--nv-raised);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius);
    padding: 28px;
}
.nv-signup {
    box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
    position: relative;
}
.nv-signup::before {
    /* A brand hairline along the top edge, drawn on the border radius. */
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    border-radius: var(--nv-radius) var(--nv-radius) 0 0;
    background: linear-gradient(90deg, var(--nv-blue-deep), var(--nv-cyan), var(--nv-red));
}
.nv-signup h2 { font-size: 1.3rem; margin-bottom: 4px; }
.nv-signup .nv-sub { color: var(--nv-muted); font-size: .97rem; margin-bottom: 22px; }

.nv-field { margin-bottom: 15px; }
.nv-field label {
    display: block; font-size: .89rem; font-weight: 600; color: var(--nv-body);
    margin-bottom: 6px; letter-spacing: .01em;
}
.nv-field .nv-opt { color: var(--nv-muted); font-weight: 400; }

.nv-input, .nv-select, .nv-textarea {
    width: 100%; padding: 12px 14px;
    background: var(--nv-raised); color: var(--nv-text);
    border: 1px solid var(--nv-line-2); border-radius: var(--nv-radius-sm);
    font-size: 1rem; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.nv-input::placeholder, .nv-textarea::placeholder { color: var(--nv-muted); }
.nv-input:focus, .nv-select:focus, .nv-textarea:focus {
    outline: none; border-color: var(--nv-blue);
    box-shadow: 0 0 0 3px rgba(42, 143, 232, .22);
}
.nv-input[aria-invalid="true"] { border-color: var(--nv-red); }
.nv-textarea { resize: vertical; min-height: 74px; }

.nv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .nv-row { grid-template-columns: 1fr; } }

/* The +501 prefix is furniture, not something to type. */
.nv-phone { display: flex; }
.nv-phone .nv-prefix {
    display: flex; align-items: center; padding: 0 13px;
    background: var(--nv-surface); border: 1px solid var(--nv-line-2); border-right: none;
    border-radius: var(--nv-radius-sm) 0 0 var(--nv-radius-sm);
    color: var(--nv-muted); font-size: 1.02rem; white-space: nowrap;
}
.nv-phone .nv-input { border-radius: 0 var(--nv-radius-sm) var(--nv-radius-sm) 0; letter-spacing: .06em; }

.nv-hint  { font-size: .86rem; color: var(--nv-muted); margin-top: 6px; }
.nv-error { font-size: .88rem; color: var(--nv-red-lift); margin-top: 6px; display: none; }
.nv-error.show { display: block; }

/* Device chooser — five segments, the price follows the choice. */
.nv-devices { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.nv-devices input { position: absolute; opacity: 0; pointer-events: none; }
.nv-devices label {
    display: flex; align-items: center; justify-content: center;
    padding: 12px 0; margin: 0; cursor: pointer;
    background: var(--nv-raised); border: 1px solid var(--nv-line-2);
    border-radius: var(--nv-radius-sm);
    font-size: 1.02rem; font-weight: 600; color: var(--nv-body);
    transition: all .15s;
}
.nv-devices label:hover { border-color: var(--nv-line-2); color: var(--nv-text); }
.nv-devices input:checked + label {
    background: linear-gradient(135deg, var(--nv-blue-deep), var(--nv-blue));
    border-color: var(--nv-blue); color: #fff;
}
.nv-devices input:focus-visible + label { outline: 3px solid var(--nv-blue); outline-offset: 2px; }

.nv-quote {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 16px 0 18px; padding: 15px 17px;
    background: rgba(8, 112, 207, .10); border: 1px solid rgba(42, 143, 232, .30);
    border-radius: var(--nv-radius-sm);
}
.nv-quote .nv-amount { font-size: 1.75rem; font-weight: 700; color: var(--nv-text); line-height: 1; }
.nv-quote .nv-per    { font-size: .93rem; color: var(--nv-muted); }
.nv-quote .nv-save   { font-size: .9rem; color: var(--nv-cyan); font-weight: 600; text-align: right; }

/* Adult catalogue: a real choice, made once, before anything is bought. */
.nv-check { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 16px; }
.nv-check input {
    margin: 1px 0 0; width: 22px; height: 22px;
    accent-color: var(--nv-blue); flex-shrink: 0; cursor: pointer;
}
.nv-check label {
    font-size: .95rem; color: var(--nv-body);
    /* 44px of tappable height without shifting the layout: the padding gives
       the target, the negative margin gives the space back. */
    display: inline-block; padding: 11px 0; margin: -11px 0; cursor: pointer;
}
.nv-check .nv-hint { margin-top: 3px; }

/* Bots fill it in; people never see it. */
.nv-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

.nv-captcha { display: flex; gap: 12px; align-items: flex-start; }
.nv-captcha img {
    border-radius: var(--nv-radius-sm); border: 1px solid var(--nv-line-2);
    height: 48px; width: auto; background: #fff; cursor: pointer;
}
.nv-captcha .nv-input { letter-spacing: .22em; text-transform: uppercase; }

.nv-legal { font-size: .84rem; color: var(--nv-muted); margin: 14px 0 0; text-align: center; }
.nv-legal a { color: var(--nv-muted); text-decoration: underline; }

/* ── the result panel, after a signup lands ─────────────────────────── */

.nv-done { display: none; text-align: center; padding: 8px 0 4px; }
.nv-done.show { display: block; }
.nv-done .nv-check-ring {
    width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
    background: rgba(37, 211, 102, .12); border: 2px solid #25D366;
    display: flex; align-items: center; justify-content: center; color: #25D366;
}
.nv-done h2 { font-size: 1.35rem; margin-bottom: 8px; }
.nv-ref {
    display: inline-block; margin: 6px 0 16px; padding: 11px 22px;
    background: var(--nv-bg); border: 1px dashed var(--nv-line-2); border-radius: var(--nv-radius-sm);
    font-family: var(--font-mono); font-size: 1.28rem; font-weight: 700;
    color: var(--nv-cyan); letter-spacing: .06em;
}
.nv-steps { text-align: left; margin: 20px 0 22px; padding: 0; list-style: none; counter-reset: s; }
.nv-steps li {
    position: relative; padding-left: 40px; margin-bottom: 14px;
    font-size: 1rem; counter-increment: s;
}
.nv-steps li::before {
    content: counter(s); position: absolute; left: 0; top: -1px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(8, 112, 207, .18); border: 1px solid var(--nv-blue);
    color: var(--nv-blue-lift); font-size: .86rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ── generic cards grid ─────────────────────────────────────────────── */

.nv-grid { display: grid; gap: 22px; }
.nv-grid-2 { grid-template-columns: repeat(2, 1fr); }
.nv-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .nv-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .nv-grid-2, .nv-grid-3 { grid-template-columns: 1fr; } }

.nv-feature {
    background: var(--nv-raised); border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius); padding: 26px;
    transition: border-color .18s, transform .18s;
}
.nv-feature:hover { border-color: var(--nv-line-2); transform: translateY(-3px); }

/* Blue, cyan, red, repeating. Six identical grey cards said nothing about
   whose page this is. */
.nv-feature { position: relative; overflow: hidden; }
.nv-feature::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--nv-blue); opacity: .85;
}
.nv-feature:nth-child(3n+2)::before { background: var(--nv-cyan); }
.nv-feature:nth-child(3n)::before   { background: var(--nv-red); }
.nv-feature:nth-child(3n+2) .nv-ico { color: var(--nv-cyan); }
.nv-feature:nth-child(3n)   .nv-ico { color: var(--nv-red-lift); }
.nv-feature .nv-ico {
    width: 44px; height: 44px; border-radius: 11px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 112, 207, .15); color: var(--nv-blue-lift);
}
.nv-feature h3 { margin-bottom: 7px; }
.nv-feature p  { font-size: 1rem; color: var(--nv-muted); margin: 0; }

/* ── what is netivi ─────────────────────────────────────────────────── */

.nv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .nv-split { grid-template-columns: 1fr; gap: 36px; } }

.nv-vs {
    background: var(--nv-raised); border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius); padding: 26px;
}
.nv-vs h3 { font-size: 1rem; margin-bottom: 16px; color: var(--nv-cyan); }
.nv-vs dl { margin: 0; display: grid; gap: 16px; }
.nv-vs dt { font-weight: 700; color: var(--nv-text); font-size: 1.02rem; }
.nv-vs dd { margin: 3px 0 0; font-size: .99rem; color: var(--nv-muted); }

/* ── apps ───────────────────────────────────────────────────────────── */
/*
 * .nv-app is ONE PLATFORM LOGO TILE on the storefront - a white card holding
 * the Fire TV or Samsung mark. It is not "the app".
 *
 * The signed-in area used to carry <body class="nv-app">, which meant every
 * account page was styled as though the whole document were one of these
 * tiles: a white background under near-black cards, a flex column that
 * squeezed the layout, and - worst - `.nv-app span { color: #2b303a }`
 * turning every span on the page dark grey, so the billing figures were
 * near-invisible against their own dark surfaces. It read as a botched
 * redesign; it was a name collision. The shell is .nv-account now.
 * Keep this selector for tiles.
 */

.nv-apps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 720px; margin: 0 auto;
}
@media (max-width: 860px) { .nv-apps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .nv-apps { grid-template-columns: repeat(2, 1fr); } }

.nv-app {
    background: #fff; border-radius: var(--nv-radius); padding: 20px 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 11px; min-height: 118px;
    transition: transform .18s, box-shadow .18s;
}
.nv-app:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.nv-app img { height: 40px; width: auto; object-fit: contain; }
.nv-app span { font-size: .85rem; font-weight: 600; color: #2b303a; text-align: center; line-height: 1.3; }
/* Availability (owner 2026-11-04): a green Available tag, or a dimmed logo with a Coming soon tag. */
.nv-app-tag { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; background: #E2F8EA; color: #0E7A45; }
.nv-app-soon { background: #EEF1F6; }
.nv-app-soon img { filter: grayscale(1); opacity: .55; }
.nv-app-soon span { color: #67718E; }
.nv-app-soon .nv-app-tag { background: #DDE3EE; color: #4A5573; }

/* ── plans ──────────────────────────────────────────────────────────── */

.nv-plans { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; align-items: stretch; }
@media (max-width: 1050px) { .nv-plans { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .nv-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .nv-plans { grid-template-columns: 1fr; } }

.nv-plan {
    background: var(--nv-raised); border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius); padding: 24px 19px;
    display: flex; flex-direction: column; text-align: center;
    position: relative; transition: border-color .18s, transform .18s;
}
.nv-plan:hover { border-color: var(--nv-blue); transform: translateY(-4px); }
.nv-plan.nv-pop {
    border-color: var(--nv-blue);
    background: linear-gradient(180deg, rgba(8,112,207,.16), var(--nv-raised) 55%);
    position: relative;
}
/* The badge on this card is red, so the card's own edge should be too. */
.nv-plan.nv-pop::after {
    content: ''; position: absolute; inset: -1px -1px auto -1px; height: 3px;
    border-radius: var(--nv-radius) var(--nv-radius) 0 0;
    background: linear-gradient(90deg, var(--nv-blue-deep), var(--nv-cyan), var(--nv-red));
}
.nv-plan .nv-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 1;
    background: var(--nv-red); color: #fff; font-size: .75rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
    white-space: nowrap;
}
.nv-plan .nv-n { font-size: .9rem; font-weight: 700; color: var(--nv-muted); text-transform: uppercase; letter-spacing: .09em; }
.nv-plan .nv-price { font-size: 2.15rem; font-weight: 700; color: var(--nv-text); line-height: 1.1; margin: 12px 0 2px; }
.nv-plan .nv-price small { font-size: 1.02rem; font-weight: 600; color: var(--nv-muted); }
.nv-plan .nv-cycle { font-size: .88rem; color: var(--nv-muted); margin-bottom: 4px; }
.nv-plan .nv-savepill {
    display: inline-block; font-size: .8rem; font-weight: 700; color: var(--nv-cyan);
    background: rgba(0,176,240,.12); border-radius: 999px; padding: 3px 10px; margin-bottom: 16px;
}
.nv-plan .nv-btn { margin-top: auto; }

.nv-included {
    margin-top: 40px; background: var(--nv-raised);
    border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 30px;
}
.nv-included h3 { text-align: center; margin-bottom: 22px; }
.nv-inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 800px) { .nv-inc-grid { grid-template-columns: 1fr; gap: 22px; } }
.nv-inc-grid h4 { font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nv-cyan); margin-bottom: 11px; }
.nv-inc-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.nv-inc-grid li { display: flex; gap: 9px; align-items: flex-start; font-size: 1rem; }
.nv-inc-grid li::before { content: '▸'; color: var(--nv-blue); flex-shrink: 0; }

/* ── faq ────────────────────────────────────────────────────────────── */

.nv-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 11px; }
.nv-faq details {
    background: var(--nv-raised); border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius-sm); overflow: hidden;
}
.nv-faq details[open] { border-color: var(--nv-cyan); }
.nv-faq details[open] summary { color: var(--nv-cyan); }
.nv-faq details[open] summary::after { color: var(--nv-red-lift); }
.nv-faq summary {
    padding: 17px 22px; cursor: pointer; font-weight: 600; color: var(--nv-text);
    font-size: 1.07rem; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.nv-faq summary::-webkit-details-marker { display: none; }
.nv-faq summary::after {
    content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--nv-blue);
    flex-shrink: 0; line-height: 1; transition: transform .18s;
}
.nv-faq details[open] summary::after { transform: rotate(45deg); }
.nv-faq .nv-answer { padding: 0 22px 19px; font-size: 1.01rem; color: var(--nv-muted); }
.nv-faq .nv-answer p:last-child { margin-bottom: 0; }

/* ── videos ─────────────────────────────────────────────────────────── */

.nv-vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .nv-vids { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nv-vids { grid-template-columns: 1fr; } }

.nv-vid {
    background: var(--nv-raised); border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius); overflow: hidden;
    display: flex; flex-direction: column; transition: border-color .18s, transform .18s;
}
.nv-vid:hover { border-color: var(--nv-blue); transform: translateY(-3px); }
.nv-vid .nv-thumb {
    aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(8,112,207,.26), rgba(255,0,36,.14)), var(--nv-surface);
    color: #fff; position: relative;
}
.nv-vid .nv-play {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.14); backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255,255,255,.55);
    display: flex; align-items: center; justify-content: center;
}
.nv-vid .nv-body { padding: 17px 19px; }
.nv-vid h3 { font-size: 1.08rem; margin-bottom: 5px; }
.nv-vid p  { font-size: .94rem; color: var(--nv-muted); margin: 0; }
.nv-vid .nv-soon {
    font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--nv-muted); background: var(--nv-surface); border: 1px solid var(--nv-line);
    border-radius: 999px; padding: 3px 9px; position: absolute; top: 11px; right: 11px;
}

/* ── closing call to action ─────────────────────────────────────────── */

.nv-cta {
    text-align: center; border-radius: var(--nv-radius);
    padding: 58px 28px; margin: 0 20px;
    background:
        radial-gradient(620px 300px at 50% 0%, rgba(8, 112, 207, .30), transparent 68%),
        var(--nv-surface);
    border: 1px solid var(--nv-line);
}
.nv-cta h2 { margin-bottom: 12px; }
.nv-cta p  { color: var(--nv-body); max-width: 50ch; margin: 0 auto 26px; }
.nv-cta-btns { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* ── footer ─────────────────────────────────────────────────────────── */

/* The bottom padding clears the floating WhatsApp button, which otherwise
   sits directly on top of the Terms and Privacy links. */
.nv-footer {
    background: var(--nv-surface); border-top: 1px solid var(--nv-line);
    padding: 52px 0 30px; position: relative;
}
.nv-footer::before {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: linear-gradient(90deg,
        var(--nv-red) 0%, var(--nv-cyan) 40%, var(--nv-blue) 74%, var(--nv-blue-deep) 100%);
    opacity: .8;
}
@media (max-width: 760px) { .nv-footer { padding-bottom: 92px; } }
.nv-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
@media (max-width: 760px) { .nv-foot-grid { grid-template-columns: 1fr; gap: 28px; } }
.nv-footer h4 { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nv-muted); margin-bottom: 14px; }
.nv-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.nv-footer a { color: var(--nv-body); font-size: .99rem; }
@media (max-width: 800px) {
    /* Stacked footer links at 21px apart are a row of near-misses on a phone.
       The legal bar at the very bottom is the same problem in one line. */
    .nv-footer li a,
    .nv-foot-base a { display: inline-block; padding: 11px 0; }
}
.nv-footer a:hover { color: var(--nv-text); }
.nv-footer .nv-logo { margin-bottom: 14px; }
.nv-footer .nv-about { font-size: .97rem; color: var(--nv-muted); max-width: 42ch; margin: 0; }
.nv-foot-base {
    border-top: 1px solid var(--nv-line); padding-top: 22px; padding-right: 76px;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: .9rem; color: var(--nv-muted);
}

/* ── floating WhatsApp ──────────────────────────────────────────────── */

.nv-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
    transition: transform .18s;
}
.nv-float:hover { transform: scale(1.07); color: #fff; }

/* ── renewal page ───────────────────────────────────────────────────── */

.nv-narrow { max-width: 560px; margin: 0 auto; }
.nv-kv { display: grid; gap: 12px; margin: 0 0 22px; }
.nv-kv div { display: flex; justify-content: space-between; gap: 16px; font-size: 1.01rem; padding-bottom: 12px; border-bottom: 1px solid var(--nv-line); }
.nv-kv div:last-child { border-bottom: none; padding-bottom: 0; }
.nv-kv dt { color: var(--nv-muted); margin: 0; }
.nv-kv dd { color: var(--nv-text); font-weight: 600; margin: 0; text-align: right; }

.nv-note {
    padding: 15px 17px; border-radius: var(--nv-radius-sm); font-size: .98rem;
    border: 1px solid; margin-bottom: 20px;
}
.nv-note-warn { background: rgba(255, 0, 36, .08);  border-color: rgba(255, 58, 85, .35); color: #FFC3CC; }
.nv-note-info { background: rgba(0, 176, 240, .08); border-color: rgba(0, 176, 240, .30); color: #B8E9FB; }
.nv-note-ok   { background: rgba(37, 211, 102, .08); border-color: rgba(37, 211, 102, .30); color: #B9F0D0; }

/* ── print ──────────────────────────────────────────────────────────── */

/* ── R1 (owner 2026-11-04): the order form is red-lit ───────────────────
   Red only where people buy: a red glow behind the form, a red edge, a red selected-device button and price box,
   and a red "Continue to payment". Every other button stays netivi blue. */
.nv-signup-sec {
    background:
        radial-gradient(620px 380px at 88% 18%, rgba(255, 0, 36, .22), transparent 70%),
        radial-gradient(520px 340px at 8% 92%,  rgba(255, 0, 36, .14), transparent 70%),
        var(--nv-bg);
}
.nv-signup-sec .nv-signup {
    border-color: rgba(255, 58, 85, .38);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 0, 36, .10), 0 18px 70px rgba(255, 0, 36, .18);
}
.nv-signup-sec .nv-signup::before { height: 4px; background: linear-gradient(90deg, #B80019, var(--nv-red), var(--nv-red-lift)); }
.nv-signup-sec .nv-eyebrow { color: var(--nv-red-lift); }
.nv-signup .nv-devices input:checked + label {
    background: linear-gradient(135deg, #FF0024 0%, #E0001F 55%, #B80019 100%); border-color: var(--nv-red); color: #fff;
}
.nv-signup .nv-devices input:focus-visible + label { outline-color: var(--nv-red-lift); }
.nv-signup .nv-quote { background: linear-gradient(135deg, rgba(255, 0, 36, .16), rgba(255, 0, 36, .04)); border-color: rgba(255, 58, 85, .35); }
.nv-signup .nv-btn-primary {
    background: linear-gradient(135deg, #FF0024 0%, #E0001F 55%, #B80019 100%); box-shadow: 0 8px 26px rgba(255, 0, 36, .38);
}
.nv-signup .nv-btn-primary:hover { background: linear-gradient(135deg, #FF3A55, #FF0024); }

@media print {
    .nv-header, .nv-float, .nv-cta, .nv-footer, .nv-btn { display: none !important; }
    body { background: #fff; color: #000; }
}

/* How-to videos (owner 2026-11-04): four real videos, two per row */
.nv-vids-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .nv-vids-4 { grid-template-columns: 1fr; } }
.nv-vid .nv-thumb-video { display: block; background: #000; }
.nv-vid .nv-thumb-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.nv-vid .nv-thumb-video .nv-soon { pointer-events: none; }