/* The /next preview: the whole front end of the new pages, with no template
   underneath. Same family as the pricing panel of the current site (Open Sans,
   the #3fa6e5 brand blue, pale blue washes, 16px radii), written mobile-first.

   Everything is prefixed nx- and the page root is body.nx, so nothing here can
   leak into the ftco pages or be hit by an ad blocker's generic filters. */

:root {
    --nx-blue: #3fa6e5;
    --nx-blue-dark: #2f93d1;
    --nx-blue-deep: #2f89fc;
    --nx-blue-soft: #e6f3fc;
    --nx-navy: #293955;
    --nx-ink: #1a2233;
    --nx-text: #334155;
    --nx-muted: #64748b;
    --nx-faint: #8b95a5;
    --nx-line: #dce9f7;
    --nx-line-2: #e5e7eb;
    --nx-bg: #ffffff;
    --nx-bg-soft: #f7fbff;
    --nx-bg-soft-2: #eef5fd;
    --nx-green: #10b981;
    --nx-radius: 16px;
    --nx-radius-sm: 12px;
    --nx-shadow: 0 10px 30px -12px rgba(26, 34, 51, 0.18);
    --nx-shadow-lg: 0 24px 50px -20px rgba(26, 34, 51, 0.28);
    --nx-header-h: 68px;
    --nx-gutter: 16px;
}

/* ==================== Base ==================== */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.nx {
    margin: 0;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--nx-text);
    background: var(--nx-bg);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

.nx h1, .nx h2, .nx h3, .nx h4 {
    margin: 0;
    color: var(--nx-ink);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.nx p { margin: 0; }
.nx ul { margin: 0; padding: 0; list-style: none; }
/* :where keeps the default link colour at the specificity of a bare "a", so a
   single class (.nx-btn-primary, .nx-menu a, .nx-area) outranks it. */
:where(.nx) a { color: var(--nx-blue-dark); text-decoration: none; }
:where(.nx) a:hover { text-decoration: underline; }
.nx img { display: block; max-width: 100%; height: auto; }
.nx button { font: inherit; color: inherit; }

.nx-i { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -0.3em; }

.nx-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--nx-ink);
    color: #fff;
    border-radius: 8px;
}

.nx-skip:focus { top: 12px; }

.nx .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nx-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--nx-gutter);
}

/* ==================== Buttons ==================== */

.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.97rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}

.nx-btn:hover, .nx-btn:focus-visible { text-decoration: none; transform: translateY(-1px); }

.nx-btn:focus-visible { outline: 3px solid rgba(63, 166, 229, 0.45); outline-offset: 2px; }

.nx-btn .nx-i { transition: transform .2s ease; }
.nx-btn:hover .nx-i.nx-i-arrow { transform: translateX(3px); }

.nx-btn-primary {
    background: var(--nx-blue);
    border-color: var(--nx-blue);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(63, 166, 229, 0.6);
}

.nx-btn-primary:hover, .nx-btn-primary:focus-visible {
    background: var(--nx-blue-dark);
    border-color: var(--nx-blue-dark);
    color: #fff;
    box-shadow: 0 12px 26px -8px rgba(63, 166, 229, 0.7);
}

.nx-btn-outline {
    background: #fff;
    border-color: var(--nx-line);
    color: var(--nx-ink);
}

.nx-btn-outline:hover, .nx-btn-outline:focus-visible {
    border-color: var(--nx-blue);
    color: var(--nx-blue-dark);
}

.nx-btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--nx-navy);
}

.nx-btn-light:hover, .nx-btn-light:focus-visible { background: var(--nx-bg-soft); border-color: var(--nx-bg-soft); color: var(--nx-navy); }

.nx-btn-sm { min-height: 38px; padding: 7px 18px; font-size: 0.9rem; }
/* The header's sign-in button speaks in the menu's capitals. */
.nx-btn-login { font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
.nx-btn-lg { min-height: 52px; padding: 14px 30px; font-size: 1.05rem; }

.nx-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--nx-blue-dark);
}

.nx-link .nx-i { transition: transform .2s ease; }
.nx-link:hover .nx-i { transform: translateX(3px); }

