/* Public demo surface.
 *
 * Loaded only when SEG_DEMO_MODE is on. Everything is namespaced under
 * `.demo-*` so it cannot collide with the product's own cascade — the admin
 * CSS is 100KB of element- and class-based selectors and a bare `.card` rule
 * here would reach into the verdict view.
 *
 * Palette and type come from base.html. Nothing new is introduced: the demo
 * has to look like the product, because it IS the product.
 */

/* --- the rail -------------------------------------------------------------
 * The signature element. Every example plots its real score against SIFT's
 * two thresholds, so thirty repetitions teach the mechanic without a word of
 * explanation: left of the first tick is delivered, past the second is held.
 */
.demo-rail {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: #21262d;
    overflow: visible;
    margin: .55rem 0 .5rem;
}
.demo-rail-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 3px;
    background: var(--rail-color, var(--color-muted));
    transition: width var(--transition-base);
}
.demo-rail-tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: #4a5058;
}
.demo-rail-tick::after {
    content: attr(data-label);
    position: absolute;
    top: 10px;
    left: 0;
    transform: translateX(-50%);
    font-size: .6rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7d8590;
    white-space: nowrap;
}
.demo-rail-scale { height: 1rem; }

.demo-score {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .95rem;
}

/* --- example cards -------------------------------------------------------- */
.demo-card {
    display: block;
    height: 100%;
    padding: .8rem .9rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition-fast), transform var(--transition-fast),
                box-shadow var(--transition-fast);
}
.demo-card:hover,
.demo-card:focus-visible {
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-elev-hi);
    color: inherit;
}
.demo-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.demo-card-title {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.3;
    margin-bottom: .15rem;
}
.demo-card-from {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    color: var(--color-text-dim);
    word-break: break-all;
}
.demo-card-blurb {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    margin: .35rem 0 0;
}

/* --- section headers ------------------------------------------------------ */
.demo-section-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin: 2.1rem 0 .85rem;
}
.demo-section-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.demo-section-rule { flex: 1; height: 1px; background: var(--color-border); }
.demo-section-count {
    font-size: .72rem;
    color: var(--color-text-dim);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- page shell ----------------------------------------------------------- */
.demo-wrap { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1rem 4rem; }
.demo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0 1.3rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
}
.demo-wordmark {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .16em;
    color: var(--color-text-primary);
    text-decoration: none;
}
.demo-wordmark:hover { color: var(--color-accent); }
.demo-lede {
    color: var(--color-text-muted);
    font-size: .95rem;
    line-height: 1.6;
}
.demo-h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.02em; margin-bottom: .6rem; }

/* --- back bar on the verdict view ----------------------------------------
 * The verdict view renders chromeless (embed=1), which is right — but a
 * visitor arriving there has no way home. This is the only chrome the demo
 * adds to the product's own page.
 */
.demo-backbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .45rem 1rem;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    font-size: .82rem;
}
.demo-backbar a { color: var(--color-accent); text-decoration: none; }
.demo-backbar a:hover { text-decoration: underline; }
.demo-backbar .demo-backbar-note { color: var(--color-text-dim); }

