/*
    Lazavee brand layer for the QuomodoTheme landing template.
    Loaded last; nothing above it is edited by hand except the palette swap.

    The template shipped a yellow scheme and this file used to repaint it in
    the logo's orange. The palette below is the product's, taken from
    resources/css/app.css so the landing page and the dashboard cannot drift
    apart:

        lime   #D6FF3F  neon — every call to action and active indicator
        ink    #071519  near-black blue-green — the page behind everything
        (ink-400 #B7C5C9 is the supporting text; white is every heading)

    Two rules decide most of what follows, and both are the brand doc's
    (docs/09-brand.md 9.3) rather than preferences:

      - Lime never carries white text. #D6FF3F under white is 1.15:1 — not
        dim, invisible. Every lime surface in here is #15211D-on-lime.
      - Lime is never set as type on a light surface either, for the same
        1.15:1. There is one light surface left on this page and it holds a
        screenshot.

    The page itself is dark, which is a bigger change than a repaint: the
    template assumes white sections with dark type throughout, so section 22
    at the foot of this file turns the surfaces over. It is last because it
    has to win, and because keeping it in one place is what makes it possible
    to see what was inverted and what was merely recoloured.

    The ink ramp keeps its light-to-dark ordering — 50 is the lightest, 950
    the darkest — but the product now reads it from the bottom: 950 is the
    page, --lz-ink a card, 800 a raised surface or a quiet line, 400 the
    supporting text, white a heading.
*/

:root {
    --lz-ink: #0f2126;
    --lz-ink-800: #1b333a;
    --lz-ink-700: #30545d;
    --lz-ink-600: #657478;
    --lz-ink-500: #7b898d;
    --lz-ink-400: #b7c5c9;
    --lz-ink-300: #cbd5d8;
    --lz-ink-200: #d6e0e2;
    --lz-ink-100: #e9eff0;
    --lz-ink-50: #f6f9f9;
    --lz-ink-950: #071519;

    --lz-accent: #d6ff3f;
    --lz-accent-soft: #e2ff79;
    --lz-accent-pale: #eeffae;
    /* Hover, then pressed. Darkening rather than lightening, because a
       control that gets paler reads as disabled. */
    --lz-accent-strong: #bce037;
    --lz-accent-press: #a3c230;
    /* The one colour allowed on a lime surface: 14.39:1. */
    --lz-on-accent: #15211d;
    /* Lime as TYPE on a light surface, for the rare rule that still needs
       one. 5.51:1 on white, where the neon itself is 1.15:1. */
    --lz-accent-ink: #5e701c;

    /* The two washes behind the hero and the closing panel. Both carry
       white (10.32:1, 14.83:1), supporting text and the accent. */
    --lz-forest: #354529;
    --lz-navy: #0a2945;

    /* Warning and error, which a rebrand repaints around rather than
       through. Still the colours everybody already reads as those things. */
    --lz-coral: #f33741;
    --lz-coral-600: #d12f38;
    --lz-amber: #fe900f;
    --lz-amber-200: #ffdeb7;
    --lz-amber-950: #402404;
    --lz-amber-700: #b2650b;
}

/* -------------------------------------------------------------------------
   1. Focus, motion and the skip link

   The template has no visible focus style at all, which makes the whole page
   unusable from a keyboard. Coral at 3.86:1 clears the 3:1 a focus indicator
   needs and is the one place the exact logo red earns its keep.
   ---------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--lz-coral);
    outline-offset: 3px;
    border-radius: 4px;
}

.lz-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--lz-ink);
    color: #fff;
    padding: 14px 22px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
}

.lz-skip:focus {
    left: 0;
    color: #fff;
}

/* For the half of a label that only makes sense if you cannot see the screen —
   at the moment, the warning that the demo opens in a tab of its own. There is
   no Tailwind on this page, so `sr-only` would simply render as visible text. */
.lz-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* The theme animates almost everything on scroll. Honour the system setting
   rather than shipping a page that moves at somebody who asked it not to. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .wow {
        visibility: visible !important;
        animation-name: none !important;
    }

    .lz-hero-frame video {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   2. The hero

   The yellow artwork the template used (assets/img/background/blue_bg.png,
   yellow despite the name) was replaced by a gradient so the colour is a
   token rather than a PNG nobody can edit. The gradient is now the brand's
   own wash: a forest ellipse in the top-left and a navy one in the
   bottom-right over the page colour. Both are dark enough to carry white
   (10.32:1 and 14.83:1), the supporting text (5.82:1, 8.36:1) and the accent
   (8.96:1, 12.88:1), which is what lets the copy sit on top of them instead
   of being pushed to a flat strip beside them.
   ---------------------------------------------------------------------- */
.welcome-text-area .area-bg {
    background:
        radial-gradient(ellipse at 18% 12%, var(--lz-forest) 0%, transparent 52%),
        radial-gradient(ellipse at 85% 80%, var(--lz-navy) 0%, transparent 58%),
        var(--lz-ink-950);
}

/* A soft wash in the bottom-right so the flat gradient has somewhere to go
   behind the product frame. A hint of the accent rather than white, at a
   twentieth of its strength — enough to lift the corner, nowhere near enough
   to read as a second lime surface. */
.welcome-text-area .area-bg::after {
    background: radial-gradient(60% 70% at 78% 62%, rgba(214, 255, 63, 0.05) 0%, rgba(214, 255, 63, 0) 70%);
}

.welcome-text-area .welcome-text h4 {
    color: var(--lz-accent);
    opacity: 1;
}

.welcome-text-area .welcome-text h1 {
    color: #fff;
    letter-spacing: -0.02em;
}

/* The second line of the headline, which is the one the page is about. It is
   the largest piece of lime on the page and the only type set in it at this
   size — past that it stops being emphasis and becomes the body colour. */
.welcome-text-area .welcome-text h1 span {
    color: var(--lz-accent);
    font-weight: 400;
    text-shadow: none;
}

.welcome-text-area .welcome-text p {
    color: var(--lz-ink-400);
}

/* Lime pill primary, outlined secondary. Never white-on-lime. */
.welcome-text-area .home-button a {
    background: var(--lz-accent) !important;
    color: var(--lz-on-accent) !important;
    border: 2px solid var(--lz-accent);
    /* The one glow on the page, and it is light spilling off the accent
       rather than a shadow — there is nothing for a dark button to cast one
       onto. */
    box-shadow: 0 14px 40px -12px rgba(214, 255, 63, 0.35);
}

.welcome-text-area .home-button a:last-child {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid var(--lz-ink-700);
    box-shadow: none;
}

.welcome-text-area .home-button a:hover,
.welcome-text-area .home-button a:focus {
    background: var(--lz-accent-strong) !important;
    color: var(--lz-on-accent) !important;
    border-color: var(--lz-accent-strong);
}

.welcome-text-area .home-button a:last-child:hover,
.welcome-text-area .home-button a:last-child:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    border-color: var(--lz-ink-600);
}