/* ==================== Header ==================== */

/* Solid, no backdrop-filter: a filter on the header would make it the
   containing block of the phone menu below, which is position: fixed, and the
   sheet would then be sized against the 68px header instead of the window. */
.nx-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--nx-line);
}

.nx-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--nx-header-h);
}

/* The current site's mark, measured there: Open Sans 700 at 20px, uppercase,
   black, a space, then two 13x10 blocks (blue, navy) sitting on the baseline. */
.nx-brand {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: #000;
}

.nx-brand:hover { text-decoration: none; color: #000; }

.nx-brand-dot {
    display: inline-block;
    width: 13px;
    height: 10px;
    background: var(--nx-blue-deep);
}

.nx-brand-dot-dark { background: var(--nx-navy); }

.nx-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.nx-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--nx-ink);
    transition: transform .25s ease, opacity .2s ease;
}

.nx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Phone: the menu is a sheet under the header. Hidden by default and opened by
   the burger; without JavaScript the burger does nothing, so the menu is also
   reachable from the footer links. */
.nx-nav {
    display: none;
    position: fixed;
    top: var(--nx-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    padding: 20px var(--nx-gutter) 32px;
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid var(--nx-line);
}

.nx-nav.is-open { display: flex; flex-direction: column; gap: 24px; }

.nx-noscroll { overflow: hidden; }

.nx-menu { display: flex; flex-direction: column; }

/* Capitals at the weight of plain text, black, the logo's blue when hovered or current: the
   menu of the current site, kept so the two read as one brand. */
.nx-menu a {
    display: block;
    padding: 14px 4px;
    border-bottom: 1px solid var(--nx-line);
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
}

.nx-menu a:hover { text-decoration: none; color: #2f89fc; }
.nx-menu a.is-active { color: #2f89fc; }

.nx-nav-end { display: flex; flex-direction: column; gap: 16px; }

.nx-lang { position: relative; }

.nx-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}

/* On the label itself: ".nx button { font: inherit }" outranks a single class, so a size on
   .nx-lang-btn never applied and the code stayed at the page's 16px (the owner saw it large). */
.nx-lang-btn span { font-size: 12px; font-weight: 500; }

.nx-lang-btn .nx-i { width: 1em; height: 1em; transition: transform .2s ease; }
.nx-lang-btn[aria-expanded="true"] .nx-i { transform: rotate(180deg); }

.nx-flag { width: 20px; height: 15px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.08); }

.nx-lang-menu {
    display: none;
    margin-top: 8px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius-sm);
    box-shadow: var(--nx-shadow);
    min-width: 190px;
}

.nx-lang-menu.is-open { display: block; }

.nx-lang-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--nx-ink);
    font-size: 0.95rem;
}

.nx-lang-menu a:hover { background: var(--nx-bg-soft-2); text-decoration: none; }
.nx-lang-menu a.is-current { font-weight: 700; color: var(--nx-blue-dark); }

@media (min-width: 992px) {
    .nx-burger { display: none; }

    .nx-nav {
        display: flex;
        position: static;
        flex: 1;
        align-items: center;
        justify-content: flex-end;
        gap: 32px;
        padding: 0;
        overflow: visible;
        background: transparent;
        border: 0;
    }

    .nx-menu { flex-direction: row; gap: 28px; }

    .nx-menu a {
        position: relative;
        padding: 8px 0;
        border: 0;
        font-size: 13px;
    }

    .nx-menu a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--nx-blue);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .2s ease;
    }

    .nx-menu a:hover::after, .nx-menu a.is-active::after { transform: scaleX(1); }

    .nx-nav-end { flex-direction: row; align-items: center; gap: 12px; }

    .nx-lang-menu { position: absolute; right: 0; top: 100%; }
}

/* ==================== Sections ==================== */

.nx-section { padding: 56px 0; }
.nx-section-soft { background: var(--nx-bg-soft); }
.nx-section-tight { padding-top: 24px; }

.nx-section-head { max-width: 680px; margin: 0 auto 32px; text-align: center; }

.nx-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-blue);
}

