/* ==========================================================================
   IGNITE TIVI – STYLESHEET
   ==========================================================================

   TABLE OF CONTENTS
   01. Design tokens (colours, fonts, dark mode)
   02. Base (reset, body, headings, layout helpers)
   03. Components (buttons, tags, tabs, tables, placeholders)
   04. Header & navigation (logo, menu, dropdown, theme toggle)
   05. Footer
   06. Home page (hero, features, devices, pricing, trial bar, how it works, FAQ)
   07. Setup pages (setup-box / setup-tv / setup-vod / setup-mobile)
   08. Product page (box-pro: details, specs, gallery, lightbox)
   09. Effects (card hover glow)
   10. Small phones (max-width 420px overrides)
   11. Reduced motion

   WHERE NEW CODE GOES
   - New colour or font?        -> 01
   - New button / badge / tab?  -> 03
   - Menu or header change?     -> 04
   - Footer change?             -> 05
   - Change to one page?        -> its own section (06, 07 or 08)
   - Card hover glow?           -> 09
   - Phone-only fixes?          -> keep with the component, or 10 if it
                                   must beat rules from several sections

   ORDER MATTERS: when two rules have the same specificity, the one lower
   in this file wins. That is why 09, 10 and 11 stay at the bottom.
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Dark-mode values appear twice on purpose: once for the visitor's system
   setting, once for the manual toggle. Keep the two blocks in sync.
   ========================================================================== */

:root {
    --bg: #EEF4FF;
    --surf: #FFFFFF;
    --ink: #0A1F44;
    --mute: #4A5F85;
    --line: #CFDCF5;
    --cobalt: #1D5BFF;
    --cobalt-ink: #fff;
    --sun: #5CC8FF;
    --tint: #E0ECFF;
    --glow: rgba(92, 200, 255, .55);
    --glow2: rgba(29, 91, 255, .45);
    --disp: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
    --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* dark mode: system preference (unless the visitor forced light) */
@media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --bg: #061226;
        --surf: #0D2147;
        --ink: #E8F1FF;
        --mute: #9DB4DB;
        --line: #1C3566;
        --cobalt: #4C8DFF;
        --cobalt-ink: #061226;
        --sun: #5CC8FF;
        --tint: #12306A;
        --glow: rgba(92, 200, 255, .5);
        --glow2: rgba(76, 141, 255, .5);
    }
}

/* dark mode: forced with the toggle button */
:root[data-theme="dark"] {
    --bg: #061226;
    --surf: #0D2147;
    --ink: #E8F1FF;
    --mute: #9DB4DB;
    --line: #1C3566;
    --cobalt: #4C8DFF;
    --cobalt-ink: #061226;
    --sun: #5CC8FF;
    --tint: #12306A;
    --glow: rgba(92, 200, 255, .5);
    --glow2: rgba(76, 141, 255, .5);
}


/* ==========================================================================
   02. BASE
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px));
}

body {
    background: var(--bg);
    color: var(--ink);
    font: 400 1.0625rem/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
}

/* fills the phone notch area above the sticky header */
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: env(safe-area-inset-top, 0px);
    background: var(--surf);
    z-index: 60;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    font-family: var(--disp);
    line-height: 1.08;
    letter-spacing: -.02em;
}

h1 {
    font-size: clamp(2.5rem, 6.2vw, 4.6rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(1.9rem, 3.8vw, 2.8rem);
    font-weight: 700;
}

h3 {
    font-size: 1.2rem;
    font-weight: 700;
}

p {
    max-width: 62ch;
}

:focus-visible {
    outline: 3px solid var(--sun);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --- Layout helpers --- */

.wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 22px;
}

section {
    padding: 84px 0;
}

.lead {
    color: var(--mute);
    font-size: 1.15rem;
    margin-top: 14px;
}


/* ==========================================================================
   03. COMPONENTS (reused on many pages)
   ========================================================================== */

/* --- Buttons --- */

.btn {
    display: inline-block;
    padding: 13px 24px;
    border-radius: 999px;
    font: 600 1rem var(--body);
    text-decoration: none;
    border: 2px solid var(--cobalt);
    background: var(--cobalt);
    color: var(--cobalt-ink);
    cursor: pointer;
    transition: transform .15s;
    box-shadow: 0 8px 22px -10px var(--glow2);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 24px -2px var(--glow);
}

.btn.ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

/* --- Tag / badge (e.g. "Most popular") --- */

.tag {
    display: inline-block;
    background: var(--sun);
    color: #0A1F44;
    font: 600 .8rem var(--body);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}

/* --- Tabs (pill-shaped switcher, used for boxes and pricing) --- */

.tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    margin-top: 28px;
}