.lz-hero-note {
    color: var(--lz-ink-400);
    font-size: 14px;
    margin-top: 22px;
}

/* -------------------------------------------------------------------------
   3. The header over the hero
   ---------------------------------------------------------------------- */
/* The template writes these with an ID — `ul#nav li a` and `.is-sticky ul#nav
   li a` — so a class-only rule here never applied at all. Once the bar stuck,
   every link that was not the current one took the theme's own #252525: a
   1.07:1 near-black on a near-black bar, which is how a menu disappears while
   leaving exactly one item behind.

   Matched on specificity and placed last rather than beaten with !important,
   so the mobile drawer in section 20 — which does use !important, over a
   different surface — still wins where it should. */
ul#nav li > a,
.is-sticky ul#nav li > a {
    color: var(--lz-ink-400);
    font-weight: 600;
}

/* The current section, which is what the accent is for. The template fades
   the active item instead, which on a dark bar reads as the disabled one. */
ul#nav li > a:hover,
ul#nav li > a:focus,
ul#nav li.active > a,
ul#nav li.hover > a,
ul#nav li.current-menu-parent > a,
ul#nav li.current-menu-item > a,
.is-sticky ul#nav li > a:hover,
.is-sticky ul#nav li > a:focus,
.is-sticky ul#nav li.active > a,
.is-sticky ul#nav li.hover > a,
.is-sticky ul#nav li.current-menu-parent > a,
.is-sticky ul#nav li.current-menu-item > a {
    color: var(--lz-accent);
    opacity: 1;
}

.header-call-to-action .action-button {
    background: var(--lz-accent) !important;
    color: var(--lz-on-accent) !important;
    border-color: var(--lz-accent) !important;
}

.header-call-to-action .action-button:hover,
.header-call-to-action .action-button:focus {
    background: var(--lz-accent-strong) !important;
    color: var(--lz-on-accent) !important;
    border-color: var(--lz-accent-strong) !important;
}

.ham .line {
    stroke: #fff;
}

/* Once the menu sticks it sits on its own bar rather than over the hero, so
   it takes the card colour and an edge instead of a shadow: a dark bar over a
   dark page has no light to block and separates by being lighter. */
.mainmenu-area.is-sticky .mainmenu-area-bg {
    box-shadow: none;
}

.navbar-header .custom-logo-link img {
    max-height: 46px;
    width: auto;
}

.lz-logo-text {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.footer-logo img {
    max-height: 54px;
    width: auto;
}

/* -------------------------------------------------------------------------
   4. The product frame

   One browser window, tilted, holding the real widget. It replaces the three
   rotated phone screenshots the template used, because this product is a
   script on somebody's website rather than an app on a phone — and because
   the only honest screenshots available are of a browser.
   ---------------------------------------------------------------------- */
.lz-hero-stage {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-46%);
    width: 50%;
    max-width: 760px;
    padding-right: 3%;
    z-index: 5;
}

.lz-hero-stage .lz-hero-frame {
    transform: perspective(1600px) rotateY(-14deg) rotateX(4deg) rotate(1.4deg);
}

/* Dark chrome round a light screenshot, which is what a browser in dark mode
   showing an ordinary website actually looks like — and which stops the one
   genuinely light thing on this page from arriving with a white frame bolted
   to the top of it. The shot inside is untouched: it is a photograph of the
   product on a customer's site, and repainting it would be a lie. */
.lz-browser {
    background: var(--lz-ink);
    border: 1px solid var(--lz-ink-800);
    border-radius: 14px;
    box-shadow: 0 40px 80px rgba(4, 14, 17, 0.55), 0 6px 18px rgba(4, 14, 17, 0.4);
    overflow: hidden;
}

.lz-browser-bar {
    align-items: center;
    background: var(--lz-ink-800);
    border-bottom: 1px solid var(--lz-ink-700);
    display: flex;
    gap: 7px;
    padding: 11px 14px;
}

.lz-browser-bar span {
    background: var(--lz-ink-600);
    border-radius: 50%;
    display: block;
    height: 10px;
    width: 10px;
}

/* The two traffic lights. Red and amber here are a drawing of a window
   control, not brand colours, so the rebrand leaves them where they are. */
.lz-browser-bar span:first-child {
    background: var(--lz-coral);
}