/* --- the submission address ----------------------------------------------- */
.demo-address {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .85rem 1rem;
    border: 1px dashed var(--color-accent);
    border-radius: var(--radius-md);
    background: rgba(88, 166, 255, .06);
}
.demo-address code {
    font-size: 1.02rem;
    color: var(--color-text-primary);
    word-break: break-all;
    background: none;
    padding: 0;
}
.demo-waiting-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-accent);
    animation: demo-pulse 1.6s ease-in-out infinite;
    flex: 0 0 auto;
}
@keyframes demo-pulse { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

.demo-note {
    font-size: .8rem;
    color: var(--color-text-dim);
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .demo-card, .demo-rail-fill { transition: none; }
    .demo-waiting-dot { animation: none; opacity: .8; }
}

/* --- demo banner ----------------------------------------------------------
 * Replaces the operator navbar. Thin on purpose: the visitor came to look at
 * the product, and every pixel this takes is one the product does not get.
 */
.demo-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem 1rem;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    font-size: .82rem;
    flex-wrap: wrap;
}
.demo-banner-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-text-primary);
    text-decoration: none;
}
.demo-banner-mark { flex: 0 0 auto; height: 26px; width: auto; }
.demo-brand-text { font-size: .95rem; letter-spacing: .01em; font-weight: 400; }
.demo-brand-text b { font-weight: 700; }
.demo-banner-brand:hover { color: var(--color-accent); }
.demo-banner-note { color: var(--color-text-dim); }
.demo-banner-spacer { flex: 1 1 auto; }
.demo-banner-link { color: var(--color-accent); text-decoration: none; }
.demo-banner-link:hover { text-decoration: underline; }
.demo-banner-cta {
    padding: .25rem .8rem;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: #07121f;
    font-weight: 600;
    text-decoration: none;
}
.demo-banner-cta:hover { filter: brightness(1.08); color: #07121f; }

/* --- forms ---------------------------------------------------------------
 * Used by the contact and "scan your own email" pages. Deliberately plain and
 * roomy: these are the two pages a visitor has to ACT on, and the product's
 * dense operator styling is wrong for that.
 */
.demo-narrow { max-width: 30rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.demo-card-form {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.5rem 1.4rem;
    box-shadow: var(--shadow-elev);
}
.demo-form-title { font-size: 1.35rem; font-weight: 600; letter-spacing: -.015em; margin: 0 0 .35rem; }
.demo-form-sub { color: var(--color-text-muted); font-size: .875rem; line-height: 1.55; margin: 0 0 1.3rem; }
.demo-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    margin: 0 0 .3rem;
    color: var(--color-text-muted);
}
.demo-optional { font-weight: 400; color: var(--color-text-dim); }
.demo-input {
    width: 100%;
    padding: .6rem .7rem;
    margin-bottom: 1rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: .9rem;
    font-family: inherit;
    transition: border-color var(--transition-fast);
}
.demo-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(88,166,255,.18);
}
.demo-submit {
    width: 100%;
    padding: .65rem 1rem;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: #07121f;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: filter var(--transition-fast);
}
.demo-submit:hover:not(:disabled) { filter: brightness(1.08); }
.demo-submit:disabled { opacity: .6; cursor: default; }
.demo-form-note { font-size: .78rem; color: var(--color-text-dim); line-height: 1.5; margin: .8rem 0 0; }
.demo-form-foot { border-top: 1px solid var(--color-border); padding-top: .9rem; margin-top: 1.2rem; }
.demo-form-done { font-size: .95rem; line-height: 1.6; margin: 0; }
.demo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- the submission address ---------------------------------------------- */
.demo-addr-box {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem .9rem;
    margin: 0 0 .5rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: rgba(88,166,255,.07);
}
.demo-addr-box code {
    flex: 1 1 auto;
    font-size: 1.0rem;
    color: var(--color-text-primary);
    background: none;
    padding: 0;
    /* Break at the @ we mark with <wbr>, and only mid-token as a last resort —
     * break-all split the domain as "demo.cyberfram / e.co.za". */
    overflow-wrap: anywhere;
    word-break: normal;
}
.demo-addr-box code .demo-addr-domain { color: var(--color-text-muted); }
.demo-copy {
    flex: 0 0 auto;
    padding: .3rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
}
.demo-copy:hover { background: rgba(88,166,255,.14); }

/* --- narrow screens -------------------------------------------------------
 * The link gets opened from LinkedIn and WhatsApp, which means a phone. The
 * banner has five things in it; on a 380px screen they wrap into three rows
 * and eat the screen before the product is visible. Keep the identity and the
 * call to action, drop the rest — they are available from the pages anyway.
 */