.tabs button {
    border: 0;
    background: none;
    color: var(--ink);
    font: 600 .95rem var(--body);
    padding: 10px 20px;
    min-height: 44px;
    border-radius: 999px;
    cursor: pointer;
}

.tabs button[aria-selected=true],
.tabs button[aria-pressed=true] {
    background: var(--cobalt);
    color: var(--cobalt-ink);
}

.tabs button .save {
    font: 600 .78rem var(--body);
    font-style: normal;
    background: var(--sun);
    color: #0A1F44;
    border-radius: 999px;
    padding: 2px 9px;
    margin-left: 6px;
}

@media (max-width:520px) {
    .tabs button {
        padding: 10px 14px;
    }
}

/* --- Tables (spec tables, product pages) --- */

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 13px 6px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    font-size: 1rem;
}

th {
    width: 38%;
    font-weight: 600;
    color: var(--mute);
}

/* --- Placeholders (dashed picture boxes) --- */

.ph {
    border: 2px dashed var(--line);
    border-radius: 20px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--mute);
    padding: 26px;
    aspect-ratio: 4/3;
}

.ph svg {
    width: 84px;
    height: 84px;
    margin: 0 auto 10px;
    display: block;
}

.ph b {
    display: block;
    color: var(--ink);
    font-family: var(--disp);
}

.ph small {
    font-size: .85rem;
}

.ph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* small variant (thumbnails) */
.ph.sm {
    aspect-ratio: 4/3;
    padding: 8px;
    border-radius: 14px;
}


/* ==========================================================================
   04. HEADER & NAVIGATION
   ========================================================================== */

header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: var(--surf);
    border-bottom: 1px solid var(--line);
}

nav {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 68px;
}

/* --- Logo --- */

.logo {
    font: 800 1.4rem var(--disp);
    text-decoration: none;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
}

.logo img {
    height: 60px;   /* adjust to match your header size */
    width: auto;    /* keeps aspect ratio */
    display: block;
}

/* old text-logo icon (only used if no logo image) */
.logo i {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--cobalt);
    display: grid;
    place-items: center;
}

.logo i::after {
    content: "";
    border-left: 9px solid var(--cobalt-ink);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-left: 3px;
}

/* --- Light / dark logo switching (header AND footer logos) --- */

/* light mode (default): show the light-mode logo, hide the dark one */
.logo img.logo-dark,
.footer-logo img.logo-dark {
    display: none;
}

/* dark mode, system preference (unless the visitor forced light) */
@media (prefers-color-scheme:dark) {

    :root:not([data-theme="light"]) .logo img.logo-light,
    :root:not([data-theme="light"]) .footer-logo img.logo-light {
        display: none;
    }

    :root:not([data-theme="light"]) .logo img.logo-dark,
    :root:not([data-theme="light"]) .footer-logo img.logo-dark {
        display: block;
    }
}

/* dark mode, forced with the toggle */
:root[data-theme="dark"] .logo img.logo-light,
:root[data-theme="dark"] .footer-logo img.logo-light {
    display: none;
}

:root[data-theme="dark"] .logo img.logo-dark,
:root[data-theme="dark"] .footer-logo img.logo-dark {
    display: block;
}

/* --- Menu --- */

.menu {
    display: flex;
    gap: 2px;
    list-style: none;
    padding: 0;
}

.menu>li {
    position: relative;
}