.lz-browser-bar span:nth-child(2) {
    background: var(--lz-amber);
}

.lz-browser-bar em {
    background: var(--lz-ink-950);
    border: 1px solid var(--lz-ink-700);
    border-radius: 20px;
    color: var(--lz-ink-400);
    flex: 1;
    font-size: 11px;
    font-style: normal;
    margin-left: 10px;
    overflow: hidden;
    padding: 4px 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lz-browser-body {
    background: var(--lz-ink-950);
    line-height: 0;
    position: relative;
}

.lz-browser-body img,
.lz-browser-body video {
    display: block;
    height: auto;
    width: 100%;
}

.lz-browser-body video {
    left: 0;
    position: absolute;
    top: 0;
}

/* The rule above sets display:block on the video, which beats the UA stylesheet
   rule behind the hidden attribute — so the video covered the poster with its
   own first frame while still marked hidden. */
.lz-browser-body video[hidden] {
    display: none;
}

.lz-video-toggle {
    background: rgba(7, 21, 25, 0.86);
    border: 0;
    border-radius: 20px;
    bottom: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    padding: 7px 14px;
    position: absolute;
    right: 12px;
    z-index: 2;
}

/* -------------------------------------------------------------------------
   5. Accent type

   The section kickers and the highlighted half of each heading. On the dark
   page the neon can be set as type directly — 16.13:1 — which is the one
   thing a colour this bright is unambiguously good at. The old rule that
   pushed it down to an 800 shade applied to a white surface, and there is no
   longer a white surface with words on it.
   ---------------------------------------------------------------------- */
.subtitle {
    color: var(--lz-accent);
}

.area-title h2 span,
.area-content h3 span {
    color: var(--lz-accent);
}

/* -------------------------------------------------------------------------
   6. Lime surfaces carry #15211D, never white

   Every selector below is something the template fills with the brand colour
   — a button, the active price tab, the back-to-top disc. White on #D6FF3F
   is 1.15:1, so each one takes the on-accent colour instead.
   ---------------------------------------------------------------------- */
.read-more:hover,
.read-more:focus,
.read-more.active,
.read-more.active:hover,
.read-more.active:focus {
    color: var(--lz-on-accent);
}

.price-menu li.active a {
    color: var(--lz-on-accent);
}

.sale-promo {
    color: var(--lz-on-accent);
}

/* The plan card is NOT filled with the accent — see section 7 — so its
   contents are ordinary type on a dark card rather than labels on lime. */
.single-price:hover,
.single-price.active,
.single-price:hover .price-rate,
.single-price.active .price-rate,
.single-price:hover .price-title,
.single-price.active .price-title,
.single-price:hover .price-details li,
.single-price.active .price-details li {
    color: var(--lz-ink-400);
}

.single-price.active .price-header {
    border-bottom-color: var(--lz-ink-800);
}

.purchase-button:hover,
.purchase-button:focus {
    box-shadow: 0 16px 36px -14px rgba(214, 255, 63, 0.4);
    color: var(--lz-on-accent);
}

.panel.panel-default.active,
.panel.panel-default.active .panel-title,
.panel.panel-default.active .panel-body,
.panel.panel-default.active .accordion-toggle {
    color: var(--lz-on-accent);
}

.panel.panel-default.active .panel-body a {
    color: var(--lz-on-accent);
    text-decoration: underline;
}

.scrolltotop {
    color: var(--lz-on-accent);
}

.scrolltotop:hover,
.scrolltotop:focus {
    color: var(--lz-on-accent);
}

/* -------------------------------------------------------------------------
   7. Pricing

   One plan rather than the template's two, so the card is centred and given
   a ceiling instead of being stretched across a twelve-column row.
   ---------------------------------------------------------------------- */
.lz-price-card {
    margin: 0 auto;
    max-width: 480px;
}

/* The figure the whole section exists to show, so it is the one number on
   the page set in the accent. */
.lz-price-amount {
    color: var(--lz-accent);
    font-size: 54px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.lz-price-amount .lz-price-period {
    color: var(--lz-ink-400);
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 10px;
}

.single-price.active .lz-price-amount {
    color: var(--lz-accent);
}

.single-price.active .lz-price-amount .lz-price-period {
    color: var(--lz-ink-400);
    opacity: 1;
}

.lz-price-alt {
    color: var(--lz-ink-400);
    font-size: 14px;
    margin-top: 18px;
}

.single-price.active .lz-price-alt {
    color: var(--lz-ink-400);
}

/* The region switch. A link rather than a tab, because this page is cached at
   the edge and has no session to remember a choice in — the market lives in
   the URL and a reload is the whole mechanism. */
.lz-region {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 14px;
}

.lz-region a {
    border: 1.5px solid var(--lz-ink-700);
    border-radius: 50px;
    color: var(--lz-ink-400);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 8px 20px;
    text-transform: uppercase;
}

.lz-region a:hover,
.lz-region a:focus {
    border-color: var(--lz-ink-500);
    color: #fff;
}

/* The selected market. A filled chip rather than a tinted one, because this
   is a control whose current value a visitor has to be able to read off the
   page before they trust the number underneath it. */
.lz-region a[aria-current="page"] {
    background: var(--lz-accent);
    border-color: var(--lz-accent);
    color: var(--lz-on-accent);
}

.lz-price-note {
    color: var(--lz-ink-400);
    font-size: 13px;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 620px;
    text-align: center;
}

.lz-notice {
    background: var(--lz-amber-950);
    border-bottom: 1px solid var(--lz-amber-700);
    color: var(--lz-amber-200);
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 20px;
    text-align: center;
}

/* -------------------------------------------------------------------------
   8. The install snippet

   Carried over from the previous landing page. It is the single most
   convincing thing on the page for the sort of person who will actually paste
   it, and it costs three lines.
   ---------------------------------------------------------------------- */
/* The snippet used to be the one dark block on a white page and separated by
   being darker than everything round it. It is now the same colour as the
   page, so it separates with an edge instead. */
.lz-snippet {
    background: var(--lz-ink-950);
    border: 1px solid var(--lz-ink-800);
    border-radius: 14px;
    box-shadow: none;
    margin-top: 40px;
    padding: 26px 28px;
}

.lz-snippet-label {
    color: var(--lz-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.lz-snippet pre {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--lz-ink-100);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
    overflow-x: auto;
    padding: 0;
    white-space: pre;
}

.lz-snippet code {
    background: transparent;
    color: inherit;
    font-size: inherit;
    padding: 0;
}

.lz-snippet-caption {
    color: var(--lz-ink-400);
    font-size: 13px;
    line-height: 1.7;
    margin: 16px 0 0;
}

.lz-snippet-caption code {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: var(--lz-accent);
    padding: 2px 6px;
}

/* -------------------------------------------------------------------------
   9. Screenshots

   Landscape rather than the template's portrait phones, because the thing
   being shown is a widget inside somebody's website.
   ---------------------------------------------------------------------- */
.screenshot-slider .single-screenshot {
    margin: 20px 14px 40px;
}

.single-screenshot .lz-browser {
    box-shadow: 0 24px 50px rgba(4, 14, 17, 0.45);
}

.single-screenshot img {
    filter: none;
}

/* ── The shots as a gallery ───────────────────────────────────────────────
   Each screenshot is a link to its own full-size file. Three things mark it
   as one: the frame tilts, a magnifier fades in over the picture, and the
   edge takes the accent. The tilt is the same move the hero frame makes, at
   a third of the angle — enough to lift the card off the page, not enough to
   make the text inside it unreadable while the cursor is still on its way.
   ---------------------------------------------------------------------- */
.lz-shot {
    display: block;
    position: relative;
    line-height: 0;
}

/* The four triggers the lightbox is actually bound to. Taken out of the flow
   rather than display:none, because a plugin that measures its trigger on
   click should find something real to measure. They are aria-hidden and
   tabindex="-1" in the markup — the visible pictures are the ones a keyboard
   reaches, and these are their stand-ins. */
.lz-shot-gallery {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.lz-shot-zoom {
    align-items: center;
    background: rgba(7, 21, 25, 0.55);
    border-radius: 999px;
    color: var(--lz-on-accent);
    display: flex;
    height: 56px;
    justify-content: center;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
    width: 56px;
}

.lz-shot-zoom .fa {
    font-size: 20px;
    line-height: 1;
}

/* Keyboard first, mouse second: :focus-visible is listed alongside :hover on
   the link itself so tabbing to a shot shows exactly what pointing at it
   shows — the page's own focus ring lands on the same element. */
.lz-shot:hover .lz-shot-zoom,
.lz-shot:focus-visible .lz-shot-zoom {
    background: var(--lz-accent);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* A scrim under the icon so it reads over a pale screenshot as well as a
   dark one, since these are pictures of somebody else's website. */
.lz-shot::after {
    background: rgba(7, 21, 25, 0.35);
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 0.25s ease;
}

.lz-shot:hover::after,
.lz-shot:focus-visible::after {
    opacity: 1;
}

.single-screenshot .lz-browser {
    transition: transform 0.35s cubic-bezier(0.2, 0.65, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.single-screenshot:hover .lz-browser,
.single-screenshot:focus-within .lz-browser {
    border-color: var(--lz-accent);
    box-shadow: 0 30px 60px rgba(4, 14, 17, 0.6), 0 0 0 1px rgba(214, 255, 63, 0.25);
}

@media (prefers-reduced-motion: no-preference) {
    .single-screenshot:hover .lz-browser,
    .single-screenshot:focus-within .lz-browser {
        transform: perspective(1200px) rotateY(-5deg) rotateX(3deg) scale(1.02);
    }
}

/* The lifted card is deliberately kept inside the margins .single-screenshot
   already has (20px top, 40px bottom, 14px each side), so the owl stage can
   go on clipping as it was built to. Opening the stage's overflow instead
   would let the strip spill left over the heading beside it — that clip is
   what makes the next screenshot sit half-visible past the edge rather than
   on top of the copy. */

.lz-shot-caption {
    color: var(--lz-ink-400);
    font-size: 13px;
    line-height: 1.7;
    margin: 16px 2px 0;
}

.lz-shot-caption strong {
    color: #fff;
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

/* -------------------------------------------------------------------------
   10. The problem list and the slot proof

   Two blocks the previous page carried that the template has no slot for, and
   that are worth more than anything the template would have put there: they
   are specific, and they are provable.
   ---------------------------------------------------------------------- */
.lz-problem {
    border-top: 1px solid var(--lz-ink-800);
    margin-top: 10px;
    padding-top: 26px;
}

.lz-problem p {
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 26px;
}

.lz-problem p span {
    color: var(--lz-ink-400);
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    margin-top: 6px;
}

.lz-slot {
    align-items: center;
    background: var(--lz-ink);
    border: 1px solid var(--lz-ink-800);
    border-radius: 18px;
    color: #fff;
    display: inline-flex;
    gap: 18px;
    padding: 26px 34px;
}

.lz-slot b {
    color: var(--lz-accent);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.lz-slot span {
    color: var(--lz-ink-400);
    font-size: 14px;
    line-height: 1.6;
}

.lz-limitation {
    border-left: 3px solid var(--lz-accent);
    color: var(--lz-ink-400);
    font-size: 15px;
    line-height: 1.9;
    margin-top: 40px;
    padding-left: 22px;
}

/* -------------------------------------------------------------------------
   11. The counters

   The template's fun-fact row. Every number in it is one this codebase can
   back, which is the only reason the row survived.
   ---------------------------------------------------------------------- */
.single-fun-fact h3 {
    color: #fff;
}

.video-promo-area.white .single-fun-fact h3 {
    color: #fff;
}

.lz-fact-unit {
    color: var(--lz-accent);
    font-size: 22px;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   12. The closing panel

   The template's contact section, turned into the last call to action. There
   is no form: the sign-up lives behind one button and a form here would only
   collect an address we would then have to email.
   ---------------------------------------------------------------------- */
/* The same wash as the hero, mirrored, so the page opens and closes on the
   same two colours. */
#start {
    background:
        radial-gradient(ellipse at 82% 10%, var(--lz-forest) 0%, transparent 54%),
        radial-gradient(ellipse at 14% 86%, var(--lz-navy) 0%, transparent 58%),
        var(--lz-ink-950);
}

#start .area-title h2,
#start .lz-start-card h3 {
    color: #fff;
}

#start .area-title h4.subtitle {
    color: var(--lz-accent);
}

#start .lz-start-lead {
    color: var(--lz-ink-400);
    font-size: 15px;
    line-height: 1.9;
    margin: 0 auto 50px;
    max-width: 660px;
    text-align: center;
}

#start .lz-benefit {
    display: flex;
    gap: 18px;
    margin-bottom: 30px;
}

#start .lz-benefit-icon {
    align-items: center;
    background: rgba(214, 255, 63, 0.1);
    border: 1px solid rgba(214, 255, 63, 0.35);
    border-radius: 14px;
    display: flex;
    flex: 0 0 52px;
    height: 52px;
    justify-content: center;
}

#start .lz-benefit-icon i {
    color: var(--lz-accent);
    font-size: 22px;
}

#start .lz-benefit h3 {
    color: #fff;
    font-size: 17px;
    margin: 2px 0 8px;
}

#start .lz-benefit p {
    color: var(--lz-ink-400);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

/* The last card on the page, and the only one carrying a glow: a single
   ring of the accent at a fifth of its strength, because this is the one
   thing the page is asking anybody to do. */
#start .lz-start-card {
    background: var(--lz-ink);
    border: 1px solid var(--lz-ink-800);
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(214, 255, 63, 0.18), 0 24px 70px -34px rgba(214, 255, 63, 0.35);
    padding: 40px 34px;
}

#start .lz-start-card h3 {
    color: #fff;
    font-size: 21px;
    margin-bottom: 10px;
}