.nx-section-head h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.nx-section-head p { margin-top: 12px; color: var(--nx-muted); font-size: 1.02rem; }

.nx-section-foot { margin-top: 28px; text-align: center; }

@media (min-width: 768px) {
    .nx-section { padding: 80px 0; }
    .nx-section-tight { padding-top: 32px; }
    .nx-section-head { margin-bottom: 44px; }
}

/* ==================== Hero (home) ==================== */

.nx-hero {
    position: relative;
    padding: 40px 0 56px;
    background: linear-gradient(180deg, var(--nx-bg-soft) 0%, #fff 100%);
    overflow: hidden;
}

.nx-hero::before {
    content: '';
    position: absolute;
    top: -220px;
    right: -160px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63, 166, 229, 0.16), rgba(63, 166, 229, 0) 68%);
    pointer-events: none;
}

.nx-hero-grid { display: grid; gap: 36px; align-items: center; }
/* A grid column grows to its content by default, and the hero's one-line rotating ending would
   widen the text column instead of being fitted into it. */
.nx-hero-grid > * { min-width: 0; }

.nx-hero-title {
    font-size: clamp(2rem, 1.3rem + 3.4vw, 3.3rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

/* The rotating ending has a line of its own, one line high whatever it says: next.js sets a long
   one in a smaller size until it fits (the owner wanted no empty second line kept for them). The
   line box keeps the title's size, so the title never changes height as the words turn. */
.nx-rotate {
    display: block;
    height: 1.1em;
    white-space: nowrap;
    color: var(--nx-blue);
}

.nx-rotate.is-swapping { animation: nx-swap .5s ease; }

@keyframes nx-swap {
    0% { opacity: 1; transform: translateY(0); }
    45% { opacity: 0; transform: translateY(-10px); }
    55% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Two classes: ".nx p { margin: 0 }" outranks a single one, and the margin never applied. */
.nx-hero .nx-hero-lead { margin-top: 16px; max-width: 540px; font-size: 1.08rem; color: var(--nx-muted); }

.nx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.nx-hero-note { margin-top: 16px; font-size: 0.88rem; color: var(--nx-faint); }

/* Three screenshots overlapping like prints on a desk. One column of cards on
   the right, the Mirror tall on the left. */
.nx-collage {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    /* width as well as max-width: a grid item with auto margins is not stretched, it shrinks
       to its content, and images at 100% of nothing left a thumbnail between 576 and 991px. */
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.nx-collage::before {
    content: '';
    position: absolute;
    inset: 8% -6% -8% -6%;
    border-radius: 36px;
    background: linear-gradient(135deg, rgba(63, 166, 229, 0.14), rgba(47, 137, 252, 0.04));
    z-index: 0;
}

.nx-shot {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--nx-line);
    background: #fff;
    box-shadow: var(--nx-shadow-lg);
}

.nx-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.nx-shot-1 { grid-row: 1 / 3; }
/* The Mirror is square and the column is tall: centring keeps the face. */
.nx-shot-1 img { object-position: center; }
.nx-shot-2 { transform: rotate(1.5deg); }
.nx-shot-3 { transform: rotate(-1.5deg); }

.nx-hero-art {
    position: absolute;
    right: -40px;
    bottom: -30px;
    width: 300px;
    opacity: 0.35;
    pointer-events: none;
    filter: blur(1px);
}

@media (max-width: 575.98px) {
    .nx-collage { gap: 10px; }
    .nx-hero-art { display: none; }
    .nx-hero-actions .nx-btn { flex: 1 1 100%; }
}

/* The three prints on a phone too, the owner's call: smaller, but the page opens on the variety -
   above the title, wherever the hero is one column (the owner). */
@media (max-width: 991.98px) {
    .nx-hero-grid .nx-collage { order: -1; }
    .nx-shot-1 { aspect-ratio: 4 / 5; }
    .nx-shot-2, .nx-shot-3 { aspect-ratio: 4 / 3; }
}

@media (min-width: 992px) {
    .nx-hero { padding: 72px 0 96px; }
    .nx-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; }
    .nx-collage { height: 480px; max-width: none; }
}

/* ==================== Inner page hero ==================== */

.nx-page-hero {
    padding: 44px 0 28px;
    background: linear-gradient(180deg, var(--nx-bg-soft) 0%, #fff 100%);
}

.nx-page-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem); letter-spacing: -0.025em; }
.nx-page-hero p { margin-top: 14px; max-width: 640px; font-size: 1.05rem; color: var(--nx-muted); }

@media (min-width: 768px) {
    .nx-page-hero { padding: 64px 0 36px; }
}

/* Lucia beside the title of the inner pages, posed for the page: writing, talking, holding coins.
   No backdrop and no fade at the bottom (the owner took both out). Small on a phone, still beside
   the title (the owner wanted her there too). */
.nx-page-hero-grid { display: grid; grid-template-columns: 1fr 96px; gap: 16px; align-items: center; }
.nx-page-hero-grid > * { min-width: 0; }
.nx-hero-lucia img { display: block; width: 100%; height: auto; }

@media (min-width: 576px) { .nx-page-hero-grid { grid-template-columns: 1fr 140px; gap: 24px; } }

@media (min-width: 768px) { .nx-page-hero-grid { grid-template-columns: 1fr 170px; gap: 40px; } }
@media (min-width: 992px) { .nx-page-hero-grid { grid-template-columns: 1fr 200px; } }

/* ==================== Feature tiles (who / how / session) ==================== */

.nx-trio { display: grid; gap: 18px; }

@media (min-width: 768px) { .nx-trio { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.nx-quad { display: grid; gap: 18px; }

@media (min-width: 576px) { .nx-quad { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .nx-quad { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.nx-feature {
    padding: 26px 24px 28px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    background: #fff;
}

.nx-section-soft .nx-feature { background: #fff; }
.nx-feature-soft { background: var(--nx-bg-soft); border-color: transparent; }

.nx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--nx-blue-soft);
    color: var(--nx-blue-dark);
}

.nx-icon .nx-i { width: 24px; height: 24px; }

.nx-feature h3 { font-size: 1.12rem; }
.nx-feature p { margin-top: 10px; color: var(--nx-muted); font-size: 0.96rem; }

.nx-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--nx-blue);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 18px -8px rgba(63, 166, 229, 0.7);
}

/* ==================== Dynamic cards ==================== */

.nx-grid { display: grid; gap: 20px; }

@media (min-width: 576px) { .nx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .nx-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.nx-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    translate: 0 0;
    transition: translate .25s ease, box-shadow .25s ease;
}

.nx-card:hover { translate: 0 -4px; box-shadow: var(--nx-shadow); }

.nx-card.is-hidden { display: none; }

.nx-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--nx-bg-soft-2);
    border-bottom: 1px solid var(--nx-line);
}

.nx-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .4s ease;
}

