/* ---------------------------------------------------------------------------
   /demo — an example home page the visitor edits in place.

   Its own file, loaded only by views/demo/index.php. The page uses its own
   `demo-*` classes rather than the theme's section classes: it has to survive
   contenteditable, outlines and popovers without fighting the theme's
   specificity, and the theme's rules were not written with an editor on top.

   Colours come from the theme variables so the page follows the site.
   --------------------------------------------------------------------------- */

.demo-content {
    --demo-line: #ffffff26;
    --demo-line-soft: #ffffff14;
    /* Lighter than the page behind it (--bg-color-2 is #0d0d0d), so cards and
       panels separate from the background instead of dissolving into it. */
    --demo-surface: #16171a;
    --demo-surface-2: #1d1f23;
    --demo-accent: var(--color-lime-1, #CFF85E);
    --demo-ink: var(--color-black-1, #030303);
    --demo-text: #f2f4f0;
    --demo-muted: #a8aeaa;

    /**
     * The theme sets a background on <body> but no color — every page paints
     * its own text per component. A page built out of its own classes, like
     * this one, therefore inherited Bootstrap's near-black #212529 and rendered
     * black on black. Text colour is declared here, once, for the whole page.
     */
    color: var(--demo-text);
}

.demo-content h1,
.demo-content h2,
.demo-content h3,
.demo-content blockquote,
.demo-content strong {
    color: var(--demo-text);
}

.demo-content p,
.demo-content li,
.demo-content figcaption {
    color: var(--demo-muted);
}

/**
 * The theme's `.special-word` paints its gradient with
 * `-webkit-text-fill-color: transparent`, which INHERITS — so the editable
 * <span> nested inside it rendered as invisible text. The demo uses its own
 * accent, a solid colour that survives having children.
 */
.demo-content .demo-x__accent,
.demo-content .demo-x__accent > .demo-edit {
    color: var(--demo-accent);
    -webkit-text-fill-color: currentColor;
}

/* ---- buttons, shared ---- */

.demo-content .demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.demo-content .demo-btn i {
    font-size: 1.2em;
    line-height: 1;
}

.demo-content .demo-btn--primary {
    background: var(--demo-accent);
    color: var(--demo-ink);
}

.demo-content .demo-btn--ghost {
    border-color: var(--demo-line);
    color: var(--color-white-1, #fff);
}

.demo-content .demo-btn:hover {
    transform: translateY(-2px);
}

.demo-content .demo-btn--ghost:hover {
    border-color: var(--demo-accent);
}

@media (prefers-reduced-motion: reduce) {
    .demo-content .demo-btn {
        transition: none;
    }

    .demo-content .demo-btn:hover {
        transform: none;
    }
}

/* ---- the edit bar ---- */

.demo-bar {
    position: sticky;
    /* The site header is sticky too (115px, z-index 1000). Sticking at 0 would
       slide this bar underneath it on scroll; the offset is measured from the
       real header at runtime (demo-page.js) because its height is responsive. */
    top: var(--demo-topbar, 0px);
    z-index: 60;
    background: rgba(8, 8, 8, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--demo-line);
}

.demo-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.demo-bar__left,
.demo-bar__right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.demo-bar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--demo-accent);
    background: transparent;
    color: var(--color-white-1, #fff);
    font-weight: 600;
    cursor: pointer;
}

.demo-bar__toggle[aria-pressed="true"] {
    background: var(--demo-accent);
    color: var(--demo-ink);
}

.demo-bar__hint {
    margin: 0;
    font-size: .9rem;
    color: var(--demo-muted);
}

/* ---- the three-step checklist in the bar ---- */

.demo-progress {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 22px;
    margin: 0;
    padding: 0;
}

.demo-progress li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--demo-muted);
    white-space: nowrap;
}

.demo-progress__n {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--demo-line);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* the step the visitor should do next */
.demo-progress li.is-now {
    color: var(--demo-text);
}

.demo-progress li.is-now .demo-progress__n {
    border-color: var(--demo-accent);
    color: var(--demo-accent);
}

/* done: the number becomes a lime check */
.demo-progress li.is-done {
    color: var(--demo-muted);
}