#start .lz-start-card p {
    color: var(--lz-ink-400);
    font-size: 14px;
    line-height: 1.8;
}

#start .lz-trial-badge {
    background: var(--lz-accent);
    border-radius: 999px;
    color: var(--lz-on-accent);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
    padding: 7px 18px;
    text-transform: uppercase;
}

#start .lz-start-list {
    list-style: none;
    margin: 22px 0 28px;
    padding: 0;
}

#start .lz-start-list li {
    color: var(--lz-ink-400);
    font-size: 14.5px;
    line-height: 1.7;
    padding: 9px 0 9px 30px;
    position: relative;
}

#start .lz-start-list li i {
    color: var(--lz-accent);
    left: 0;
    position: absolute;
    top: 12px;
}

#start .lz-fineprint {
    color: var(--lz-ink-500);
    font-size: 12.5px;
    line-height: 1.8;
    margin-top: 18px;
}

#start .lz-fineprint a {
    color: var(--lz-accent);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   13. Footer

   footer-reveal.min.js is not loaded, but the theme's own stylesheet still
   assumes it: the footer is positioned as a reveal panel and disappears
   behind the page without it.
   ---------------------------------------------------------------------- */
.footer-area {
    bottom: auto !important;
    position: relative !important;
    width: auto !important;
    z-index: 1 !important;
}

