/* ============================================================
   /demo

   The ad landing page. Borrows the landing page's language (the
   mono HUD, scene slates, the wordmark gradient, grain) without
   borrowing marketing.css, whose global reset and body background
   would fight the app chrome this page sits inside. Everything
   below is scoped under .vems-demo, tokens included.
   ============================================================ */

.vems-demo {
    --d-red: #e6273e;
    --d-magenta: #c0257f;
    --d-purple: #8d2ba6;
    --d-azure: #479ef5;
    --d-grad: linear-gradient(93deg, var(--d-red) 0%, var(--d-magenta) 50%, var(--d-purple) 100%);
    --d-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --d-display: "Archivo", system-ui, sans-serif;

    /* Dark defaults; the light block below overrides. Both keyed off data-theme, which
       theme.js resolves to an explicit 'light' or 'dark' on every page. */
    --d-bg: #05060b;
    --d-card: rgba(22, 26, 44, .96);
    --d-card-2: rgba(10, 12, 24, .96);
    --d-glass: rgba(22, 26, 44, .62);
    --d-glass-2: rgba(10, 12, 24, .7);
    --d-stroke: rgba(160, 175, 220, .16);
    --d-text: #f2f4fb;
    --d-dim: #8f9ab4;
    --d-hud: rgba(190, 200, 235, .28);
    --d-field: rgba(4, 6, 14, .6);
    --d-shadow: 0 40px 110px rgba(0, 0, 0, .55);
    --d-beam-a: rgba(141, 43, 166, .22);
    --d-beam-b: rgba(192, 37, 127, .10);
    --d-star: #cdd6f0;

    position: relative;
    overflow: hidden;
    container-type: inline-size;
    min-height: 100%;
    background: var(--d-bg);
    color: var(--d-text);
    font-family: var(--d-display);
    -webkit-font-smoothing: antialiased;
}

html[data-theme="light"] .vems-demo {
    --d-bg: #f1f2f8;
    --d-card: #ffffff;
    --d-card-2: #f2f4fb;
    --d-glass: rgba(255, 255, 255, .66);
    --d-glass-2: rgba(242, 244, 251, .72);
    --d-stroke: rgba(24, 32, 64, .15);
    --d-text: #1a1e2e;
    --d-dim: #5c6479;
    --d-hud: rgba(24, 32, 64, .32);
    --d-field: rgba(24, 32, 64, .05);
    --d-shadow: 0 22px 60px rgba(20, 30, 60, .12);
    --d-beam-a: rgba(141, 43, 166, .10);
    --d-beam-b: rgba(192, 37, 127, .05);
    --d-star: #8a97bd;
}

/* Film grain, scoped to the page rather than fixed to the viewport, so the app
   header and footer around it stay clean. */
.vems-demo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: .05;
    mix-blend-mode: overlay;
}

.vems-demo .mono { font-family: var(--d-mono); }