.demo-progress li.is-done .demo-progress__n {
    background: var(--demo-accent);
    border-color: var(--demo-accent);
    color: var(--demo-ink);
}

.demo-progress li.is-done .demo-progress__n::before {
    content: "✓";
}

.demo-progress li.is-done .demo-progress__n {
    font-size: 0; /* hides the number so the ✓ above stands alone */
}

.demo-progress li.is-done .demo-progress__n::before {
    font-size: .8rem;
}

@media (max-width: 700px) {
    .demo-progress li span:last-child {
        display: none; /* phones keep just the numbered dots */
    }
}

/* ---- "start here" pulse on the toggle, until first use ---- */

@keyframes demo-pulse {
    0% { box-shadow: 0 0 0 0 rgba(207, 248, 94, .45); }
    70% { box-shadow: 0 0 0 12px rgba(207, 248, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(207, 248, 94, 0); }
}

.demo-bar__toggle.demo-pulse {
    animation: demo-pulse 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .demo-bar__toggle.demo-pulse {
        animation: none;
        box-shadow: 0 0 0 3px rgba(207, 248, 94, .35);
    }
}

.demo-bar__badge {
    font-size: .82rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(207, 248, 94, .14);
    color: var(--demo-accent);
}

.demo-bar__badge[hidden] {
    display: none;
}

.demo-bar__reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    color: inherit;
    opacity: .65;
    cursor: pointer;
    font-size: .9rem;
    padding: 6px;
}

.demo-bar__reset:hover {
    opacity: 1;
}

/* the always-visible way into the demo panel */
.demo-bar__panel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--demo-line);
    background: var(--demo-surface-2);
    color: var(--demo-text);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
}

.demo-bar__panel:hover {
    border-color: var(--demo-accent);
    color: var(--demo-accent);
}

.demo-bar__panel-ext {
    font-size: .85em;
    opacity: .6;
}

@media (max-width: 700px) {
    .demo-bar__panel span {
        display: none; /* the icons alone on phones */
    }

    .demo-bar__panel {
        padding: 11px 14px;
    }
}

/* ---- the example page ---- */

.demo-page {
    border-bottom: 1px solid var(--demo-line);
}

.demo-x {
    padding: 84px 0;
}

/**
 * A single soft accent wash behind the hero. The page is otherwise one flat
 * dark tone from top to bottom, which reads as "nothing is here"; this gives
 * the eye a starting point without adding a second colour to the palette.
 */
.demo-x--hero {
    padding-top: 64px;
    position: relative;
    isolation: isolate;
}

.demo-x--hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(80% 120% at 12% 0%, rgba(207, 248, 94, .10), transparent 60%),
        radial-gradient(60% 100% at 100% 10%, rgba(255, 255, 255, .05), transparent 65%);
    pointer-events: none;
}

.demo-x__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 56px;
    align-items: center;
}

@media (max-width: 900px) {
    .demo-x__hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .demo-x {
        padding: 56px 0;
    }
}

.demo-x__eyebrow {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--demo-muted);
    margin: 0 0 14px;
}

.demo-x__title {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.1;
    margin: 0 0 18px;
    text-wrap: balance;
}

.demo-x__lead {
    max-width: 52ch;
    color: var(--demo-muted);
    margin: 0 0 28px;
}

.demo-x__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.demo-x__hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--demo-line);
}

.demo-x__head {
    max-width: 640px;
    margin: 0 auto 46px;
    text-align: center;
}

.demo-x__head h2 {
    margin-bottom: 12px;
}

.demo-x__head p {
    margin: 0;
    color: var(--demo-muted);
}

.demo-x__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

.demo-x__card {
    padding: 30px 28px;
    border: 1px solid var(--demo-line);
    border-radius: 14px;
    background: var(--demo-surface);
}

.demo-x__card-icon {
    font-size: 1.7rem;
    color: var(--demo-accent);
    display: inline-block;
}

.demo-x__card h3 {
    margin: 16px 0 10px;
    font-size: 1.15rem;
}

.demo-x__card p {
    margin: 0;
    color: var(--demo-muted);
    font-size: .95rem;
}

.demo-x--stats {
    padding: 0;
}