.menu a,
.menu button.tab {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    font: 500 .98rem var(--body);
    color: var(--ink);
    background: none;
    border: 0;
    cursor: pointer;
}

.menu a:hover,
.menu button.tab:hover,
.menu .on>a,
.menu .on>button {
    background: var(--tint);
}

.menu .caret::after {
    content: "";
    display: inline-block;
    margin-left: 7px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    border-bottom: 0;
    vertical-align: 2px;
}

/* --- Dropdown --- */

.drop {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 250px;
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px;
    list-style: none;
    display: none;
    box-shadow: 0 18px 40px -18px rgba(10, 31, 68, .35);
}

.drop small {
    display: block;
    color: var(--mute);
    font-size: .84rem;
}

.has-drop:hover .drop,
.has-drop:focus-within .drop,
.has-drop.open .drop {
    display: block;
}

/* --- Burger (mobile menu button) and dark-mode toggle --- */

#burger {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 12px;
    color: var(--ink);
    font: 600 .95rem var(--body);
    cursor: pointer;
}

#theme {
    background: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 11px;
    color: var(--ink);
    cursor: pointer;
    font-size: 1rem;
    flex: none;
    min-width: 42px;
    display: grid;
    place-items: center;
}

/* --- Mobile navigation --- */

@media (max-width:900px) {
    #burger {
        display: block;
    }

    #burger,
    #theme {
        min-height: 44px;
        min-width: 44px;
    }

    .menu {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        background: var(--surf);
        padding: 10px 16px 18px;
        border-bottom: 1px solid var(--line);
        max-height: calc(100vh - 68px - env(safe-area-inset-top, 0px));
        max-height: calc(100dvh - 68px - env(safe-area-inset-top, 0px));
        overflow-y: auto;
    }

    .menu.show {
        display: flex;
    }

    .menu a,
    .menu button.tab {
        padding: 12px 14px;
        width: 100%;
        text-align: left;
    }

    .drop {
        position: static;
        display: none;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 12px;
    }

    .has-drop:hover .drop {
        display: none;
    }

    .has-drop.open .drop {
        display: block;
    }

    nav .btn {
        display: none;
    }
}


/* ==========================================================================
   05. FOOTER
   ========================================================================== */

footer {
    border-top: 1px solid var(--line);
    background: var(--surf);
    padding: 44px 0 calc(50px + env(safe-area-inset-bottom, 0px));
    color: var(--mute);
    font-size: .95rem;
}

/* logo on the left, links on the right (all screen sizes) */
footer .wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px 32px;
    align-items: start;
}

footer .wrap > div:first-child {
    min-width: 0;
}

footer a {
    margin-right: 18px;
    text-decoration: none;
}

.footer-logo {
    display: inline-block;
    margin-right: 0;
    margin-bottom: 6px;   /* space between logo and copyright text */
}

.footer-logo img {
    height: 45px;         /* adjust to fit your footer */
    width: auto;          /* keeps aspect ratio */
    display: block;
}

.footer-links {
    display: flex;
    flex-direction: column;   /* stack links vertically */
    align-items: flex-end;    /* align to the right */
    justify-self: end;
    text-align: right;
    gap: 8px;
}

.footer-links a {
    display: block;
    margin: 0;
    text-decoration: none;
    color: #8da4c4;
    transition: color .2s ease, transform .2s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

@media (max-width:700px) {
    .footer-links {
        width: 100%;
    }
}


/* ==========================================================================
   06. HOME PAGE (index.html)
   ========================================================================== */

/* --- Hero --- */

.hero {
    padding: 70px 0 40px;
}

.hero .wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
}

.hero p.lead {
    margin: 20px 0 28px;
}

.hero .cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero small {
    display: block;
    margin-top: 18px;
    color: var(--mute);
    font-size: .92rem;
}

@media (max-width:900px) {
    .hero .wrap {
        grid-template-columns: 1fr;
    }
}

/* --- Hero TV frame (glow/shadow comes from section 09) --- */

.tv {
    background: #0A1F44;
    border-radius: 22px;
    padding: 14px;
}