.nx-card:hover .nx-card-media img { transform: scale(1.03); }

.nx-card-media-wide { aspect-ratio: 16 / 10; }

.nx-card-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 16px 18px 20px; }

.nx-badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--nx-blue-soft);
    color: var(--nx-blue-dark);
}

.nx-badge-group { background: #ede9fe; color: #6d28d9; }

.nx-card-title { font-size: 1.08rem; }
.nx-card-text { font-size: 0.93rem; color: var(--nx-muted); }

.nx-card-compact .nx-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }

.nx-tag {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--nx-line);
    background: var(--nx-bg-soft);
    font-size: 0.75rem;
    color: var(--nx-muted);
}

/* ==================== Areas ==================== */

.nx-areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

@media (min-width: 576px) { .nx-areas { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 992px) { .nx-areas { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .nx-areas { grid-template-columns: repeat(5, 1fr); } }

.nx-area {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: var(--nx-bg-soft-2);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    translate: 0 0;
    transition: translate .25s ease, box-shadow .25s ease;
}

.nx-area:hover { translate: 0 -3px; box-shadow: var(--nx-shadow); text-decoration: none; }

/* The zoom scales a box around the picture, never the <img> itself. An animated <img> can be
   handed to the GPU as its own 560px bitmap and shrunk to ~220px on every frame with no
   smoothing, and the fine detail of these illustrations shimmered (the owner saw it; the flat
   screenshots on the dynamic cards hide it). Around a box, Chrome draws the picture once, already
   reduced well, and only that drawing is enlarged. */
.nx-area { isolation: isolate; }

.nx-area-pic {
    position: absolute;
    inset: 0;
    transition: transform .4s ease;
    will-change: transform;
}

.nx-area-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nx-area:hover .nx-area-pic { transform: scale(1.03); }

.nx-area span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 12px 10px;
    background: linear-gradient(180deg, rgba(20, 30, 50, 0) 0%, rgba(20, 30, 50, 0.78) 100%);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.nx-areas-more { display: none; margin-top: 20px; text-align: center; }

/* On a phone the home page shows six areas and a button for the rest; from a
   tablet up all 23 fit on screen and the button is not drawn. */
@media (max-width: 575.98px) {
    .nx-areas.is-collapsed .nx-area:nth-child(n+7) { display: none; }
    .nx-areas-more { display: block; }
    .nx-areas:not(.is-collapsed) + .nx-areas-more { display: none; }
}

/* ==================== Filter chips ==================== */

.nx-filter { margin-bottom: 24px; }

.nx-filter-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nx-faint);
}