.footer-area .single-widgets p {
    line-height: 1.9;
}

/* -------------------------------------------------------------------------
   14. Responsive

   Below the template's 991px breakpoint the hero stage stops being an overlay
   and becomes an ordinary block under the copy.
   ---------------------------------------------------------------------- */
/* The overlay layout needs room for a seven-column paragraph AND a frame
   wide enough to read. Below 1200px there is not enough of either, and the
   frame starts covering the end of every line, so the two stack instead. */
@media only screen and (max-width: 1199px) {
    .lz-hero-stage {
        margin: 46px auto 0;
        max-width: 620px;
        padding-right: 0;
        position: static;
        transform: none;
        width: 100%;
    }

    .lz-hero-stage .lz-hero-frame {
        transform: none;
    }

    .welcome-area .welcome-text {
        margin-inline: auto;
        max-width: 760px;
        text-align: center;
    }

    .welcome-area .col-md-7 {
        width: 100%;
    }

    .lz-slot {
        padding: 22px 26px;
    }
}

@media only screen and (max-width: 767px) {
    .welcome-text-area .welcome-text h1 {
        font-size: 36px;
    }

    .lz-price-amount {
        font-size: 44px;
    }

    .lz-snippet {
        padding: 20px 18px;
    }

    .lz-snippet pre {
        font-size: 11.5px;
    }
}