.stand {
    width: 34%;
    height: 12px;
    margin: 0 auto;
    background: #0A1F44;
    border-radius: 0 0 14px 14px;
    opacity: 1;
}

/* --- Hero TV screen with logo --- */

.scr2 {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16/10;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(120% 90% at 50% 30%, #12347A 0%, #0A1F44 55%, #061226 100%);
}

.scr2 .glow {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 64%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 138, 31, .38), rgba(29, 91, 255, .28) 48%, transparent 70%);
    filter: blur(12px);
    animation: glowpulse 4.5s ease-in-out infinite;
}

.tvlogo {
    position: relative;
    width: 78%;
    height: auto;
    margin-top: -6%;
    filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .5));
}

.pill {
    position: absolute;
    top: 14px;
    font: 700 .72rem var(--body);
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(4px);
}

.pill.live {
    left: 16px;
    color: #FF8A1F;
}

.pill.uhd {
    right: 16px;
    color: #5CC8FF;
}

.rail {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.rail span {
    height: 30px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .08);
}

.rail span:first-child {
    background: linear-gradient(135deg, #FF8A1F, #FF3D5A);
    border: 0;
}

.rail span:nth-child(3) {
    background: rgba(92, 200, 255, .35);
    border: 0;
}

@keyframes glowpulse {

    0%,
    100% {
        opacity: .65;
        scale: 1;
    }

    50% {
        opacity: 1;
        scale: 1.1;
    }
}

/* --- Hero TV: older mock screen (keep only if a page still uses it) --- */

.tv .scr {
    border-radius: 12px;
    background: linear-gradient(135deg, #0A1F44, #1D5BFF 60%, #5CC8FF);
    aspect-ratio: 16/10;
    padding: 18px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
    color: #fff;
}

.tv .top {
    display: flex;
    justify-content: space-between;
    font: 600 .8rem var(--body);
    opacity: .9;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.tiles span {
    border-radius: 9px;
    background: rgba(255, 255, 255, .17);
    min-height: 46px;
}

.tiles span:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    background: var(--sun);
}

.tiles span:nth-child(6) {
    background: rgba(255, 255, 255, .34);
}

/* --- Features --- */

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px;
}

.feat {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
}

.feat .ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tint);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.feat p {
    color: var(--mute);
    margin-top: 8px;
    font-size: 1rem;
}

/* the two queries below must stay in this order */
@media (max-width:900px) {
    .grid3 {
        grid-template-columns: 1fr;
    }
}

@media (min-width:600px) and (max-width:900px) {
    .grid3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Devices (Box Pro / Lite tabs) --- */

.devices {
    background: var(--surf);
    border-block: 1px solid var(--line);
}

.dev {
    display: none;
    grid-template-columns: .9fr 1.1fr;
    gap: 44px;
    margin-top: 34px;
    align-items: start;
}

.dev.show {
    display: grid;
}

@media (max-width:900px) {
    .dev.show {
        grid-template-columns: 1fr;
    }
}

/* --- Pricing --- */

/* connections tabs row */
.ptabs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 36px;
    margin-top: 28px;
}

.ptabs .grp {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-weight: 500;
}

.ptabs .tabs {
    margin-top: 0;
}

/* plan cards */
.plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 30px;
    align-items: stretch;
}

.plan {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.plan.pop {
    border: 2px solid var(--cobalt);
    position: relative;
}

.plan.pop .tag {
    position: absolute;
    top: -14px;
    right: 22px;
    margin: 0;
}

.price {
    font: 800 3rem var(--disp);
    margin: 14px 0 4px;
    letter-spacing: -.03em;
}

.price small {
    font: 500 1rem var(--body);
    color: var(--mute);
}

.plan .eq {
    color: var(--mute);
    font-size: .95rem;
    min-height: 1.4em;
}

.plan ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 26px;
    display: grid;
    gap: 10px;
    flex: 1;
}

.plan li::before {
    content: "✓";
    color: var(--cobalt);
    font-weight: 700;
    margin-right: 10px;
}