.vems-demo__grad {
    background: var(--d-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* A canvas is a replaced element: inset alone leaves it at its intrinsic
   300x150, so the explicit width/height do the stretching. */
.vems-demo__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.vems-demo__beam {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: 50%;
    top: -20%;
    width: 140%;
    height: 90%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 55% 60% at 50% 0%,
        var(--d-beam-a), var(--d-beam-b) 45%, transparent 70%);
}

.vems-demo__inner {
    position: relative;
    z-index: 2;
    width: min(1240px, calc(100% - 72px));
    margin-inline: auto;
    padding: 40px 0 48px;
}
@media (max-width: 700px) { .vems-demo__inner { width: calc(100% - 36px); } }

/* ============ HUD ============ */
.vems-demo__hud {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10.5px;
    letter-spacing: .14em;
    color: var(--d-dim);
    margin-bottom: 26px;
}
.vems-demo__hud-line { flex: 0 1 150px; height: 1px; background: var(--d-hud); }
.vems-demo__tc { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.vems-demo__rec {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--d-red);
    animation: vems-demo-blink 1.1s steps(2) infinite;
}
@keyframes vems-demo-blink { 50% { opacity: .15; } }
@media (max-width: 700px) { .vems-demo__hud-line, .vems-demo__tc { display: none; } }

/* ============ MEGA HEADLINE: one line, edge to edge ============ */
/* 20.8 = the line's measured width in em (~19em of Archivo 900 + four .35em
   gaps) with ~2% slack; space-between absorbs the slack into the word gaps. */
.vems-demo__mega {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.018em;
    line-height: .95;
    white-space: nowrap;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 .35em;
    font-size: clamp(28px, 4.5vw, 59px);
    font-size: clamp(28px, calc((100cqw - 72px) / 20.8), 59px);
    margin: 0;
}
.vems-demo__mega .w { display: inline-block; }
.vems-demo__mega .ch { display: inline-block; }
.vems-demo__mega--wrap { justify-content: flex-start; gap: 0 18px; }
@media (max-width: 720px) {
    .vems-demo__mega {
        white-space: normal;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0 14px;
        font-size: clamp(34px, 9.5vw, 48px);
    }
}
.vems-demo__rule {
    height: 3px;
    background: var(--d-grad);
    background-size: 220% 100%;
    animation: vems-demo-sheen 7s linear infinite;
    margin-top: 14px;
    transform-origin: left;
}
@keyframes vems-demo-sheen { to { background-position: -220% 0; } }

.vems-demo__sub {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    margin-top: 14px;
    margin-bottom: 30px;
}
.vems-demo__sub p {
    color: var(--d-dim);
    font-size: clamp(14px, 1.25vw, 16.5px);
    max-width: 640px;
    margin: 0;
    line-height: 1.5;
}
.vems-demo__sub .mono { font-size: 10px; letter-spacing: .12em; color: var(--d-dim); flex: 0 0 auto; }
@media (max-width: 720px) { .vems-demo__sub .mono { display: none; } }

/* ============ BOOKING CONSOLE ============ */
.vems-demo__console {
    border: 1px solid var(--d-stroke);
    border-radius: 18px;
    background: linear-gradient(160deg, var(--d-card), var(--d-card-2));
    box-shadow: var(--d-shadow);
    overflow: hidden;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vems-demo__console {
        background: linear-gradient(160deg, var(--d-glass), var(--d-glass-2));
        -webkit-backdrop-filter: blur(16px) saturate(1.15);
        backdrop-filter: blur(16px) saturate(1.15);
    }
}
.vems-demo__console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 24px;
    border-bottom: 1px solid var(--d-stroke);
}
.vems-demo__console-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.vems-demo__tz { font-size: 9.5px; color: var(--d-azure); letter-spacing: .06em; }

.vems-demo__console-body { display: grid; grid-template-columns: 1.06fr 1fr; }
@media (max-width: 900px) { .vems-demo__console-body { grid-template-columns: 1fr; } }

.vems-demo__when { padding: 18px 24px 20px; border-right: 1px solid var(--d-stroke); }
@media (max-width: 900px) {
    .vems-demo__when { border-right: 0; border-bottom: 1px solid var(--d-stroke); }
}
.vems-demo__who { padding: 18px 24px 20px; display: flex; flex-direction: column; }

.vems-demo__lbl { font-size: 9.5px; letter-spacing: .13em; color: var(--d-dim); margin-bottom: 8px; }

/* Day rail: built by demo-schedule.js from the fieldset groups. Without JS it stays
   empty and every group renders stacked with its legend, which still books. */