/* -------------------------------------------------------------------------
   15. Loose ends in the theme that this page's markup changes

   The template assumed a phone screenshot wherever this page puts a browser
   frame, and a yellow background image wherever this page puts a wash. Each
   rule below exists because of one of those two substitutions.
   ---------------------------------------------------------------------- */
.custom-logo-link {
    gap: 10px;
}

/* The trust band used the hero's artwork behind white text. It is now a
   band of the card colour fading back into the page — a tint rather than a
   picture, and the same move the light version made, inverted. */
.video-promo-area .area-bg {
    background: linear-gradient(180deg, var(--lz-ink) 0%, var(--lz-ink-950) 100%);
}

.video-promo-area .area-content h3,
.video-promo-area .area-content p {
    color: inherit;
}

/* 70% was right for a portrait phone and wrong for a browser window. */
.area-image-content .lz-browser img {
    max-width: 100%;
}

/* The FAQ cut-out. Portrait, where the browser frame it replaces was
   landscape, so the theme's -100px lift would carry it up out of the section
   — it sits nearer the copy beside it instead. The theme's own 70% cap is
   overridden here rather than removed, because .faqs-mockup-1 img is the
   selector it uses and this is the only image left under it. */
.faqs-mockup-1 {
    top: -20px;
}

.faqs-mockup-1 .lz-faq-photo {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin-inline: auto;
}

.goal-layers .goal-layer-1 {
    position: relative;
    z-index: 2;
}

/* The cut-out in the "it is your phone" section. Square, where everything
   else on this page is 16:9, so it is capped rather than left to fill a
   five-column well — at full width it would stand half again as tall as the
   copy it is meant to sit beside. The dot layer behind it keeps its own
   z-index: -1 and reads through the transparency. */
.lz-goal-photo {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin-inline: auto;
}

/* The one plan is always the featured card, so the template fills it with
   the brand colour — a whole pricing panel of neon, which is exactly what
   "restrained accents" is not. Section 22 turns the fill off and gives the
   card a lime edge instead; these are the pieces inside it. */
.single-price.active .price-details ul li i,
.single-price.active .dripicons-cross {
    color: var(--lz-accent);
}

.single-price.active .sale-promo {
    background: var(--lz-amber-950);
    color: var(--lz-amber-200);
}

/* The one button in the card, and the thing the card is for. */
.single-price.active .purchase-button {
    background: var(--lz-accent);
    color: var(--lz-on-accent);
}

.single-price.active .purchase-button:before {
    background: var(--lz-accent-strong);
}

.single-price.active .purchase-button:hover,
.single-price.active .purchase-button:focus {
    color: var(--lz-on-accent);
}

.price-menu li a {
    color: var(--lz-ink-400);
}

.price-menu li a:hover,
.price-menu li a:focus {
    color: #fff;
}

/* Long words in a 320px column are the one thing that puts a horizontal
   scrollbar on this page. */
.welcome-text h1,
.area-title h2,
.area-content h3 {
    overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
   16. The footer

   The theme fills it with the brand colour and sets every word in white. In
   the old palette that was 2.28:1 on amber; in this one it would be a
   full-width band of neon, which is worse — the single largest surface on the
   page painted in the colour reserved for the thing you are meant to click.
   The fill is dropped in section 22 and the footer takes the card colour; the
   type is white and its supporting lines are #B7C5C9, as everywhere else.
   ---------------------------------------------------------------------- */
.footer-area.white,
.footer-area.white a,
.footer-area.white p,
.footer-area.white h1,
.footer-area.white h2,
.footer-area.white h3,
.footer-area.white h4,
.footer-area.white h5,
.footer-area.white h6,
.footer-area.white small {
    color: #fff;
}

.footer-area .single-widgets p,
.footer-area .footer-copyright p {
    color: var(--lz-ink-400);
}

.footer-area.white a {
    color: var(--lz-ink-400);
}

.footer-area.white a:hover,
.footer-area.white a:focus {
    color: var(--lz-accent);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* The footer's own call to action, which is the same button as everywhere
   else rather than an inverted one. */
.footer-area .read-more.active {
    background: var(--lz-accent);
    color: var(--lz-on-accent);
}

.footer-area .read-more.active:hover,
.footer-area .read-more.active:focus {
    background: var(--lz-accent-strong);
    color: var(--lz-on-accent);
}

.footer-area .read-more::before,
.footer-area .read-more.active::before {
    display: none;
}

.footer-area .footer-bottom-area {
    border-top: 1px solid var(--lz-ink-800);
}

/* -------------------------------------------------------------------------
   18. Pricing card spacing

   60px above and below the rule was sized for a plan card with an icon and a
   two-word title. This one carries the amount and both billing periods.
   ---------------------------------------------------------------------- */
.lz-price-card .price-header {
    margin-bottom: 34px;
    padding-bottom: 30px;
}

/* -------------------------------------------------------------------------
   19. The hero below the desktop breakpoint

   The theme gives the hero height:100% and centres it with flex. Once the
   copy is taller than the viewport — which it is on any phone — a centred
   flex child overflows in BOTH directions, so the kicker and the first line
   of the heading ended up above the top of the page, behind the menu bar.
   Height auto and ordinary padding instead.
   ---------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
    .welcome-text-area {
        height: auto;
        padding-top: 0;
    }

    .welcome-area {
        display: block;
        height: auto;
        padding-top: 60px;
    }
}

@media only screen and (max-width: 991px) {
    /* The menu bar stops being part of the flow and starts sitting over the
       hero, so the hero has to leave room for it. */
    .welcome-area {
        padding-top: 140px;
    }
}

@media only screen and (max-width: 767px) {
    .welcome-text-area .welcome-text h1 {
        font-size: 32px;
    }
}

@media only screen and (max-width: 479px) {
    .welcome-text-area .welcome-text h1 {
        font-size: 28px;
    }

    .welcome-text-area .home-button a {
        display: block;
        text-align: center;
    }
}

/* -------------------------------------------------------------------------
   20. The mobile menu

   The theme sets the drawer's links in the brand colour and the open item in
   white on the brand colour — 1.15:1 both ways now. Same fix as everywhere
   else: white on the drawer, #15211D on lime. The drawer itself is given the
   card colour in section 22. Marked !important because the rules being
   corrected are.
   ---------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    ul#nav li a,
    .is-sticky ul#nav li a {
        color: #fff !important;
        font-weight: 500 !important;
    }

    .current-menu-parent > a,
    ul#nav li.has-sub.open > a,
    ul#nav li a:hover,
    ul#nav li a:focus,
    ul#nav li.active > a,
    ul#nav li.current-menu-item > a,
    ul#nav li.hover > a,
    ul#nav li.open.menu-item-has-children > a {
        background: var(--lz-accent) !important;
        color: var(--lz-on-accent) !important;
    }

    /* Two hamburgers sit on top of each other here: stellarnav draws the
       bordered box with a FontAwesome glyph in white, and the theme draws its
       own animated SVG over it. On the orange bar the white glyph is
       invisible, so the SVG is the one that shows and the glyph goes. */
    .stellarnav .menu-toggle i {
        display: none;
    }
}