.plan .btn {
    text-align: center;
}

@media (max-width:900px) {
    .plans {
        grid-template-columns: 1fr;
    }
}

/* old monthly/yearly switch (no longer on the page, kept for reference) */
.bill {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    font-weight: 500;
}

.sw {
    width: 54px;
    height: 30px;
    border-radius: 999px;
    border: 0;
    background: var(--cobalt);
    position: relative;
    cursor: pointer;
}

.sw::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cobalt-ink);
    transition: transform .2s;
}

.sw[aria-checked=true]::after {
    transform: translateX(24px);
}

/* --- Request a Trial bar (under the plan cards) --- */

.trial-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 22px 30px;
    background: var(--surf);
    border: 2px solid var(--cobalt);
    border-radius: 20px;
    color: var(--ink);
    text-decoration: none;
    transition: transform .15s;
}

.trial-bar:hover {
    transform: translateY(-2px);
}

.trial-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trial-text strong {
    font: 800 1.3rem var(--disp);
    letter-spacing: -.02em;
}

.trial-text small {
    font: 500 1rem var(--body);
    color: var(--mute);
}

.trial-cta {
    flex-shrink: 0;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--cobalt);
    color: var(--cobalt-ink);
    font: 600 1rem var(--body);
    white-space: nowrap;
}

@media (max-width:700px) {
    .trial-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 22px 20px;
        gap: 16px;
    }

    .trial-cta {
        text-align: center;
    }
}

/* --- How it works (4 steps) --- */

.how {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    counter-reset: h;
}

.how li {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
    position: relative;
}

.how .n {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cobalt);
    color: var(--cobalt-ink);
    display: grid;
    place-items: center;
    font: 800 1.2rem var(--disp);
    margin-bottom: 16px;
}

.how p {
    color: var(--mute);
    margin-top: 8px;
    font-size: 1rem;
}

/* "Get started" button inside step 1 */
.how .btn {
    margin-top: 18px;
    padding: 10px 22px;
    font-size: .95rem;
}

.how-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 34px;
}

@media (max-width:1000px) {
    .how {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:600px) {
    .how {
        grid-template-columns: 1fr;
    }
}

/* --- FAQ --- */

.faq {
    margin-top: 34px;
    max-width: 780px;
}

details {
    border-bottom: 1px solid var(--line);
    padding: 6px 0;
}

summary {
    cursor: pointer;
    font: 600 1.12rem var(--disp);
    padding: 16px 30px 16px 0;
    list-style: none;
    position: relative;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 12px;
    font-size: 1.6rem;
    color: var(--cobalt);
    transition: transform .2s;
}

details[open] summary::after {
    transform: rotate(45deg);
}

details p {
    color: var(--mute);
    padding: 0 0 18px;
}


/* ==========================================================================
   07. SETUP PAGES (setup-box, setup-tv, setup-vod, setup-mobile)
   ========================================================================== */

/* --- Page header and sub-navigation --- */

.sub {
    padding: 56px 0 20px;
}

/* breadcrumb line (also used on product pages) */
.crumb {
    color: var(--mute);
    font-size: .95rem;
    margin-bottom: 14px;
}

.crumb a {
    color: var(--cobalt);
    display: inline-block;
    padding: 10px 0;
}

.snav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.snav a {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    background: var(--surf);
}

.snav a.cur {
    background: var(--cobalt);
    color: var(--cobalt-ink);
    border-color: var(--cobalt);
}

@media (max-width:900px) {
    .snav a {
        padding: 12px 16px;
    }
}

/* --- Section headings between step lists --- */

.sec {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 56px 0 0;
}

.sec + ol.steps {
    margin-top: 18px;
}

.sec-lead {
    color: var(--mute);
    margin: 12px 0 18px;
}

/* --- Numbered steps --- */

ol.steps {
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
    display: grid;
    gap: 14px;
    counter-reset: s;
    max-width: 820px;
}

ol.steps li {
    counter-increment: s;
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 22px 20px 68px;
    position: relative;
}

ol.steps li::before {
    content: counter(s);
    position: absolute;
    left: 20px;
    top: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cobalt);
    color: var(--cobalt-ink);
    display: grid;
    place-items: center;
    font: 700 .95rem var(--disp);
}