@media (max-width: 640px) {
    /* Brand left, one CTA right. The banner must stay a single row on a
     * 390px phone; the try link is on the footer and on every held message. */
    .demo-banner { gap: .6rem; padding: .45rem .7rem; flex-wrap: nowrap; }
    .demo-banner-note,
    .demo-banner-link { display: none; }
    .demo-brand-text { font-size: .85rem; }
    .demo-banner-cta { padding: .22rem .6rem; font-size: .8rem; white-space: nowrap; }
    /* The product's breadcrumb wraps the company name onto three lines. */
    .breadcrumb-sm { flex-wrap: nowrap; overflow: hidden; }
    .breadcrumb-sm .breadcrumb-item.active { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .demo-narrow { padding: 1.4rem .8rem 3rem; }
    .demo-card-form { padding: 1.2rem 1rem 1rem; }
    .demo-form-title { font-size: 1.15rem; }
    .demo-addr-box code { font-size: .88rem; }
}

/* --- orientation strip ----------------------------------------------------
 * A cold visitor arriving from a link lands inside a product UI with no idea
 * what they are looking at or what to click. This is the smallest thing that
 * answers both: one sentence of framing, and four real messages worth opening,
 * strongest case first.
 *
 * Dismissible, and the dismissal is remembered — a returning prospect being
 * pitched again is worse than not being pitched at all.
 */
.demo-intro {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(88,166,255,.06), transparent 70%);
    padding: 1rem 1.1rem 1.1rem;
    margin: 0 0 1rem;
    position: relative;
}
.demo-intro h2 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 .3rem;
    /* tenant_detail.html styles every h2 on the page as a section heading —
       underlined, 1.5rem, padded above, all !important. This one is a sentence
       inside a card, so it has to out-shout that. */
    text-decoration: none !important;
    font-size: 1.05rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.demo-intro p {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0 0 .9rem;
}
.demo-intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .6rem;
}
.demo-pick {
    display: block;
    padding: .6rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.demo-pick:hover, .demo-pick:focus-visible {
    border-color: var(--color-accent);
    transform: translateY(-1px);
    color: inherit;
}
.demo-pick-title { font-size: .83rem; font-weight: 600; line-height: 1.3; }
.demo-pick-blurb { font-size: .75rem; color: var(--color-text-dim); line-height: 1.45; margin-top: .2rem; }
.demo-pick-meta {
    display: flex; align-items: center; gap: .4rem;
    margin-top: .45rem; font-size: .7rem; color: var(--color-text-dim);
    text-transform: uppercase; letter-spacing: .04em;
}
.demo-pick-score { color: var(--color-danger); font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-intro-close {
    position: absolute; top: .5rem; right: .6rem;
    background: none; border: 0; color: var(--color-text-dim);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .2rem .4rem;
}
.demo-intro-close:hover { color: var(--color-text-primary); }

/* --- call to action at the point of impact -------------------------------
 * Shown under a HELD message's verdict. This is the moment the case has just
 * been made — asking here converts better than a link in a banner the reader
 * stopped seeing four pages ago.
 */
.demo-cta-inline {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    padding: .8rem 1rem;
    margin: 1rem 0;
}
.demo-cta-inline p { margin: 0; font-size: .86rem; color: var(--color-text-muted); flex: 1 1 22rem; }
.demo-cta-inline b { color: var(--color-text-primary); }

@media (max-width: 640px) {
    .demo-intro { padding: .8rem .85rem .9rem; }
    .demo-intro-grid { grid-template-columns: 1fr; }
}

/* The one line an FD reads. Given room the paragraph beneath it does not get. */
.demo-intro-stat {
    font-size: .95rem !important;
    line-height: 1.6;
    color: var(--color-text-primary) !important;
    margin-bottom: .6rem !important;
}
.demo-intro-stat b { color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* --- footer, demo only ---------------------------------------------------- */
.footer a { color: var(--color-accent); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* --- try page: what happens next --------------------------------------- */
.demo-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.demo-steps li { display: flex; gap: .6rem; font-size: .84rem; color: var(--color-text-muted); line-height: 1.45; }
.demo-steps li b { flex: 0 0 1.35rem; height: 1.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                   background: rgba(88,166,255,.14); color: var(--color-accent); font-size: .72rem; font-weight: 700; }
.demo-done-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.demo-done-actions a { flex: 1 1 10rem; text-align: center; }
.demo-btn-ghost {
    padding: .5rem .9rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);
    color: var(--color-text-primary); text-decoration: none; font-size: .88rem; font-weight: 600;
}
.demo-btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* --- scan-your-own-email page ----------------------------------------------
 * The address is the page. It gets one large line, a live indicator and the
 * copy button beside it; the three steps sit alongside as the only other
 * content. Two columns from ~880px, stacked below.
 */
.demo-try {
    max-width: 1040px;
    margin: 0 auto;
    padding: 3rem 1.25rem 4rem;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 3rem 4rem;
    align-items: start;
}
.demo-try-title {
    font-size: clamp(1.7rem, 2.6vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 .7rem;
}
.demo-try-sub {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 1.6rem;
}
.demo-try-ticket {
    border: 1px solid rgba(88,166,255,.45);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(88,166,255,.10), rgba(88,166,255,.03));
    padding: 1.1rem 1.25rem 1rem;
}
.demo-try-ticket-label {
    font-size: .8rem;
    color: var(--color-text-muted);
    margin-bottom: .45rem;
}
.demo-try-ticket-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.demo-try-ticket-row code {
    flex: 1 1 18rem;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(.9rem, 1.1vw, 1rem);   /* one line beside the button on a desktop */
    line-height: 1.35;
    color: var(--color-text-primary);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}
.demo-try-ticket-row code .demo-addr-domain { color: var(--color-text-muted); }
.demo-try-copy {
    flex: 0 0 auto;
    padding: .6rem 1.1rem;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: #07121f;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: filter var(--transition-fast);
}
.demo-try-copy:hover { filter: brightness(1.08); }
.demo-try-copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.demo-try-status {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .9rem 0 0;
    font-size: .85rem;
    color: var(--color-text-muted);
}
.demo-try-privacy {
    margin: 1.25rem 0 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--color-text-dim);
}
.demo-try-steps {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0 0 0 .25rem;
    border-left: 1px solid var(--color-border);
    display: grid;
    gap: 1.6rem;
}
.demo-try-steps li {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-left: 1.4rem;
}
.demo-try-step-n {
    position: absolute;
    left: -.85rem;
    top: .05rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    color: var(--color-accent);
    font-size: .78rem;
    font-weight: 700;
}
.demo-try-steps strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.demo-try-steps p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--color-text-muted); }

@media (max-width: 880px) {
    .demo-try { grid-template-columns: 1fr; gap: 2.25rem; padding: 2rem 1rem 3rem; }
    .demo-try-steps { margin-top: 0; }
}
@media (max-width: 640px) {
    .demo-try-ticket { padding: .9rem 1rem .85rem; }
    .demo-try-copy { flex: 1 1 100%; }
}