.vems-demo__days { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.vems-demo__days:empty { display: none; }
.vems-demo__day {
    flex: 0 0 auto;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--d-stroke);
    border-radius: 10px;
    padding: 7px 12px;
    min-width: 58px;
    background: transparent;
    color: var(--d-text);
    font-family: var(--d-display);
    transition: border-color .15s, background .15s, transform .15s;
}
.vems-demo__day span { display: block; }
.vems-demo__day .dow { font-family: var(--d-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--d-dim); }
.vems-demo__day .num { font-size: 17px; font-weight: 700; line-height: 1.2; }
.vems-demo__day .mo { font-family: var(--d-mono); font-size: 8px; letter-spacing: .1em; color: var(--d-dim); }
.vems-demo__day:hover { border-color: var(--d-magenta); transform: translateY(-2px); }
.vems-demo__day--sel { border-color: transparent; background: var(--d-grad); }
.vems-demo__day--sel .dow, .vems-demo__day--sel .num, .vems-demo__day--sel .mo { color: #fff; }
.vems-demo__day--sel .dow, .vems-demo__day--sel .mo { color: rgba(255, 255, 255, .82); }

.vems-demo__group { border: 0; margin: 0 0 14px; padding: 0; }
.vems-demo__group legend {
    font-size: 9.5px;
    letter-spacing: .1em;
    color: var(--d-dim);
    margin-bottom: 8px;
    padding: 0;
}
/* JS mode: the rail drives visibility and the legends disappear. */
.vems-demo--js .vems-demo__group legend { display: none; }
.vems-demo--js .vems-demo__group { display: none; margin: 0; }
.vems-demo--js .vems-demo__group--sel { display: block; }

.vems-demo__times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
@media (max-width: 430px) { .vems-demo__times { grid-template-columns: repeat(3, 1fr); } }

.vems-demo__time { display: block; cursor: pointer; }
.vems-demo__time input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.vems-demo__time-face {
    display: block;
    text-align: center;
    border: 1px solid var(--d-stroke);
    border-radius: 8px;
    padding: 9px 3px;
    color: var(--d-text);
    font-family: var(--d-mono);
    font-size: 12px;
    line-height: 1.3;
    transition: border-color .15s, background .15s, transform .15s;
}
.vems-demo__time-face em {
    display: block;
    font-style: normal;
    font-size: 8px;
    color: var(--d-dim);
}
.vems-demo__time:hover .vems-demo__time-face { border-color: var(--d-magenta); transform: translateY(-2px); }
.vems-demo__time input:checked + .vems-demo__time-face {
    border-color: transparent;
    background: var(--d-grad);
    color: #fff;
    font-weight: 700;
}
.vems-demo__time input:checked + .vems-demo__time-face em { color: rgba(255, 255, 255, .78); }
.vems-demo__time input:focus-visible + .vems-demo__time-face { outline: 2px solid var(--d-azure); outline-offset: 2px; }

.vems-demo__escape { margin: 14px 0 0; font-size: 12px; color: var(--d-dim); }
.vems-demo__escape a { color: var(--d-azure); border-bottom: 1px solid rgba(71, 158, 245, .4); text-decoration: none; }

/* ---- the form side ---- */
.vems-demo__picked {
    font-size: 11px;
    letter-spacing: .04em;
    border: 1px dashed var(--d-hud);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--d-dim);
    margin-bottom: 13px;
}
.vems-demo__picked strong { color: var(--d-text); }
.vems-demo--js .vems-demo__picked { display: none; }
.vems-demo--js .vems-demo__picked--on { display: block; }

.vems-demo__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 11px; }
@media (max-width: 460px) { .vems-demo__grid2 { grid-template-columns: 1fr; } }

.vems-demo__field label {
    display: block;
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--d-dim);
    margin-bottom: 4px;
    font-family: var(--d-mono);
}
.vems-demo__field input {
    width: 100%;
    background: var(--d-field);
    color: var(--d-text);
    border: 1px solid var(--d-stroke);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: var(--d-display);
    font-size: 14px;
    box-sizing: border-box;
}
.vems-demo__field input:focus { outline: none; border-color: var(--d-magenta); }
.vems-demo__field input::placeholder { color: var(--d-dim); opacity: .6; }

/* Off-screen rather than display:none, so autofillers still see it but humans never do. */
.vems-demo__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.vems-demo__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.vems-demo__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--d-grad);
    border: 0;
    border-radius: 100px;
    cursor: pointer;
    color: #fff;
    font-family: var(--d-display);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 26px;
    letter-spacing: .02em;
    transition: box-shadow .2s;
}
.vems-demo__cta:hover { box-shadow: 0 12px 34px rgba(192, 37, 127, .38); }
.vems-demo__note { font-size: 11.5px; color: var(--d-dim); line-height: 1.4; flex: 1 1 170px; margin: 0; }

/* ============ CREDITS STRIP ============ */
.vems-demo__credits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 22px;
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--d-dim);
}
.vems-demo__credits > div { display: flex; gap: 22px; flex-wrap: wrap; }
.vems-demo__credits b {
    background: var(--d-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-right: 6px;
    font-weight: 700;
}
.vems-demo__credits em { font-style: normal; color: var(--d-text); font-weight: 700; }

/* ============ SUBMITTED / ACTION OUTCOME ============ */
.vems-demo__done { max-width: 720px; padding: 8px 0 40px; }
.vems-demo__done-title {
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(30px, 4vw, 54px);
    letter-spacing: -.015em;
    margin: 0 0 10px;
}
.vems-demo__done-lede { color: var(--d-dim); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; margin: 14px 0 0; }
.vems-demo__done-note { color: var(--d-dim); font-size: 14px; margin: 12px 0 0; }
.vems-demo__done-links { display: flex; gap: 22px; margin-top: 26px; }
.vems-demo__link {
    color: var(--d-azure);
    border-bottom: 1px solid rgba(71, 158, 245, .4);
    text-decoration: none;
    font-size: 14px;
}

/* GSAP pre-states, applied only when the script is actually running. */
.vems-demo--js .gs { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .vems-demo__rec { animation: none; }
    .vems-demo__rule { animation: none; }
    .vems-demo__day, .vems-demo__time-face, .vems-demo__cta { transition: none; }
}