ol.steps b {
    display: block;
    font-family: var(--disp);
    font-size: 1.1rem;
}

ol.steps span {
    color: var(--mute);
}

/* step description text, with inline bold words */
ol.steps li > span {
    display: block;
}

ol.steps span b {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--ink);
}

/* step screenshots */
.shot {
    margin-top: 14px;
}

.shot img {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--tint);
}

/* --- Callouts --- */

.note {
    margin-top: 26px;
    max-width: 820px;
    background: var(--tint);
    border-radius: 14px;
    padding: 16px 20px;
}

.tip {
    margin-top: 18px;
    max-width: 820px;
    background: var(--tint);
    border-left: 4px solid var(--cobalt);
    border-radius: 14px;
    padding: 16px 20px;
}

/* --- Remote buttons table --- */

.table-scroll {
    overflow-x: auto;
    max-width: 820px;
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 6px 18px;
}

.remote-table {
    min-width: 480px;
}

.remote-table thead th {
    color: var(--ink);
    font-family: var(--disp);
}

.remote-table tbody th {
    width: 34%;
    color: var(--ink);
}

.remote-table tbody tr:last-child th,
.remote-table tbody tr:last-child td {
    border-bottom: 0;
}

/* --- Common problems list --- */

.fixes {
    max-width: 820px;
    margin: 18px 0 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 10px;
}

.fixes li::marker {
    color: var(--cobalt);
}

/* --- Space between the last element and the footer (setup + product pages) --- */

main > .wrap > :last-child {
    margin-bottom: clamp(56px, 9vw, 96px);
}


/* ==========================================================================
   08. PRODUCT PAGE (box-pro.html)
   ========================================================================== */

/* --- Product layout --- */

.pd {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 8px;
}

.pd .lead {
    margin: 14px 0 18px;
}

.pd .price {
    font: 800 2.4rem var(--disp);
    margin: 0 0 20px;
}

.pd .price small {
    font: 500 .95rem var(--body);
    color: var(--mute);
}

.thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

ul.hl {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    gap: 10px;
}

ul.hl li::before {
    content: "✓";
    color: var(--cobalt);
    font-weight: 700;
    margin-right: 10px;
}

/* --- Specs --- */

.specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 40px;
    margin-top: 26px;
}

.sg {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 24px;
}

.sg h3 {
    margin-bottom: 6px;
}

.sg tr:last-child th,
.sg tr:last-child td {
    border-bottom: 0;
}

.pd2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 64px;
}

@media (max-width:900px) {

    .pd,
    .specs,
    .pd2 {
        grid-template-columns: 1fr;
    }
}

/* --- Gallery (main image + thumbnails) --- */

.gal {
    min-width: 0;
}

/* main image and thumbnails are buttons */
.gal .ph {
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    appearance: none;
    background: transparent;
    color: inherit;
    font: inherit;
    border-style: solid;
}

.gal .ph:hover {
    transform: none;
}

.gal .ph img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gal-main {
    position: relative;
    width: 100%;
}

.gal-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(10, 31, 68, .78);
    color: #fff;
    font: 600 .8rem var(--body);
    padding: 5px 12px;
    border-radius: 999px;
    pointer-events: none;
}