.demo-x__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    padding: 40px 34px;
    border: 1px solid var(--demo-line);
    border-radius: 16px;
    background: var(--demo-surface);
}

.demo-x__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.demo-x__stat-value {
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--demo-accent);
    font-variant-numeric: tabular-nums;
}

.demo-x__stat-label {
    font-size: .9rem;
    color: var(--demo-muted);
}

.demo-x__quote {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.demo-x__quote > i {
    font-size: 2.2rem;
    color: var(--demo-accent);
}

.demo-x__quote blockquote {
    margin: 0;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    line-height: 1.5;
    text-wrap: balance;
}

.demo-x__quote figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
}

.demo-x__quote figcaption > span {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.demo-x__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.demo-x__role {
    font-size: .88rem;
    color: var(--demo-muted);
}

.demo-x__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 56px 30px;
    border: 1px solid var(--demo-line);
    border-radius: 18px;
    background: var(--demo-surface);
}

.demo-x__cta p {
    margin: 0;
    max-width: 52ch;
    color: var(--demo-muted);
}

/* ---- editing affordances ---- */

/* Nothing is clickable until edit mode is on: the page must read as a normal
   page first, so the visitor sees what they are about to change. */
[data-demo-editing] .demo-content .demo-edit {
    cursor: pointer;
    border-radius: 5px;
    outline: 1px dashed rgba(207, 248, 94, .45);
    outline-offset: 3px;
    transition: outline-color .15s ease, background-color .15s ease;
}

[data-demo-editing] .demo-content .demo-edit:hover {
    outline: 1px solid var(--demo-accent);
    background: rgba(207, 248, 94, .09);
}

[data-demo-editing] .demo-content img.demo-edit:hover {
    background: none;
    outline-offset: 4px;
}

.demo-content .demo-edit[contenteditable="true"] {
    outline: 2px solid var(--demo-accent) !important;
    background: rgba(207, 248, 94, .12);
    cursor: text;
}

@media (prefers-reduced-motion: reduce) {
    [data-demo-editing] .demo-content .demo-edit {
        transition: none;
    }
}

/* ---- the editing sidebar (same shape as the real editor's) ---- */

.demo-sdb {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /* Above the site header (sticky, z-index 1000): a fixed editing panel
       that ends up UNDER the navbar has its top form covered — the exact bug
       this value fixes. The real editor owns the whole screen the same way. */
    z-index: 1100;
    width: 320px;
    display: flex;
    flex-direction: column;
    background: #101114;
    border-right: 1px solid #ffffff26;
    transform: translateX(-102%);
    transition: transform .28s ease;
    color: #f2f4f0;
}

[data-demo-sdb-open] .demo-sdb {
    transform: translateX(0);
}

/* The page slides right instead of being covered — the visitor has to keep
   seeing the element they are editing, or the live preview means nothing. */
.demo-content,
.demo-content .demo-bar {
    transition: margin-left .28s ease;
}

[data-demo-sdb-open] .demo-content {
    margin-left: 320px;
}

.demo-sdb__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid #ffffff1a;
}

.demo-sdb__what {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.demo-sdb__tag {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--color-lime-1, #CFF85E);
    color: var(--color-black-1, #030303);
    flex: 0 0 auto;
}

.demo-sdb__key {
    font-size: .78rem;
    color: #a8aeaa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-sdb__close {
    background: none;
    border: 0;
    color: #a8aeaa;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
}

.demo-sdb__close:hover {
    color: #fff;
}

.demo-sdb__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px;
}

.demo-sdb__label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a8aeaa;
    margin-bottom: 8px;
}

.demo-sdb__text {
    width: 100%;
    resize: vertical;
    min-height: 96px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #ffffff26;
    background: #0a0b0d;
    color: #f2f4f0;
    font: inherit;
    font-size: .95rem;
}