/* The slider is deliberately wider than its column on desktop, so the next
   screenshot is half-visible past the edge. On a phone that is just a card
   with its right-hand side cut off. */
@media only screen and (max-width: 991px) {
    .screenshot-slider {
        width: 100%;
    }

    .screenshot-slider .single-screenshot {
        margin-inline: 6px;
    }
}

/* -------------------------------------------------------------------------
   21. The questions

   The template's accordion is a Bootstrap collapse, which hides seven of the
   eight answers with CSS and needs JavaScript to show them again. These are
   <details> wearing the same clothes: the browser opens one at a time on its
   own, and with the scripts blocked every answer is still readable.
   ---------------------------------------------------------------------- */
.lz-question {
    background: var(--lz-ink);
    border: 1px solid var(--lz-ink-800);
    margin-bottom: 16px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.lz-question > summary {
    align-items: flex-start;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: 16px;
    list-style: none;
    padding: 20px 24px;
}

/* Safari still draws the disclosure triangle without this. */
.lz-question > summary::-webkit-details-marker,
.lz-question > summary::marker {
    display: none;
    content: '';
}

.lz-question-no {
    color: var(--lz-ink-500);
    flex: none;
    font-size: 14px;
    letter-spacing: 1px;
    padding-top: 2px;
}

.lz-question-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.6;
}

.lz-question > summary .fa-angle-down {
    flex: none;
    font-size: 18px;
    padding-top: 3px;
    transition: transform 0.3s ease;
}

/* Open was a solid fill of the brand colour. Eight of these stacked, one of
   them neon, is a page that shouts at the reader from the FAQ — so the open
   question lifts to the raised surface and takes a lime edge and a lime
   number instead. It is still unmistakably the open one, and the answer is
   still the thing with the contrast. */
.lz-question[open] {
    background: var(--lz-ink-800);
    border-color: var(--lz-accent);
}

.lz-question[open] > summary {
    color: #fff;
}

.lz-question[open] .lz-question-no,
.lz-question[open] > summary .fa-angle-down {
    color: var(--lz-accent);
    opacity: 1;
}

.lz-question[open] .lz-question-answer {
    color: var(--lz-ink-400);
}

.lz-question[open] > summary .fa-angle-down {
    transform: rotate(180deg);
}

.lz-question-answer {
    color: var(--lz-ink-400);
    font-size: 15px;
    line-height: 1.9;
    padding: 0 24px 22px 54px;
}

.lz-question-answer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

@media only screen and (max-width: 479px) {
    .lz-question > summary {
        padding: 16px 16px;
    }

    .lz-question-answer {
        padding: 0 16px 18px 16px;
    }
}

/* -------------------------------------------------------------------------
   22. Dark surfaces

   Everything above recolours the template. This turns it over.

   QuomodoTheme assumes white sections with #252525 headings and #6e6e6e body
   throughout, and says so in six stylesheets. Rather than chase that through
   all of them, the inversion is gathered here: one section, last in the last
   file, so that what was inverted is legible as a list rather than scattered
   as a hundred edits nobody can audit.

   The rule for the whole block: #071519 is the page, --lz-ink a card,
   --lz-ink-800 a raised surface or a quiet line, white a heading, #B7C5C9
   supporting text. No section paints its own background unless it is meant
   to be a different surface from the page.
   ---------------------------------------------------------------------- */

body {
    background: var(--lz-ink-950);
    color: var(--lz-ink-400);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #fff;
}

/* The template's one tinted band. It was a warm off-white; it is now the
   card colour, which is the same move one step lighter than the page. */
.gray-bg {
    background: var(--lz-ink);
}

.light-gray-bg {
    background: var(--lz-ink);
}

/* `section, header { background: #fff }` in style.css, which is where the
   white came from on every band of this page. Transparent instead, so the
   page colour shows through and a section that wants its own surface — the
   two .gray-bg bands, the closing panel, the footer — says so itself. */
section,
header {
    background: transparent;
}

/* The bar over the hero is transparent until it sticks: the theme fades it in
   with opacity, and jquery.sticky puts .is-sticky on a wrapper it inserts
   rather than on .mainmenu-area, so this cannot be scoped to the menu.
   Full opacity, because a half-transparent dark bar over a dark page shows
   the headline through the menu. */