.gal .thumbs {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.gal .gal-thumb {
    cursor: pointer;
}

.gal .gal-thumb[aria-current="true"] {
    border-color: var(--cobalt);
    box-shadow: 0 0 0 1px var(--cobalt);
}

/* larger thumbnail previews: fill the whole preview instead of letterboxing */
.gal .ph.sm {
    padding: 0;
    aspect-ratio: 4/3;
    border-radius: 12px;
}

.gal .ph.sm img {
    object-fit: cover;
}

/* phones: swipeable strip of thumbnails */
@media (max-width:600px) {
    .gal .thumbs {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 6px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .gal .thumbs .ph.sm {
        flex: 0 0 38%;
        scroll-snap-align: start;
    }
}

/* --- Lightbox (full-screen image viewer) --- */

html.lb-open {
    overflow: hidden;
}

.lb {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 12, 28, .92);
    padding: calc(64px + env(safe-area-inset-top, 0px)) calc(72px + env(safe-area-inset-right, 0px)) calc(64px + env(safe-area-inset-bottom, 0px)) calc(72px + env(safe-area-inset-left, 0px));
}

.lb[hidden] {
    display: none;
}

.lb-fig {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
}

.lb-fig img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
    object-fit: contain;
    background: var(--surf);
    border-radius: 12px;
    touch-action: pinch-zoom;
}

.lb-fig figcaption {
    color: #fff;
    font-size: .95rem;
    text-align: center;
}

.lb-close,
.lb-nav {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font: 400 1.6rem/1 var(--body);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}

.lb-close:hover,
.lb-nav:hover {
    background: rgba(255, 255, 255, .28);
}

.lb-close {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    font-size: 1.2rem;
}

.lb-nav {
    top: 50%;
    translate: 0 -50%;
}

.lb-prev {
    left: calc(12px + env(safe-area-inset-left, 0px));
}

.lb-next {
    right: calc(12px + env(safe-area-inset-right, 0px));
}

@media (max-width:600px) {
    .lb {
        padding: calc(64px + env(safe-area-inset-top, 0px)) 12px calc(104px + env(safe-area-inset-bottom, 0px)) 12px;
    }

    .lb-fig img {
        max-height: calc(100vh - 230px);
        max-height: calc(100dvh - 230px);
    }

    .lb-nav {
        top: auto;
        translate: none;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .lb-prev {
        left: calc(50% - 60px);
    }

    .lb-next {
        right: calc(50% - 60px);
    }
}


/* ==========================================================================
   09. EFFECTS – card glow and hover lift
   Keep this section below all the components it styles.
   To give another card the glow, add its selector to both lists below.
   ========================================================================== */

.feat,
.plan,
.how li,
ol.steps li,
.ph,
.tv {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    box-shadow: 0 0 0 1px transparent, 0 10px 28px -16px var(--glow2), 0 0 18px -8px var(--glow);
}

.feat:hover,
.plan:hover,
.how li:hover,
ol.steps li:hover,
.ph:hover,
.tv:hover {
    transform: translateY(-6px);
    border-color: var(--cobalt);
    box-shadow: 0 0 0 1px var(--cobalt), 0 0 30px -4px var(--glow), 0 22px 44px -18px var(--glow2);
}

/* "Most popular" plan keeps its permanent glow (must stay after the hover rule) */
.plan.pop {
    box-shadow: 0 0 0 1px var(--cobalt), 0 0 34px -6px var(--glow), 0 20px 44px -20px var(--glow2);
}


/* ==========================================================================
   10. SMALL PHONES (max-width 420px)
   Placed last so these beat the base rules in sections 02 to 08.
   ========================================================================== */

@media (max-width:420px) {
    .wrap {
        padding: 0 18px;
    }

    section {
        padding: 60px 0;
    }

    .sg {
        padding: 18px;
    }

    th {
        width: 42%;
    }

    th,
    td {
        font-size: .96rem;
    }

    .plan,
    .feat {
        padding: 22px;
    }

    ol.steps li {
        padding: 18px 18px 18px 62px;
    }

    .scr2 {
        padding: 16px;
    }

    .rail span {
        height: 22px;
    }

    .pill {
        top: 10px;
        font-size: .66rem;
    }
}


/* ==========================================================================
   11. REDUCED MOTION
   For visitors who ask their device to limit animation.
   ========================================================================== */

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .feat:hover,
    .plan:hover,
    .how li:hover,
    ol.steps li:hover,
    .ph:hover,
    .tv:hover,
    .trial-bar:hover {
        transform: none;
    }

    .scr2 .glow {
        animation: none;
    }
}