/* On a phone the chips wrap and the first two rows show, with a button for the rest (the owner did
   not want a sideways scroll there); next.js folds them and opens them by itself when the area
   chosen on arrival is further down. From a tablet up they all fit and nothing is folded. */
.nx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-chips.is-folded { overflow: hidden; }
/* Smaller on a phone so more areas fit in the two rows; two classes because ".nx button" resets
   the font of a single-class button. */
@media (max-width: 767.98px) {
    .nx-chips .nx-chip { min-height: 36px; padding: 6px 12px; font-size: 13px; }
}
.nx-filter .nx-chips-more {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nx-blue-dark);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.nx-chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    background: #fff;
    color: var(--nx-text);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nx-chip:hover { border-color: var(--nx-blue); color: var(--nx-blue-dark); }
.nx-chip.is-active { background: var(--nx-blue); border-color: var(--nx-blue); color: #fff; }

.nx-filter-count { margin-top: 6px; font-size: 0.9rem; color: var(--nx-muted); }

.nx-empty { padding: 32px; text-align: center; color: var(--nx-muted); }

@media (min-width: 768px) {
    .nx-chips.is-folded { max-height: none !important; overflow: visible; }
    .nx-filter .nx-chips-more { display: none; }
}

/* ==================== Calls to action ==================== */

/* The plans band is an ordinary full-width section: its head carries the words and
   the foot the button, so only the gap between the two is its own. */
.nx-plans .nx-section-head { margin-bottom: 0; }
.nx-plans .nx-section-foot { margin-top: 26px; }
.nx-plans .nx-cta-note { margin-top: 26px; }
.nx-cta-note { margin-top: 16px; font-size: 0.88rem; color: var(--nx-faint); }

/* The closing call to action: full width like every other section (the owner turned down a card),
   in the site's light blue rather than the navy band it was, which ran straight into the footer's
   other blue and looked out of place. Dark title, the primary button, two soft rings of blue. */
.nx-cta-final {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 64px 0;
    background: linear-gradient(180deg, var(--nx-bg-soft) 0%, var(--nx-blue-soft) 100%);
    text-align: center;
}

.nx-cta-final::before,
.nx-cta-final::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63, 166, 229, 0.18), rgba(63, 166, 229, 0) 70%);
    pointer-events: none;
}
.nx-cta-final::before { width: 420px; height: 420px; top: -200px; right: -120px; }
.nx-cta-final::after { width: 340px; height: 340px; bottom: -180px; left: -100px; }

.nx-cta-final h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); text-wrap: balance; }
.nx-cta-final .nx-container p { margin: 14px auto 0; max-width: 560px; color: var(--nx-muted); font-size: 1.05rem; text-wrap: balance; }
.nx-cta-final .nx-btn { margin-top: 28px; }

@media (min-width: 768px) {
    .nx-cta-final { padding: 88px 0; }
}

/* ==================== Pricing page ==================== */