.mainmenu-area-bg {
    background: var(--lz-ink);
    border-bottom: 1px solid var(--lz-ink-800);
}

.is-sticky .mainmenu-area-bg {
    opacity: 1;
}

/* Below 992px the theme paints the whole menu bar in the brand colour — a
   full-width band of neon across the top of every phone, with the wordmark
   and the hamburger set in white on it. The bar takes the card colour and an
   edge instead, which is what it does on desktop once it sticks. */
@media only screen and (max-width: 991px) {
    .mainmenu-area,
    .is-sticky .mainmenu-area {
        background: var(--lz-ink) !important;
        border-bottom: 1px solid var(--lz-ink-800);
        box-shadow: none;
    }
}

/* Sticky on desktop, where the theme reaches for white. */
.is-sticky .mainmenu-area {
    background: var(--lz-ink);
    box-shadow: none;
}

/* The mobile drawer, which is a panel over the page rather than part of it. */
@media only screen and (max-width: 991px) {
    .stellarnav.mobile > ul,
    .stellarnav.mobile ul ul {
        background: var(--lz-ink) !important;
        border-top: 1px solid var(--lz-ink-800);
    }

    .stellarnav li a {
        border-bottom-color: var(--lz-ink-800) !important;
    }
}

/* ── Cards and panels ──────────────────────────────────────────────────── */

/* The featured plan. The template fills it edge to edge with the brand
   colour, which in this palette is a pricing panel of neon — the exact thing
   "restrained accents" rules out. The fill goes; the card keeps the page's
   card colour and is marked as the chosen one by a lime edge and a lime
   figure, which is how every other selected thing in this product reads. */
.single-price {
    background: var(--lz-ink);
    border-color: var(--lz-ink-800);
}

.single-price:before,
.single-price.active:before,
.single-price:hover:before {
    display: none;
}

.single-price.active,
.single-price:hover {
    background: var(--lz-ink);
    border-color: var(--lz-accent);
}

.single-price .price-details ul li i {
    color: var(--lz-accent);
}

/* The two neutral pills the theme ships: a plain "read more" and the plan's
   own button before it is the active one. Both were pale grey chips with
   near-black type. */
.read-more,
.purchase-button {
    background: var(--lz-ink-800);
    color: #fff;
}

/* The numbered discs on "how it works". White on lime-500 is 1.37:1 — the
   number was simply not there. */
.process-icon::before {
    background: var(--lz-accent);
    color: var(--lz-on-accent);
    box-shadow: 0 16px 32px rgba(4, 14, 17, 0.45);
}

/* The rule under each step, which the theme draws in a pale lilac left over
   from its own palette. */
.single-process-box::after {
    background: var(--lz-ink-800);
}

/* The five feature tiles. The theme fills the disc with the brand colour and
   sets the glyph in white — 1.15:1, so the icon was the disc and nothing
   else — and gives the tile a pale grey shadow that on a dark page is a
   smudge round every card. The disc takes the on-accent colour, and the tile
   separates the way every other card here does: one step lighter, with an
   edge. */
.single-features .box-icon {
    color: var(--lz-on-accent);
}

.text-icon-box.single-features {
    background: var(--lz-ink);
    border: 1px solid var(--lz-ink-800);
    box-shadow: none;
}

/* The monthly/yearly switch, same pale shadow. */
.price-menu {
    background: var(--lz-ink-800);
    box-shadow: none;
}

/* The back-to-top disc, filled with the accent by the theme. */
.scrolltotop {
    box-shadow: 0 16px 32px rgba(4, 14, 17, 0.5);
}

/* ── Type on the dark page ─────────────────────────────────────────────── */

p,
.area-content p,
.single-features p,
.single-process-box p,
.single-fun-fact p,
.footer-area li a {
    color: var(--lz-ink-400);
}

.single-features h3,
.single-process-box h3,
.area-content h3,
.area-title h2 {
    color: #fff;
}

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

/* The theme fills the whole footer with the brand colour and lays a map
   graphic over it. A full-width neon band is the loudest thing a page can
   do; it takes the card colour and an edge instead, and the map layer goes
   because it was drawn to sit on orange. */
.footer-area .area-bg {
    background: var(--lz-ink);
    border-top: 1px solid var(--lz-ink-800);
}

.footer-area .area-bg::after {
    display: none;
}

.footer-area .single-widgets h3 {
    color: #fff;
}

/* ── Images the theme tints ────────────────────────────────────────────── */

/* Two decorative PNGs the template scatters behind the content: a dot grid
   and a layer of specks, both drawn in near-black for a white page. They are
   theme assets rather than ours, so they are dimmed rather than redrawn. */
.goal-layer-3 img,
.video-bg-layer img {
    opacity: 0.25;
    filter: invert(1);
}

/* ── Selection ─────────────────────────────────────────────────────────── */

::selection {
    background: var(--lz-accent);
    color: var(--lz-on-accent);
}

/* -------------------------------------------------------------------------
   23. The lightbox caption

   VenoBox writes its own chrome as inline styles, so the colours are set
   through its options in the page rather than fought with !important here.
   This is the one part that is CSS: the caption is a fixed 40px bar with
   overflow hidden, which on a phone cuts a two-clause caption off mid-word.
   It wraps instead, up to a quarter of the screen.
   ---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .vbox-title {
        height: auto;
        max-height: 25vh;
        overflow-y: auto;
        white-space: normal;
        line-height: 1.5;
        padding: 10px 44px;
    }
}