.demo-sdb__text:focus {
    outline: 2px solid var(--color-lime-1, #CFF85E);
    outline-offset: 1px;
}

.demo-sdb__note {
    margin: 10px 0 0;
    font-size: .82rem;
    color: #a8aeaa;
}

.demo-sdb__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.demo-sdb__grid[hidden] {
    display: none;
}

.demo-sdb__choice {
    aspect-ratio: 1;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ffffff26;
    background: #0a0b0d;
    color: #fff;
    cursor: pointer;
}

.demo-sdb__choice:hover,
.demo-sdb__choice.is-active {
    border-color: var(--color-lime-1, #CFF85E);
}

.demo-sdb__choice.is-active {
    box-shadow: 0 0 0 1px var(--color-lime-1, #CFF85E);
}

.demo-sdb__choice img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.demo-sdb__choice i {
    font-size: 1.4rem;
    color: var(--color-lime-1, #CFF85E);
}

.demo-sdb__foot {
    display: flex;
    gap: 10px;
    padding: 16px 18px;
    border-top: 1px solid #ffffff1a;
}

.demo-sdb__foot .demo-btn {
    padding: 12px 20px;
    font-size: .92rem;
}

.demo-sdb__publish {
    flex: 1 1 auto;
    justify-content: center;
}

/* the element the sidebar is editing */
.demo-content .demo-selected {
    outline: 2px solid var(--color-lime-1, #CFF85E) !important;
    outline-offset: 3px;
    background: rgba(207, 248, 94, .08);
}

/* On small screens the sidebar becomes a bottom sheet and the page stays put. */
@media (max-width: 900px) {
    .demo-sdb {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: 62vh;
        border-right: 0;
        border-top: 1px solid #ffffff26;
        border-radius: 16px 16px 0 0;
        transform: translateY(102%);
    }

    [data-demo-sdb-open] .demo-sdb {
        transform: translateY(0);
    }

    [data-demo-sdb-open] .demo-content {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo-sdb,
    .demo-content,
    .demo-content .demo-bar {
        transition: none;
    }
}

/* ---- the database-backed section ---- */

.demo-x--db {
    background: var(--demo-surface);
    border-top: 1px solid var(--demo-line-soft);
    border-bottom: 1px solid var(--demo-line-soft);
}

.demo-db-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--demo-line);
    background: var(--demo-surface-2);
    color: var(--demo-accent);
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 18px;
}

/* ---- the tab strip ---- */

.demo-tabs__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 34px;
}

.demo-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid var(--demo-line);
    background: transparent;
    color: var(--demo-muted);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.demo-tabs__tab i {
    font-size: 1.05em;
}

.demo-tabs__tab:hover {
    color: var(--demo-text);
    border-color: var(--demo-line);
}

.demo-tabs__tab.is-active {
    background: var(--demo-accent);
    border-color: var(--demo-accent);
    color: var(--demo-ink);
}

.demo-tabs__panel {
    display: none;
}

.demo-tabs__panel.is-active {
    display: block;
}

.demo-tabs__source {
    margin: 26px 0 0;
    text-align: center;
    font-size: .9rem;
    color: var(--demo-muted);
}

.demo-tabs__source i {
    color: var(--demo-accent);
    margin-right: 6px;
}

.demo-tabs__source a {
    color: var(--demo-accent);
    font-weight: 600;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .demo-tabs__tab {
        transition: none;
    }
}

/* ---- testimonial cards (tab) ---- */

.demo-db-quote {
    margin: 0;
    gap: 14px;
}

.demo-db-quote__stars {
    display: flex;
    gap: 4px;
    color: var(--demo-accent);
    font-size: .9rem;
}

.demo-db-quote__stars .is-dim {
    opacity: .25;
}

.demo-db-quote blockquote {
    margin: 0;
    font-size: .96rem;
    line-height: 1.55;
    color: var(--demo-text);
}

.demo-db-quote figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.demo-db-quote figcaption img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.demo-db-quote figcaption span {
    display: flex;
    flex-direction: column;
}

.demo-db-quote figcaption em {
    font-style: normal;
    font-size: .84rem;
    color: var(--demo-muted);
}

/* ---- FAQ accordion (tab) — native <details> ---- */

.demo-db-faq {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.demo-db-faq details {
    border: 1px solid var(--demo-line);
    border-radius: 12px;
    background: var(--demo-surface-2);
    overflow: hidden;
}

.demo-db-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 600;
    color: var(--demo-text);
    list-style: none;
}

.demo-db-faq summary::-webkit-details-marker {
    display: none;
}

.demo-db-faq summary i {
    flex: 0 0 auto;
    color: var(--demo-accent);
    transition: transform .18s ease;
}

.demo-db-faq details[open] summary i {
    transform: rotate(180deg);
}

.demo-db-faq details > p {
    margin: 0;
    padding: 0 20px 18px;
    color: var(--demo-muted);
    font-size: .94rem;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .demo-db-faq summary i {
        transition: none;
    }
}

/* ---- partner logos (tab) ---- */

.demo-db-partners {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.demo-db-partner {
    display: grid;
    place-items: center;
    padding: 22px 18px;
    border: 1px solid var(--demo-line);
    border-radius: 12px;
    background: var(--demo-surface-2);
    min-height: 90px;
}

.demo-db-partner img {
    max-width: 110px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* the logos are dark-on-transparent SVGs from the theme; on a dark panel
       they need lifting to stay visible */
    filter: brightness(0) invert(.85);
    opacity: .85;
}

.demo-db-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
}

.demo-db-card {
    padding: 28px 26px;
    border: 1px solid var(--demo-line);
    border-radius: 14px;
    background: var(--demo-surface-2);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.demo-db-card__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.demo-db-card__head > i {
    font-size: 1.5rem;
    color: var(--demo-accent);
    margin-top: 2px;
}

.demo-db-card__head h3 {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.demo-db-card__head p {
    margin: 0;
    font-size: .88rem;
    color: var(--demo-muted);
}

.demo-db-card__price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--demo-text);
    font-variant-numeric: tabular-nums;
}

.demo-db-card__price sub {
    font-size: .9rem;
    font-weight: 500;
    color: var(--demo-muted);
    bottom: 0;
    margin-left: 4px;
}

.demo-db-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.demo-db-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .92rem;
    color: var(--demo-muted);
}

.demo-db-card__list i {
    color: var(--demo-accent);
    margin-top: 2px;
}

.demo-db-note {
    margin: 30px 0 0;
    text-align: center;
    font-size: .94rem;
    color: var(--demo-muted);
}

.demo-db-note i {
    color: var(--demo-accent);
    margin-right: 6px;
}

.demo-db-note a {
    color: var(--demo-accent);
    font-weight: 600;
    text-underline-offset: 3px;
}

/* ---- toast ---- */

.demo-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    /* above both the site header (1000) and the sidebar (1100) */
    z-index: 1200;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--color-lime-1, #CFF85E);
    color: var(--color-black-1, #030303);
    font-weight: 600;
    font-size: .92rem;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8);
}

.demo-toast[hidden] {
    display: none;
}

/* ---- the explanation below the example ---- */

/* The explanation is a different kind of content from the example above it,
   so it sits on its own ground rather than continuing the same dark run. */
.demo-x--after {
    padding-top: 76px;
    background: var(--demo-surface);
    border-top: 1px solid var(--demo-line);
}

.demo-x--after .demo-after__item {
    background: var(--demo-surface-2);
    border-color: var(--demo-line-soft);
}

.demo-after__lead {
    max-width: 620px;
    margin: 0 auto 44px;
    text-align: center;
}

.demo-after__lead h2 {
    margin-bottom: 14px;
}

.demo-after__lead p {
    margin: 0;
    color: var(--demo-muted);
}

.demo-after__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
    margin-bottom: 44px;
}

.demo-after__item {
    padding: 26px 24px;
    border: 1px solid var(--demo-line);
    border-radius: 14px;
}

.demo-after__item i {
    font-size: 1.5rem;
    color: var(--demo-accent);
}

.demo-after__item h3 {
    margin: 14px 0 8px;
    font-size: 1.08rem;
}

.demo-after__item p {
    margin: 0;
    color: var(--demo-muted);
    font-size: .93rem;
}

.demo-after__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* ---- the "you are in the demo" strip (sandbox host only) ---- */

.demo-banner {
    position: relative;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    padding: 10px 18px;
    background: var(--color-lime-1, #CFF85E);
    color: var(--color-black-1, #030303);
    font-size: .9rem;
    font-weight: 500;
    text-align: center;
}

.demo-banner a {
    color: inherit;
    font-weight: 700;
    text-underline-offset: 3px;
}

.demo-banner__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-black-1, #030303);
    flex: 0 0 auto;
}