/* pricing-page.css is loaded as is: it is scoped under .pricing-page and
   carries its own .btn rules, so it needs none of Bootstrap. Only its spacing
   is adjusted to this layout. */
.nx-pricing .pricing-page { padding: 0; }
.nx-pricing .pricing-block + .pricing-block { margin-top: 48px; }
/* The personal plan: the "not a diagnosis" lines follow the subtitle as plain text in the same
   style, closer together than the head's paragraphs, the bold part darker; then the two cards on
   the first two of four columns, neither highlighted (the owner). */
/* A grey box as wide as its two lines, under the subtitle and indented with it (the owner). */
.nx-pricing .pricing-block-head .nx-pricing-note {
    width: fit-content;
    max-width: calc(100% - 1.75rem);
    margin: -4px 0 14px 1.75rem;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f1f4f8;
}
.nx-pricing .pricing-block-head .nx-pricing-note p.nx-pricing-note-line { margin: 0; }
.nx-pricing .pricing-block-head .nx-pricing-note p.nx-pricing-note-line + p { margin-top: 4px; }
.nx-pricing .pricing-block-head p.nx-pricing-note-line strong { color: var(--nx-ink); }
.nx-pricing .pricing-block-head p.nx-pricing-note-line i { color: var(--nx-blue-deep); font-size: 1.05em; vertical-align: -2px; }
/* The download line is the aside, quieter than the sentence above it (the owner). */
.nx-pricing .pricing-block-head p.nx-pricing-note-soft { color: var(--nx-faint); }
.nx-pricing .pricing-block-head p.nx-pricing-note-soft i { opacity: 0.6; }
.nx-pricing .pricing-page .nx-pricing-equals { margin: -4px 0 14px; font-size: 0.85rem; color: var(--nx-muted); text-align: center; }
.nx-pricing .pricing-block-head { margin-bottom: 4px; }
/* Half the gap pricing-page.css leaves between a block's title and its subtitle (the owner). */
.nx-pricing .pricing-page .pricing-block-head .pricing-section-header { margin-bottom: 0; }
.nx-pricing .pricing-block-head p { margin: 0 0 12px 1.75rem; color: var(--nx-muted); font-size: 0.95rem; }

/* ==================== Footer ==================== */

.nx-footer {
    margin-top: 0;
    padding: 48px 0 20px;
    background: var(--nx-blue);
    color: rgba(255, 255, 255, 0.88);
}

.nx-footer-grid { display: grid; gap: 28px; }

@media (min-width: 768px) { .nx-footer-grid { grid-template-columns: 1.2fr 1fr 1.2fr; gap: 40px; } }

/* The header's lettering in white, without the blocks. */
.nx-footer .nx-brand-negative, .nx-footer .nx-brand-negative:hover { color: #fff; text-decoration: none; }
.nx-footer p { margin-top: 10px; font-size: 0.95rem; }
.nx-footer h2 { margin-bottom: 12px; color: #fff; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; }
.nx-footer li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.95rem; }
.nx-footer a { color: #fff; }
.nx-footer a:hover { text-decoration: underline; }
/* A contact link carries an icon: the link lines it up like the plain pin row, and only
   its words are underlined. */
.nx-footer li > a:has(.nx-i) { display: inline-flex; align-items: center; gap: 8px; }
.nx-footer li > a:has(.nx-i):hover { text-decoration: none; }
.nx-footer li > a:has(.nx-i):hover span { text-decoration: underline; }
.nx-footer .nx-i { width: 1.1em; height: 1.1em; }

.nx-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
}

/* ==================== Reveal on scroll ==================== */

/* Only once next.js has marked the page (.nx-js): without a script nothing is
   ever hidden, the opposite of the ftco template's ftco-animate. */
.nx-js .nx-reveal {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .6s ease, translate .6s ease;
}

.nx-js .nx-reveal.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .nx-js .nx-reveal { opacity: 1; translate: 0 0; transition: none; }
    .nx-rotate.is-swapping { animation: none; }
    .nx-card, .nx-area, .nx-btn, .nx-card-media img, .nx-area-pic { transition: none; }
}