/* clusta.theme.css
   Loaded LAST on the public website (after l9.tokens, l9.theme and l9.portal). Two jobs:
   1. Override the few rules in l9.theme.css / l9.portal.css that hardcode the old dark look
      (uppercase condensed headings, dark glass topbar, gold-on-black buttons, dark form fields).
   2. The clusta.app marketing kit (.cl-*): the section, grid, card, steps, pricing, timeline,
      queue and FAQ patterns that CMS pages (config_ContentPage.BodyMarkdown raw HTML lines)
      compose their sections from. Marketing edits content, not code.
   Brand: clusta.app brand studio (Cobalt study). Light, spacious, modular, calm. */

:root { color-scheme: light; }

/* ---------- type ---------- */
body { font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--l9-font-heading); font-weight: 600; letter-spacing: -0.02em; text-transform: none; line-height: 1.1; }
h1 { font-weight: 550; letter-spacing: -0.045em; }
h2 { font-weight: 550; letter-spacing: -0.04em; }
p { color: var(--l9-text-muted); }
a { text-decoration: none; }
a:focus-visible, button:focus-visible, .l9-btn-primary:focus-visible, .l9-btn-secondary:focus-visible { outline: 3px solid var(--l9-accent); outline-offset: 4px; }

/* ---------- site chrome ---------- */
.l9-site { background: var(--l9-bg); }
.l9-topbar { background: rgba(248,249,251,.92); border-bottom: 1px solid var(--l9-border); backdrop-filter: blur(10px); }
.l9-topbar-inner { min-height: 76px; }
.l9-brand { text-transform: none; letter-spacing: 0; font-weight: 500; gap: 10px; }
.cl-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--l9-text); }
.cl-mark { width: 30px; height: 30px; flex: 0 0 auto; color: var(--l9-accent); display: block; }
.cl-lockup { display: flex; flex-direction: column; line-height: 1; }
.cl-wordmark { font-family: var(--cl-font-wordmark); font-weight: 650; font-size: 26px; letter-spacing: -0.055em; color: var(--l9-text); white-space: nowrap; }
.cl-descriptor { font-family: var(--l9-font-body); font-size: 12px; font-weight: 450; letter-spacing: 0; color: var(--l9-text-muted); margin-top: 4px; }

.l9-top-actions { gap: 6px; }
.l9-nav-link { color: var(--l9-text-muted); font-weight: 500; font-size: 0.95rem; text-transform: none; padding: 8px 12px; border-radius: 8px; }
.l9-nav-link:hover, .l9-nav-link:focus { background: var(--l9-bg-soft); color: var(--l9-text); }
.l9-nav-link[aria-current="page"] { color: var(--l9-text); box-shadow: inset 0 -2px 0 var(--l9-text); border-radius: 0; }
.l9-nav-btn { background: var(--l9-accent); color: var(--cl-on-accent); border: 1px solid var(--l9-accent); text-transform: none; letter-spacing: 0; font-weight: 600; min-height: 42px; padding: 0 16px; border-radius: var(--l9-radius-button); margin-left: 8px; }
.l9-nav-btn:hover, .l9-nav-btn:focus { background: var(--l9-accent-hover); border-color: var(--l9-accent-hover); color: var(--cl-on-accent); }
.l9-staff-admin-link { color: var(--l9-accent); font-size: 0.85rem; font-weight: 600; padding: 8px 10px; }

/* Mobile menu: the toggle is hidden on desktop; on phones the nav becomes a column under the bar. */
.cl-nav-toggle { display: none; background: transparent; border: 1px solid var(--l9-border); border-radius: 8px; width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--l9-text); }
.cl-nav-toggle svg { width: 22px; height: 22px; }
@media (max-width: 991.98px) {
    .cl-nav-toggle { display: inline-flex; }
    .l9-top-actions { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--l9-surface); border-bottom: 1px solid var(--l9-border); padding: 10px 16px 16px; gap: 2px; box-shadow: var(--l9-shadow-soft); }
    .l9-top-actions.open { display: flex; }
    .l9-topbar-inner { position: relative; }
    .l9-nav-link { padding: 12px 10px; font-size: 1rem; }
    .l9-nav-btn { margin: 8px 0 0; }
}

.l9-main { padding-top: 0; padding-bottom: 0; }
.l9-footer { border-top: 1px solid var(--l9-border); color: var(--l9-text-muted); padding: 40px 0 44px; font-size: 0.9rem; }
.l9-footer-links a { color: var(--l9-text-muted); }
.l9-footer-links a:hover { color: var(--l9-text); }
.cl-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cl-footer-inner .cl-wordmark { font-size: 22px; }
.cl-footer-inner .l9-footer-links { margin: 0; justify-content: flex-start; }
.cl-footer-legal { width: 100%; margin-top: 18px; font-size: 0.8rem; color: var(--l9-text-muted); }

/* ---------- components ---------- */
.l9-panel { background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: var(--l9-radius-card); box-shadow: none; padding: 32px; }
.l9-eyebrow { color: var(--l9-accent); font-size: 12px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.l9-title-xl { text-transform: none; letter-spacing: -0.045em; font-weight: 550; line-height: 1.05; font-size: clamp(2.4rem, 5vw, 4rem); }
.l9-subtitle { font-size: 19px; color: var(--l9-text-muted); max-width: 640px; }
.l9-card { background: var(--l9-surface); border: 1px solid var(--l9-border); box-shadow: none; }
.l9-card:hover { transform: none; border-color: var(--l9-text); background: var(--l9-surface); }
.l9-card-title { text-transform: none; letter-spacing: -0.02em; font-size: 1.25rem; }

.l9-btn-primary, .l9-btn-secondary, .l9-btn-danger, .l9-btn-link { text-transform: none; letter-spacing: 0; font-weight: 600; min-height: 48px; padding: 0.8rem 1.35rem; border-radius: var(--l9-radius-button); }
.l9-btn-primary { background: var(--l9-accent); color: var(--cl-on-accent); border: 1px solid var(--l9-accent); }
.l9-btn-primary:hover, .l9-btn-primary:focus { background: var(--l9-accent-hover); border-color: var(--l9-accent-hover); color: var(--cl-on-accent); }
.l9-btn-secondary { background: var(--l9-surface); color: var(--l9-text); border: 1px solid var(--l9-border); }
.l9-btn-secondary:hover, .l9-btn-secondary:focus { background: var(--l9-surface); color: var(--l9-text); border-color: var(--l9-text); }
.l9-btn-danger { color: var(--l9-danger); border-color: var(--l9-danger); }
.l9-btn-link { color: var(--l9-accent); }

.form-control, .form-select, .input-group-text, textarea { background-color: var(--l9-surface); border-color: var(--l9-border); color: var(--l9-text); border-radius: var(--l9-radius-input); }
.form-control:focus, .form-select:focus, textarea:focus { background-color: var(--l9-surface); color: var(--l9-text); border-color: var(--l9-accent); box-shadow: 0 0 0 0.2rem rgba(49,85,231,.15); }
.form-control::placeholder, textarea::placeholder { color: #8B90A3; }
.form-control[type="date"], .form-control[type="time"] { color-scheme: light; }
.form-control[type="date"]::-webkit-calendar-picker-indicator, .form-control[type="time"]::-webkit-calendar-picker-indicator { filter: none; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23202334' d='M3.2 5.5 8 10.3l4.8-4.8 1.2 1.2L8 12.7 2 6.7z'/%3E%3C/svg%3E"); }
.form-check input[type="checkbox"], .form-check-input { background-color: var(--l9-surface); border: 1px solid #9AA0B3; }
.form-check input[type="checkbox"]:checked, .form-check-input:checked { background-color: var(--l9-accent); border-color: var(--l9-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.2 11.4 2.7 7.9l1.4-1.4 2.1 2.1 5.7-5.7 1.4 1.4z'/%3E%3C/svg%3E"); }
.form-check input[type="checkbox"]:focus, .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(49,85,231,.15); }
.accordion-item { background: var(--l9-surface); border-color: var(--l9-border); }
.accordion-button { background: var(--l9-surface); color: var(--l9-text); }
.accordion-button:not(.collapsed) { background: var(--l9-bg-soft); color: var(--l9-text); }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--l9-bg-soft); }
.list-group-item.active { background: var(--l9-bg-soft); border-color: var(--l9-accent); }
.tab-content .tab-pane { background: var(--l9-surface); }

/* ---------- the content page (content.aspx) ---------- */
.l9-page-heading { padding-top: 24px; }
.l9-cc-wrap { padding-top: 24px; }
.l9-cc-body h2 { font-family: var(--l9-font-heading); text-transform: none; letter-spacing: -0.04em; font-weight: 550; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 34px 0 10px; }
.l9-cc-body h3 { font-weight: 600; letter-spacing: -0.02em; }
.l9-cc-body p, .l9-cc-body li { color: var(--l9-text); }
.l9-cc-kicker { color: var(--l9-accent); }
.l9-cc-title { font-family: var(--l9-font-heading); text-transform: none; letter-spacing: -0.02em; font-weight: 600; font-size: 1.15rem; }
.l9-cc-card { background: var(--l9-surface); border-color: var(--l9-border); color: var(--l9-text); }
.l9-cc-card:hover { border-color: var(--l9-text); }
.l9-cc-media { background: var(--l9-surface-2); }
.l9-cc-text { color: var(--l9-text-muted); }
.l9-cc-fact .lbl { color: var(--l9-text-muted); }
.l9-cc-studios li { background: var(--l9-surface); border-color: var(--l9-border); }
.l9-cc-body blockquote { border-left-color: var(--l9-accent); }
.l9-cc-body hr { border-top-color: var(--l9-border); }
/* Wide pages (Kind = page or hub) let sections run the full content width; articles and legal stay narrow. */
.l9-cc-wrap.cl-wide { max-width: var(--l9-max-content); padding-bottom: 0; }
.l9-cc-wrap.cl-wide .l9-prose { line-height: 1.55; }

/* ---------- clusta.app marketing kit ---------- */
/* A section is full-bleed (it breaks out of the container) and centres its own .cl-wrap. */
.cl-section { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: 72px 0; }
.cl-section + .cl-section { border-top: 1px solid var(--l9-border); }
.cl-section--tint { background: var(--l9-bg-soft); }
.cl-section--band { background: var(--cl-ink); color: #fff; }
.cl-section--band h2, .cl-section--band h3, .cl-section--band .cl-h2 { color: #fff; }
.cl-section--band p, .cl-section--band .cl-lead, .cl-section--band li { color: #C6CADA; }
.cl-section--band .cl-eyebrow { color: #B9BFD4; }
.cl-section--band + .cl-section, .cl-section + .cl-section--band { border-top: 0; }
.cl-section--flush { padding-top: 40px; }
.cl-wrap { max-width: var(--l9-max-content); margin: 0 auto; padding: 0 24px; }
.cl-wrap--narrow { max-width: 820px; }
.cl-eyebrow { display: block; color: var(--l9-accent); font-size: 12px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 18px; }
.cl-h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); font-weight: 550; letter-spacing: -0.045em; line-height: 1.04; margin: 0 0 12px; color: var(--l9-text); }
.cl-h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 550; letter-spacing: -0.04em; line-height: 1.08; margin: 0 0 14px; color: var(--l9-text); }
.cl-h2 + .cl-lead { margin-top: 0; }
.cl-h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--l9-text); }
.cl-lead { font-size: 19px; line-height: 1.55; color: var(--l9-text-muted); max-width: 640px; margin: 0 0 26px; }
.cl-muted { color: var(--l9-text-muted); }
.cl-small { font-size: 0.9rem; }
.cl-micro { font-size: 12px; line-height: 1.6; color: var(--l9-text-muted); }
.cl-section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 36px; }
.cl-section-head > p { max-width: 380px; margin: 0; color: var(--l9-text-muted); }
.cl-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 16px; }
.cl-actions .l9-btn-primary, .cl-actions .l9-btn-secondary { min-height: 50px; padding: 0 22px; font-size: 15px; }
.cl-note { font-size: 13px; color: var(--l9-text-muted); margin: 0; }

/* Hero: copy left, one coherent visual right. Stacks on phones with the copy first. */
.cl-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 40px 0 8px; }
.cl-hero .cl-lead { max-width: 520px; }
.cl-hero-visual { position: relative; }
.cl-price-line { display: inline-flex; align-items: baseline; gap: 8px; margin: 8px 0 22px; font-weight: 600; color: var(--l9-text); }
.cl-price-line .cl-price { font-family: var(--cl-font-wordmark); font-size: 1.6rem; letter-spacing: -0.03em; }

/* Illustrative product view: a truthful, labelled illustration until real product captures exist. */
.cl-product { background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 14px; overflow: hidden; box-shadow: var(--l9-shadow-strong); display: grid; grid-template-columns: 150px 1fr; min-height: 380px; }
.cl-product-side { background: var(--cl-ink); color: #fff; padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.cl-product-side .cl-mark { color: #fff; width: 22px; height: 22px; margin-bottom: 14px; }
.cl-product-side span { font-size: 12px; color: #C6CADA; padding: 7px 8px; border-radius: 6px; }
.cl-product-side span.on { background: rgba(255,255,255,.12); color: #fff; }
.cl-product-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; background: var(--l9-bg); }
.cl-product-main h4 { font-size: 1rem; font-weight: 600; margin: 0 0 4px; color: var(--l9-text); }
.cl-product-card { background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--l9-text); display: grid; gap: 4px; }
.cl-product-card b { font-size: 12px; }
.cl-product-card .cl-row { display: flex; justify-content: space-between; gap: 10px; color: var(--l9-text-muted); }
.cl-product-card .cl-row em { font-style: normal; color: var(--l9-accent); font-weight: 600; }
.cl-product-label { position: absolute; right: 10px; bottom: -22px; font-size: 11px; color: var(--l9-text-muted); }

/* Grids and cards */
.cl-grid-2, .cl-grid-3, .cl-grid-4 { display: grid; gap: 20px; }
.cl-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cl-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cl-card { background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: var(--l9-radius-card); padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; color: var(--l9-text); }
.cl-card b { font-size: 13px; color: var(--l9-accent); letter-spacing: 0.02em; }
.cl-card h3, .cl-card .cl-h3 { margin: 6px 0 2px; }
.cl-card p { margin: 0; color: var(--l9-text-muted); line-height: 1.6; }
a.cl-card:hover { border-color: var(--l9-text); }
.cl-card--tint { background: var(--l9-bg-soft); border-color: transparent; }
.cl-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--l9-bg-soft); color: var(--l9-accent); display: grid; place-items: center; margin-bottom: 6px; }
.cl-icon svg { width: 22px; height: 22px; }

/* Outcome strip: three headline outcomes under the hero. */
.cl-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--l9-border); }
.cl-outcomes h3 { font-size: 1.15rem; margin: 0 0 4px; }
.cl-outcomes p { margin: 0; font-size: 0.95rem; }

/* Steps: a numbered horizontal process (5 steps on desktop). */
.cl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: step; margin: 26px 0 0; padding: 0; list-style: none; }
.cl-steps li { position: relative; background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 10px; padding: 18px 16px 16px; counter-increment: step; }
.cl-steps li::before { content: counter(step, decimal-leading-zero); display: block; font-size: 12px; font-weight: 600; color: var(--l9-accent); letter-spacing: 0.08em; margin-bottom: 10px; }
.cl-steps h4 { font-size: 1rem; font-weight: 600; margin: 0 0 4px; color: var(--l9-text); }
.cl-steps p { margin: 0; font-size: 0.9rem; color: var(--l9-text-muted); }
.cl-steps-title { font-size: 12px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--l9-text-muted); margin: 30px 0 0; }
.cl-section--band .cl-steps li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.cl-section--band .cl-steps h4 { color: #fff; }
.cl-section--band .cl-steps li::before { color: #9FB2FF; }

/* Timeline: the 24-hour transformation. */
.cl-timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 30px; border-top: 2px solid var(--l9-border); padding: 0; list-style: none; }
.cl-timeline li { padding: 18px 14px 0 0; position: relative; }
.cl-timeline li::before { content: ''; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--l9-accent); }
.cl-timeline time { display: block; font-size: 12px; font-weight: 600; color: var(--l9-accent); letter-spacing: 0.08em; }
.cl-timeline h4 { font-size: 0.95rem; font-weight: 600; margin: 6px 0 4px; color: var(--l9-text); }
.cl-timeline p { margin: 0; font-size: 0.85rem; color: var(--l9-text-muted); }

/* Pricing panel */
.cl-pricing { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: var(--cl-ink); color: #fff; border-radius: 16px; padding: 48px; }
.cl-pricing .cl-eyebrow { color: #B9BFD4; }
.cl-pricing h2, .cl-pricing .cl-h2 { color: #fff; }
.cl-pricing p { color: #C6CADA; }
.cl-pricing .cl-price { font-family: var(--cl-font-wordmark); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 650; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.cl-pricing .cl-price small { font-family: var(--l9-font-body); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: #C6CADA; margin-left: 8px; }
.cl-pricing ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.cl-pricing li { padding-left: 24px; position: relative; color: #E4E7F2; }
.cl-pricing li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 2px; background: var(--l9-accent); }
.cl-pricing .l9-btn-primary { background: #fff; color: var(--cl-ink); border-color: #fff; }
.cl-pricing .l9-btn-primary:hover { background: #E4E7F2; border-color: #E4E7F2; color: var(--cl-ink); }
.cl-usage { border-top: 1px solid rgba(255,255,255,.18); margin-top: 22px; padding-top: 18px; font-size: 0.9rem; }

/* The queue (public). Server-rendered by the [queue] token or the /project page. */
.cl-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cl-queue li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px; background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 10px; padding: 14px 18px; }
.cl-queue .cl-pos { font-family: var(--cl-font-wordmark); font-weight: 650; font-size: 1.4rem; letter-spacing: -0.03em; color: var(--l9-text); }
.cl-queue .cl-who { display: flex; flex-direction: column; gap: 2px; }
.cl-queue .cl-who b { font-weight: 600; color: var(--l9-text); }
.cl-queue .cl-who span { font-size: 0.85rem; color: var(--l9-text-muted); }
.cl-queue .cl-state { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; background: var(--l9-bg-soft); color: var(--l9-accent); white-space: nowrap; }
.cl-queue li.is-live { border-color: var(--l9-accent); box-shadow: 0 0 0 3px rgba(49,85,231,.12); }
.cl-queue li.is-live .cl-state { background: var(--l9-accent); color: #fff; }
.cl-queue li.is-done .cl-state { background: #E6F2EC; color: var(--l9-success); }
.cl-queue-empty { background: var(--l9-surface); border: 1px dashed var(--l9-border); border-radius: 10px; padding: 22px; color: var(--l9-text-muted); }
.cl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 22px; }
.cl-stat { background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 10px; padding: 16px 18px; }
.cl-stat b { display: block; font-family: var(--cl-font-wordmark); font-size: 1.8rem; letter-spacing: -0.03em; color: var(--l9-text); line-height: 1; }
.cl-stat span { font-size: 12px; color: var(--l9-text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.cl-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }

/* FAQ: native details/summary, keyboard accessible, no JS. */
.cl-faq { display: grid; gap: 10px; margin: 0; }
.cl-faq details { background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 10px; padding: 0 20px; }
.cl-faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; color: var(--l9-text); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary::after { content: '+'; font-size: 1.3rem; color: var(--l9-accent); flex: 0 0 auto; }
.cl-faq details[open] summary::after { content: '\2212'; }
.cl-faq details > p { margin: 0 0 18px; color: var(--l9-text-muted); }

/* Forms in the kit (application, registration) */
.cl-form { background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 14px; padding: 28px; display: grid; gap: 14px; }
.cl-form .cl-field { display: grid; gap: 6px; }
.cl-form label { font-size: 13px; font-weight: 600; color: var(--l9-text); }
.cl-form .cl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cl-form .cl-help { font-size: 12px; color: var(--l9-text-muted); }
.cl-form .cl-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--l9-text-muted); }
.cl-form .cl-consent input { margin-top: 3px; }
.cl-form-status { font-size: 14px; margin: 0; }
.cl-form-status.is-error { color: var(--l9-danger); }
.cl-form-status.is-ok { color: var(--l9-success); }

/* Closing call to action */
.cl-close { text-align: center; padding: 20px 0 8px; }
.cl-close .cl-h2 { margin-bottom: 10px; }
.cl-close .cl-lead { margin: 0 auto 24px; }
.cl-close .cl-actions { justify-content: center; }

/* Responsive */
@media (max-width: 991.98px) {
    .cl-section { padding: 56px 0; }
    .cl-hero { grid-template-columns: 1fr; gap: 32px; }
    .cl-grid-3, .cl-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .cl-steps { grid-template-columns: repeat(2, 1fr); }
    .cl-timeline { grid-template-columns: repeat(3, 1fr); gap: 18px 0; }
    .cl-pricing { grid-template-columns: 1fr; padding: 34px; }
    .cl-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cl-outcomes { grid-template-columns: 1fr; gap: 18px; }
    .cl-rules { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .cl-section { padding: 44px 0; }
    .cl-wrap { padding: 0 16px; }
    .cl-grid-2, .cl-grid-3, .cl-grid-4, .cl-steps, .cl-stats { grid-template-columns: 1fr; }
    .cl-timeline { grid-template-columns: 1fr 1fr; }
    .cl-product { grid-template-columns: 1fr; min-height: 0; }
    .cl-product-side { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .cl-product-side .cl-mark { width: 100%; margin-bottom: 6px; }
    .cl-form .cl-field-row { grid-template-columns: 1fr; }
    .cl-queue li { grid-template-columns: 48px 1fr; }
    .cl-queue .cl-state { grid-column: 2; justify-self: start; }
    .cl-h1 { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- 2026-09-24 redesign: the queue board, verbs, chains, stepper, tags, big list ---------- */
/* Contrast: prose rules in content.aspx colour direct children only; inside kit sections the kit decides. */
.l9-cc-body .cl-section--band p, .l9-cc-body .cl-section--band li, .l9-cc-body .cl-section--band .cl-lead { color: #C6CADA; }
.l9-cc-body .cl-section--band h2, .l9-cc-body .cl-section--band h3, .l9-cc-body .cl-section--band h4, .l9-cc-body .cl-section--band .cl-h2 { color: #fff; }
.l9-cc-body .cl-pricing p, .l9-cc-body .cl-pricing li { color: #E4E7F2; }
.l9-cc-body .cl-steps p, .l9-cc-body .cl-timeline p { color: var(--l9-text-muted); }
.l9-cc-body .cl-section--band .cl-steps p, .l9-cc-body .cl-section--band .cl-timeline p { color: #B9BFD4; }
.l9-cc-body .cl-section--band .cl-timeline h4 { color: #fff; }
.l9-cc-body .cl-section--band .cl-timeline time { color: #9FB2FF; }
.cl-section--band .cl-timeline { border-top-color: rgba(255,255,255,.22); }
.cl-section--band .cl-timeline li::before { background: #9FB2FF; }
.cl-section--band .l9-btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.cl-section--band .l9-btn-secondary:hover { border-color: #fff; color: #fff; }
.cl-body { color: var(--l9-text); font-size: 17px; line-height: 1.6; max-width: 620px; margin: 0 0 26px; }
.cl-h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.cl-section-head { margin-bottom: 40px; }

/* Hero */
.cl-section--hero { padding-top: 56px; padding-bottom: 64px; }
.cl-section--hero + .cl-section { border-top: 0; }
.cl-hero { grid-template-columns: 1fr 1fr; gap: 56px; padding: 0; align-items: center; }
.cl-hero-copy .cl-eyebrow { margin-bottom: 20px; }
.cl-hero-copy .cl-h1 { font-size: clamp(2.8rem, 5.6vw, 4.8rem); margin-bottom: 16px; }
.cl-hero-copy .cl-sub { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 500; color: var(--l9-text); line-height: 1.35; margin: 0 0 18px; max-width: 560px; }
.cl-hero-copy .cl-lead { margin-bottom: 26px; }
.cl-hero-copy .cl-note { margin-top: 4px; font-size: 14px; color: var(--l9-text); font-weight: 500; }
.cl-hero-board { position: relative; }
.cl-hero-board::before { content: ''; position: absolute; inset: -14px; background: var(--l9-bg-soft); border-radius: 22px; z-index: 0; }
.cl-hero-board > * { position: relative; z-index: 1; }

/* The Clusta Queue board */
.cq { background: var(--cl-ink); color: #fff; border-radius: 16px; padding: 22px 22px 20px; box-shadow: var(--l9-shadow-strong); }
.cq-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.cq-title { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.cq-dot { width: 10px; height: 10px; border-radius: 50%; background: #5B7CFF; box-shadow: 0 0 0 0 rgba(91,124,255,.55); animation: cqpulse 2.2s ease-out infinite; }
@keyframes cqpulse { 0% { box-shadow: 0 0 0 0 rgba(91,124,255,.55); } 70% { box-shadow: 0 0 0 10px rgba(91,124,255,0); } 100% { box-shadow: 0 0 0 0 rgba(91,124,255,0); } }
.cq-open { font-size: 12px; color: #9FB2FF; letter-spacing: .04em; }
.cq-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.cq-stats > div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cq-stats b { font-family: var(--cl-font-wordmark); font-size: 1.7rem; font-weight: 650; letter-spacing: -.03em; line-height: 1; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-stats span { font-size: 11.5px; color: #B9BFD4; letter-spacing: .02em; }
.cq-stat-now b { font-size: 1.15rem; padding-top: 4px; }
.cq-marker { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9FB2FF; margin: 4px 0 8px; }
.cq-marker::after { content: ''; flex: 1; border-top: 1px dashed rgba(159,178,255,.45); }
.cq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cq-list li { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.cq-n { font-family: var(--cl-font-wordmark); font-weight: 650; font-size: 1.05rem; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.cq-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cq-who b { font-weight: 600; color: #fff; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-who span { font-size: .78rem; color: #B9BFD4; }
.cq-state { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #C6CADA; white-space: nowrap; }
.cq-list li.is-done { background: rgba(255,255,255,.02); }
.cq-list li.is-done .cq-n, .cq-list li.is-done .cq-who b { color: #C6CADA; }
.cq-list li.is-done .cq-state { color: #7FE0A8; }
.cq-list li.is-live { background: var(--l9-accent); border-color: var(--l9-accent); }
.cq-list li.is-live .cq-who span { color: #DCE3FF; }
.cq-list li.is-live .cq-state { color: #fff; }
.cq-list li.is-ready .cq-state { color: #9FB2FF; }
.cq-list li.is-empty { border-style: dashed; }
.cq-list li.is-empty .cq-who span { white-space: normal; }
.cq-list li.is-more { background: transparent; border-style: dashed; }
.cq-list li.is-more .cq-state a { color: #9FB2FF; text-decoration: underline; text-underline-offset: 3px; }
.cq-feed { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
.cq-feed-title { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9FB2FF; margin-bottom: 8px; }
.cq-feed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cq-feed li { display: grid; grid-template-columns: 80px 1fr; gap: 10px; font-size: .88rem; color: #C6CADA; }
.cq-feed li b { color: #fff; font-weight: 600; }
.cq-when { color: #8A93B3; font-size: .8rem; padding-top: 2px; }
.cq-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.cq-join.l9-btn-primary { background: #fff; color: var(--cl-ink); border-color: #fff; }
.cq-join.l9-btn-primary:hover { background: #E4E7F2; border-color: #E4E7F2; color: var(--cl-ink); }
.cq-note { font-size: 12px; color: #B9BFD4; }
.cq-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cq--compact .cq-stats { grid-template-columns: repeat(2, 1fr); }
.cq--compact .cq-stats > div:nth-child(3) { grid-column: 1 / -1; }
#queue .cq { padding: 28px; }
#queue .cq-list li { padding: 13px 16px; }

/* Learn / Transform / Run */
.cl-section--verbs { padding: 0 0 8px; border-top: 0 !important; }
.cl-verbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--l9-border); border-radius: 14px; overflow: hidden; background: var(--l9-surface); }
.cl-verbs li + li { border-left: 1px solid var(--l9-border); }
.cl-verbs a { display: flex; flex-direction: column; gap: 8px; padding: 28px 26px 26px; color: var(--l9-text); height: 100%; }
.cl-verbs a:hover { background: var(--l9-bg-soft); }
.cl-verb-n { font-size: 12px; font-weight: 600; letter-spacing: .13em; color: var(--l9-accent); }
.cl-verb { font-family: var(--cl-font-wordmark); font-size: 2.2rem; font-weight: 650; letter-spacing: -.045em; line-height: 1; }
.cl-verb-text { color: var(--l9-text-muted); line-height: 1.55; }
.cl-verb-link { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: .92rem; color: var(--l9-accent); }

/* Chains (the autopilot loops, the growth loop) */
.cl-chain-block { margin-top: 30px; }
.cl-chain-title { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9FB2FF; margin: 0 0 12px; }
.cl-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cl-chain li { position: relative; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 999px; padding: 10px 30px 10px 16px; font-size: .92rem; font-weight: 500; }
.cl-chain li::after { content: '\2192'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: #9FB2FF; font-size: .9rem; }
.cl-chain li:last-child { padding-right: 16px; background: var(--l9-accent); border-color: var(--l9-accent); }
.cl-chain li:last-child::after { content: none; }
.cl-chain-note { margin: 26px 0 0; max-width: 720px; }
.cl-chain-note a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.cl-section--loop .cl-chain li { background: var(--l9-surface); border-color: var(--l9-border); color: var(--l9-text); }
.cl-section--loop .cl-chain li::after { color: var(--l9-accent); }
.cl-section--loop .cl-chain li:last-child { background: var(--cl-ink); border-color: var(--cl-ink); color: #fff; }
.cl-section--loop .cl-chain-note { color: var(--l9-text-muted); }
.cl-section--loop .cl-chain-note a { color: var(--l9-text); }

/* Split layout and the vertical stepper */
.cl-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.cl-split--wide { grid-template-columns: 1fr 1fr; align-items: center; }
.cl-stepper { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.cl-stepper li { position: relative; padding: 0 0 26px 44px; counter-increment: step; }
.cl-stepper li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--l9-surface); border: 1px solid var(--l9-border); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--l9-text); }
.cl-stepper li::after { content: ''; position: absolute; left: 15px; top: 32px; bottom: 6px; border-left: 1px dashed #9AA6D6; }
.cl-stepper li:last-child::after { content: none; }
.cl-stepper li.is-key::before { background: var(--l9-accent); border-color: var(--l9-accent); color: #fff; }
.cl-step-k { display: block; font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; color: var(--l9-text); margin-bottom: 4px; }
.cl-stepper li.is-key .cl-step-k { font-family: var(--cl-font-wordmark); font-size: 1.5rem; letter-spacing: -.03em; }
.cl-step-t { display: block; color: var(--l9-text-muted); line-height: 1.55; }

/* Clusta 24 */
.cl-section--c24 .cl-timeline { margin-top: 48px; }
.cl-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cl-tags li { border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 8px; padding: 10px 14px; font-size: .92rem; font-weight: 500; background: rgba(255,255,255,.04); }

/* Sessions, events, big list, price card */
.cl-card--session b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.cl-card--feb { background: var(--cl-ink); border-color: var(--cl-ink); color: #fff; }
.cl-card--feb h3, .cl-card--feb .cl-h3 { color: #fff; }
.cl-card--feb p { color: #C6CADA; }
.cl-card--feb b { color: #9FB2FF; }
.cl-events { margin-top: 30px; }
.cl-events > p { color: var(--l9-text-muted); }
.cl-events h2 { font-size: 1.25rem !important; margin: 24px 0 10px !important; }
.cl-biglist { font-family: var(--cl-font-wordmark); font-size: clamp(2rem, 5.2vw, 4.4rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.12; color: var(--l9-text); margin: 0 0 28px; max-width: 1100px; }
.cl-biglist span:nth-child(2n) { color: var(--l9-accent); }
.cl-price-card { background: var(--cl-ink); color: #fff; border-radius: 16px; padding: 36px; display: flex; flex-direction: column; justify-content: center; min-height: 260px; }
.cl-price-card .cl-price { font-family: var(--cl-font-wordmark); font-size: clamp(3rem, 6vw, 5rem); font-weight: 650; letter-spacing: -.045em; line-height: 1; color: #fff; margin: 0; }
.cl-price-card .cl-price-unit { color: #B9BFD4; margin: 8px 0 18px; font-size: 1rem; }
.cl-price-card .cl-price-line2 { color: #C6CADA; margin: 0; }
.l9-cc-body .cl-price-card p { color: #C6CADA; }
.l9-cc-body .cl-price-card .cl-price { color: #fff; }

@media (max-width: 991.98px) {
    .cl-hero { grid-template-columns: 1fr; gap: 40px; }
    .cl-hero-board::before { inset: -10px; }
    .cl-split, .cl-split--wide { grid-template-columns: 1fr; gap: 32px; }
    .cl-verbs { grid-template-columns: 1fr; }
    .cl-verbs li + li { border-left: 0; border-top: 1px solid var(--l9-border); }
    .cq-stats { grid-template-columns: repeat(2, 1fr); }
    .cq-stats > div:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .cl-section--hero { padding-top: 32px; }
    .cq { padding: 16px; }
    .cq-list li { grid-template-columns: 60px 1fr; }
    .cq-state { grid-column: 2; justify-self: start; }
    .cq-feed li { grid-template-columns: 1fr; gap: 2px; }
    .cl-chain li { font-size: .85rem; padding: 8px 26px 8px 12px; }
    .cl-verb { font-size: 1.8rem; }
}

/* ---------- 2026-09-25: the landing page (answer to the ads) and the live Queue Wall ---------- */
.cl-section--land { padding: 56px 0 40px; }
.cl-land { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: end; }
.cl-land .cl-h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); max-width: 760px; }
.cl-land .cl-sub { font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 500; color: var(--l9-text); line-height: 1.35; margin: 0 0 18px; max-width: 640px; }
.cl-land .cl-lead { max-width: 600px; }
.cl-proofline { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cl-proofline li { border: 1px solid var(--l9-border); background: var(--l9-surface); border-radius: 999px; padding: 8px 14px; font-size: .9rem; font-weight: 500; color: var(--l9-text); }
.cl-proofline li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--l9-accent); margin-right: 8px; vertical-align: 1px; }
.cl-hook { font-family: var(--cl-font-wordmark); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 650; letter-spacing: -.03em; color: var(--l9-text); line-height: 1.25; margin: 0 0 14px; }
.cl-land-side { display: grid; gap: 14px; }
.cl-spots { background: var(--cl-ink); color: #fff; border-radius: 14px; padding: 18px 20px; display: grid; gap: 10px; }
.cl-spots-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-spots-row b { font-family: var(--cl-font-wordmark); font-size: 1.9rem; letter-spacing: -.03em; line-height: 1; }
.cl-spots-row span { color: #B9BFD4; font-size: .9rem; }
.cl-spots-timer { border-top: 1px solid rgba(255,255,255,.14); padding-top: 10px; font-size: .9rem; color: #C6CADA; display: flex; align-items: center; gap: 10px; }
.cl-spots-timer .cq-dot { flex: 0 0 auto; }
.cl-spots .cl-micro { color: #8A93B3; }
.cl-catch { color: var(--l9-text-muted); font-size: .95rem; margin: 0; }
.cl-catch b { color: var(--l9-text); }

/* The Queue Wall */
.cl-section--wall { padding: 64px 0 56px; }
.cl-wall-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 28px; }
.cq3d { position: relative; height: 560px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 90% at 30% 10%, #2a3567 0%, var(--cl-ink) 55%, #141726 100%); box-shadow: var(--l9-shadow-strong); }
.cq3d.is-fallback { display: none; }
.cq3d-stage { position: absolute; inset: 0; }
.cq3d-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.cq3d-labels { position: absolute; inset: 0; pointer-events: none; }
.cq3d-label { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 12px; border-radius: 10px; background: rgba(32,35,52,.78); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); color: #fff; white-space: nowrap; text-align: center; transform: translateY(-4px); }
.cq3d-label b { font-family: var(--cl-font-wordmark); font-size: .8rem; letter-spacing: .04em; color: #9FB2FF; }
.cq3d-label span { font-weight: 600; font-size: .95rem; }
.cq3d-label small { font-size: .72rem; color: #B9BFD4; }
.cq3d-label em { font-style: normal; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #C6CADA; margin-top: 3px; }
.cq3d-label.is-live { background: rgba(49,85,231,.92); border-color: #7f9bff; }
.cq3d-label.is-live em, .cq3d-label.is-live b { color: #fff; }
.cq3d-label.is-done { opacity: .85; }
.cq3d-label.is-done em { color: #7FE0A8; }
.cq3d-label.is-open { border-style: dashed; background: rgba(32,35,52,.55); }
.cq3d-label--gate { background: transparent; border: 0; backdrop-filter: none; }
.cq3d-label--gate em { font-family: var(--cl-font-wordmark); font-size: 1rem; letter-spacing: .18em; color: #9FB2FF; }
.cq3d-label--gate span { font-weight: 400; font-size: .72rem; color: #C6CADA; }
.cq3d-hud { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; pointer-events: none; }
.cq3d-hud-l { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.cq3d-hud-l em { font-style: normal; color: #9FB2FF; letter-spacing: .06em; text-transform: none; font-weight: 500; }
.cq3d-hud-r { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cq3d-hud-r > span { background: rgba(32,35,52,.72); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 7px 12px; font-size: .82rem; font-weight: 500; backdrop-filter: blur(6px); }
.cq3d-hud-r > span:empty { display: none; }
.cq3d-timer i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7FE0A8; margin-right: 8px; box-shadow: 0 0 0 0 rgba(127,224,168,.6); animation: cqpulse 1.4s ease-out infinite; }
.cq3d-ticker { position: absolute; z-index: 3; left: 16px; bottom: 16px; display: grid; gap: 6px; max-width: min(420px, 80%); pointer-events: none; }
.cq3d-note { display: flex; gap: 10px; align-items: baseline; background: rgba(248,249,251,.96); color: var(--l9-text); border-radius: 10px; padding: 9px 12px; font-size: .85rem; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.cq3d-note.is-in { opacity: 1; transform: none; }
.cq3d-note span { font-size: .72rem; color: var(--l9-text-muted); white-space: nowrap; }
.cq3d-note b { font-weight: 600; }
.cl-wall-list { margin-top: 18px; }
.cl-wall-list details { border: 1px solid var(--l9-border); border-radius: 12px; background: var(--l9-surface); }
.cl-wall-list summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--l9-text); list-style: none; display: flex; justify-content: space-between; }
.cl-wall-list summary::-webkit-details-marker { display: none; }
.cl-wall-list summary::after { content: '+'; color: var(--l9-accent); }
.cl-wall-list details[open] summary::after { content: '\2212'; }
.cl-wall-list .cq { border-radius: 0 0 12px 12px; box-shadow: none; }
.cl-rules-mini { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cl-rules-mini li { background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 10px; padding: 14px 16px; font-size: .92rem; color: var(--l9-text); }
.cl-rules-mini b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--l9-accent); margin-bottom: 4px; }

/* The why: the ad hooks as a typographic block */
.cl-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 30px 0 26px; }
.cl-why blockquote { margin: 0; background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 14px; padding: 26px 26px 24px; font-family: var(--cl-font-wordmark); font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.2; color: var(--l9-text); }
.cl-why blockquote::before { content: ''; display: block; width: 28px; height: 28px; margin-bottom: 16px; background: var(--l9-accent); border-radius: 6px; }
.cl-ethos { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--cl-font-wordmark); font-size: clamp(1.3rem, 2.6vw, 2.2rem); font-weight: 650; letter-spacing: -.04em; color: var(--l9-text); margin: 0 0 18px; }
.cl-ethos span:nth-child(2) { color: var(--l9-accent); }

/* Meanwhile */
.cl-meanwhile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.cl-mw { background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 14px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.cl-mw b.cl-mw-k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--l9-accent); }
.cl-mw h3 { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.cl-mw p { margin: 0; color: var(--l9-text-muted); }
.cl-mw ul { margin: 6px 0 0; padding-left: 18px; color: var(--l9-text); }
.cl-mw li { margin: 0 0 6px; }
.cl-mw .cl-actions { margin-top: auto; padding-top: 8px; }
.cl-mw--tint { background: var(--l9-bg-soft); border-color: transparent; }
.cl-alert-form { display: grid; gap: 10px; margin-top: 10px; }
.cl-alert-form .cl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl-alert-form .cl-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--l9-text-muted); }
.cl-alert-form .cl-consent input { margin-top: 3px; }
.cl-topics { display: grid; gap: 6px; }
.cl-topics label { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--l9-text); }
.cl-topics input { margin-top: 3px; }

/* The platform features with sales lines, and the funnel */
.cl-features { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--l9-border); }
.cl-features li { display: grid; grid-template-columns: 64px 1.1fr 1.4fr; gap: 24px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--l9-border); }
.cl-features .cl-f-n { font-family: var(--cl-font-wordmark); font-size: 1.6rem; font-weight: 650; letter-spacing: -.04em; color: var(--l9-accent); line-height: 1; }
.cl-features h3 { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.cl-features p { margin: 0; color: var(--l9-text-muted); font-size: 1.02rem; line-height: 1.55; }
.cl-features .cl-f-media { display: none; }
.cl-funnel { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cl-funnel li { position: relative; background: var(--cl-ink); color: #fff; border-radius: 10px; padding: 16px 14px; font-family: var(--cl-font-wordmark); font-weight: 650; font-size: 1.15rem; letter-spacing: -.02em; text-align: center; }
.cl-funnel li + li::before { content: '\2192'; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); color: var(--l9-accent); background: var(--l9-bg); border-radius: 50%; width: 20px; height: 20px; line-height: 20px; font-size: .8rem; }
.cl-funnel li:nth-child(3) { background: var(--l9-accent); }
.cl-funnel-note { margin: 12px 0 0; font-size: .9rem; color: var(--l9-text-muted); }

@media (max-width: 991.98px) {
    .cl-land { grid-template-columns: 1fr; gap: 28px; }
    .cl-wall-head { grid-template-columns: 1fr; gap: 12px; }
    .cq3d { height: 480px; }
    .cl-why, .cl-meanwhile { grid-template-columns: 1fr; }
    .cl-rules-mini { grid-template-columns: 1fr; }
    .cl-features li { grid-template-columns: 48px 1fr; }
    .cl-features li p { grid-column: 2; }
    .cl-funnel { grid-template-columns: repeat(2, 1fr); }
    .cl-funnel li + li::before { content: none; }
}
@media (max-width: 575.98px) {
    .cq3d { height: 420px; border-radius: 12px; }
    .cq3d-hud { padding: 12px; }
    .cq3d-hud-l span { display: none; }
    .cq3d-ticker { max-width: 88%; }
    .cl-alert-form .cl-field-row { grid-template-columns: 1fr; }
    .cl-funnel { grid-template-columns: 1fr; }
}

/* ---------- 2026-09-25: the hero as the challenge, with the VSL slot ---------- */
.cl-land { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; }
.cl-land-side:not(:has(*)) { display: none; }
.cl-land:has(.cl-land-side:not(:has(*))) { grid-template-columns: 1fr; }
.cl-land:has(.cl-land-side:not(:has(*))) .cl-land-copy { max-width: 820px; }
.cl-land .cl-eyebrow { display: inline-block; background: var(--l9-accent); color: #fff; border-radius: 999px; padding: 8px 14px; letter-spacing: .14em; margin-bottom: 22px; }
.cl-land .cl-h1 { font-size: clamp(2.8rem, 5.8vw, 5rem); max-width: 820px; letter-spacing: -.05em; }
.cl-land .cl-sub { font-size: clamp(1.2rem, 2vw, 1.55rem); max-width: 700px; margin-bottom: 26px; }
.cl-actions--hero { align-items: center; gap: 22px; margin-bottom: 22px; }
.cl-cta-big.l9-btn-primary { min-height: 60px; padding: 0 30px; font-size: 1.1rem; font-weight: 650; border-radius: 12px; box-shadow: 0 10px 28px rgba(49,85,231,.28); }
.cl-textlink { font-weight: 600; color: var(--l9-text); text-decoration: underline; text-underline-offset: 5px; }
.cl-land-copy .cl-spots { display: inline-grid; gap: 8px; padding: 14px 18px; border-radius: 12px; }
.cl-land-copy .cl-spots-row b { font-size: 1.5rem; }
.cl-vsl { position: relative; width: 100%; max-width: 380px; margin: 0 0 0 auto; border-radius: 18px; overflow: hidden; background: var(--cl-ink); box-shadow: var(--l9-shadow-strong); }
.cl-vsl iframe, .cl-vsl video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
@media (max-width: 991.98px) {
    .cl-land { grid-template-columns: 1fr; }
    .cl-vsl { margin: 0 auto; }
}
/* The hero is one column until the VSL exists; the [vsl] token brings the second column with it. */
.cl-land { grid-template-columns: 1fr; }
.cl-land:has(.cl-land-side) { grid-template-columns: 1.05fr .95fr; }

/* ---------- 2026-09-25: the queue as a tile stack, the two-step join, dialogs, the video strip ---------- */
.cl-section--queue { padding: 40px 0 56px; }
.cl-section-head--tight { margin-bottom: 18px; }
.cl-section-head--tight .cl-h2 { margin-bottom: 4px; }

.qs { position: relative; }
.qs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.qs-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.qs-stats span { background: var(--cl-ink); color: #fff; border-radius: 999px; padding: 7px 12px; font-size: .82rem; font-weight: 500; }
.qs-stats span b { font-family: var(--cl-font-wordmark); font-size: 1rem; margin-right: 4px; }
.qs-how { background: var(--l9-surface); border: 1px solid var(--l9-border); color: var(--l9-text); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.qs-how:hover { border-color: var(--l9-text); }

.qs-stack { list-style: none; margin: 0; padding: 6px 0 0; display: grid; gap: 12px; }
.qs-tile { position: relative; display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; background: var(--l9-surface); border: 1px solid var(--l9-border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(32,35,52,.07); transform: rotate(var(--r, 0deg)); animation: qsFloat 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.9s); transform-origin: 50% 50%; }
@keyframes qsFloat { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-4px) rotate(calc(var(--r, 0deg) * -0.6)); } }
.qs-n { font-family: var(--cl-font-wordmark); font-weight: 650; font-size: 1.15rem; letter-spacing: -.03em; color: var(--l9-text-muted); }
.qs-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qs-name { font-family: var(--cl-font-wordmark); font-weight: 650; font-size: 1.35rem; letter-spacing: -.03em; color: var(--l9-text); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .8rem; color: var(--l9-text-muted); }
.qs-meta span { display: inline-flex; align-items: center; gap: 6px; }
.qs-meta span + span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--l9-border); }
.qs-state { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--l9-accent); white-space: nowrap; text-align: right; }
.qs-tile.is-done { background: var(--l9-bg-soft); border-color: transparent; }
.qs-tile.is-done .qs-state { color: var(--l9-success); }
.qs-tile.is-live { background: var(--l9-accent); border-color: var(--l9-accent); color: #fff; }
.qs-tile.is-live .qs-n, .qs-tile.is-live .qs-name, .qs-tile.is-live .qs-state, .qs-tile.is-live .qs-meta { color: #fff; }
.qs-tile.is-ready .qs-state { color: var(--l9-text); }
.qs-tile.is-more { background: transparent; border-style: dashed; box-shadow: none; animation: none; }
.qs-tile.is-more .qs-state a { color: var(--l9-accent); text-decoration: underline; text-underline-offset: 3px; }

/* The empty tile: yours to fill in. Glows, and the nickname field carries a blinking cursor until you type. */
.qs-tile.is-join { background: var(--cl-ink); color: #fff; border: 2px dashed #9FB2FF; grid-template-columns: 64px 1fr; box-shadow: 0 0 0 6px rgba(49,85,231,.14), 0 16px 44px rgba(49,85,231,.35); animation: qsGlow 2.6s ease-in-out infinite; }
@keyframes qsGlow { 0%, 100% { box-shadow: 0 0 0 6px rgba(49,85,231,.14), 0 16px 44px rgba(49,85,231,.30); } 50% { box-shadow: 0 0 0 10px rgba(49,85,231,.22), 0 20px 52px rgba(49,85,231,.48); } }
.qs-tile.is-join .qs-n { color: #9FB2FF; }
.qs-join-row { position: relative; display: flex; align-items: center; }
.qs-in { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.28); color: #fff; font: inherit; padding: 8px 0; outline: none; }
.qs-in::placeholder { color: #8A93B3; }
.qs-in:focus { border-bottom-color: #fff; }
.qs-in--nick { font-family: var(--cl-font-wordmark); font-weight: 650; font-size: 1.35rem; letter-spacing: -.03em; }
.qs-cursor { position: absolute; left: 0; top: 10px; width: 2px; height: 1.5em; background: #fff; animation: qsBlink 1s steps(1) infinite; pointer-events: none; }
@keyframes qsBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.qs-join-row:focus-within .qs-cursor, .qs-in--nick:not(:placeholder-shown) ~ .qs-cursor { display: none; }
.qs-join-note { font-size: .78rem; color: #B9BFD4; margin-top: 4px; }
.qs-join-status { font-size: .85rem; min-height: 1.2em; }
.qs-join-status.is-error { color: #FFB4A8; }
.qs-join-status.is-ok { color: #7FE0A8; }
.qs-join-btn { grid-column: 1 / -1; justify-self: start; background: #fff; color: var(--cl-ink); border: 0; border-radius: 999px; padding: 14px 22px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 24px rgba(255,255,255,.18); margin-top: 6px; }
.qs-join-btn:hover { background: #E4E7F2; }
.qs-join-btn:disabled { opacity: .6; cursor: default; }
.qs-tile.is-mine { border: 2px solid var(--l9-accent); background: #fff; box-shadow: 0 0 0 6px rgba(49,85,231,.14); }

/* Sticky join button */
.qs-sticky { position: fixed; left: 50%; bottom: 18px; z-index: 1200; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; background: var(--l9-accent); color: #fff; border-radius: 999px; padding: 15px 24px; font-weight: 700; box-shadow: 0 12px 34px rgba(49,85,231,.45); white-space: nowrap; }
.qs-sticky.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.qs-sticky:hover { color: #fff; background: var(--l9-accent-hover); }

/* Dialogs */
dialog.qs-dialog { border: 0; border-radius: 18px; padding: 0; max-width: 620px; width: calc(100% - 28px); background: var(--l9-surface); color: var(--l9-text); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
dialog.qs-dialog::backdrop { background: rgba(32,35,52,.62); backdrop-filter: blur(3px); }
.qs-dialog-body { padding: 26px 26px 24px; display: grid; gap: 14px; max-height: min(86vh, 900px); overflow: auto; }
.qs-dialog-body h3 { margin: 0; font-size: 1.4rem; letter-spacing: -.02em; }
.qs-dialog-body p { margin: 0; color: var(--l9-text-muted); }
.qs-dialog-body .cl-h3 { margin-top: 10px; }
.qs-dialog-close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--l9-border); background: var(--l9-surface); color: var(--l9-text); font: inherit; font-size: 1.1rem; cursor: pointer; }
.qs-preview { background: var(--cl-ink); border-radius: 12px; padding: 16px 18px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.qs-preview .qs-n { color: #9FB2FF; }
.qs-preview .qs-name { color: #fff; }
.qs-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-pills label { cursor: pointer; }
.qs-pills input { position: absolute; opacity: 0; width: 0; height: 0; }
.qs-pills span { display: inline-block; border: 1px solid var(--l9-border); border-radius: 999px; padding: 8px 13px; font-size: .9rem; color: var(--l9-text); background: var(--l9-surface); }
.qs-pills input:checked + span { background: var(--cl-ink); color: #fff; border-color: var(--cl-ink); }
.qs-pills input:focus-visible + span { outline: 3px solid var(--l9-accent); outline-offset: 2px; }
.qs-pills--font span { font-size: 1rem; }
.qs-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.qs-swatches label { cursor: pointer; }
.qs-swatches input { position: absolute; opacity: 0; width: 0; height: 0; }
.qs-swatches span { display: block; width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--l9-border); }
.qs-swatches input:checked + span { border-color: #fff; box-shadow: 0 0 0 2px var(--l9-text); }
.qs-field { display: grid; gap: 6px; }
.qs-field label { font-size: 13px; font-weight: 600; }
.qs-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qs-rules { display: grid; gap: 12px; }
.qs-rules li { list-style: none; background: var(--l9-bg-soft); border-radius: 10px; padding: 12px 14px; }
.qs-rules b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--l9-accent); margin-bottom: 3px; }

/* The video strip (the platform gallery, shown as cards; a card opens the player dialog) */
.cl-vstrip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; -webkit-overflow-scrolling: touch; }
.cl-vcard { position: relative; flex: 0 0 auto; width: 210px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--cl-ink); color: #fff; scroll-snap-align: start; display: flex; align-items: flex-end; box-shadow: var(--l9-shadow-soft); }
.cl-vstrip--wide .cl-vcard { width: 300px; aspect-ratio: 16 / 9; }
.cl-vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.cl-vplay { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255,255,255,.92); }
.cl-vplay::after { content: ''; position: absolute; left: 21px; top: 16px; border-left: 16px solid var(--cl-ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.cl-vcap { position: relative; padding: 12px; font-size: .88rem; font-weight: 600; background: linear-gradient(to top, rgba(32,35,52,.9), rgba(32,35,52,0)); width: 100%; }
.cl-vframe { position: relative; width: 100%; background: #000; }
.cl-vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
dialog.qs-dialog--video { max-width: 900px; background: #000; }
dialog.qs-dialog--video .qs-dialog-close { background: #fff; }

@media (max-width: 575.98px) {
    .cl-section--queue { padding: 28px 0 40px; }
    .qs-tile { grid-template-columns: 52px 1fr; padding: 14px; gap: 10px; }
    .qs-state { grid-column: 2; text-align: left; }
    .qs-name { font-size: 1.15rem; }
    .qs-tile.is-join { grid-template-columns: 52px 1fr; }
    .qs-field-row { grid-template-columns: 1fr; }
    .qs-dialog-body { padding: 20px 18px; }
    .cl-vcard { width: 160px; }
    .cl-section { padding: 40px 0; }
    .cl-section-head { margin-bottom: 22px; }
    .cl-land .cl-h1 { font-size: 2.5rem; }
}
/* Video cards inside CMS prose: keep the caption white (the prose link colour rule would turn it cobalt). */
.l9-cc-body a.cl-vcard, .l9-cc-body a.cl-vcard:hover, .cl-vcard, .cl-vcap { color: #fff; }

/* The SMS consent row inside the customise dialog. */
.qs-dialog-body .cl-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--l9-text-muted); cursor: pointer; }
.qs-dialog-body .cl-consent input { margin-top: 3px; }

/* ---------- 2026-09-25 (round 5): the L9 blocks, reused. Hero panel, events rail, gallery strip, inline chat; the queue as cards ---------- */
/* Hero panel (Controls/layout_heropanel.ascx, the L9 homepage hero): flush under the bar, the video full-bleed, the
   copy on a dark ink wash. The eyebrow goes light cobalt so it reads on footage; the title takes the site's heading face. */
.hero-panel-shell { height: 66vh; min-height: 500px; background: var(--cl-ink); }
.hero-panel-inner { max-width: 760px; }
.hero-panel-inner .l9-eyebrow { color: #9DB0FF; font-weight: 600; letter-spacing: .14em; font-size: 12px; }
.hero-panel-title { font-family: var(--l9-font-heading); font-weight: 550; letter-spacing: -.045em; line-height: 1.02; font-size: clamp(2.3rem, 5.2vw, 4.2rem); }
.hero-panel-subtitle { color: rgba(255,255,255,.84); max-width: 580px; font-size: 1.12rem; line-height: 1.45; }
.hero-panel-actions .l9-btn-primary, .hero-panel-actions .l9-btn-secondary { min-height: 52px; padding: 0 24px; font-size: 15px; font-weight: 600; }
.hero-panel-overlay { background: linear-gradient(105deg, rgba(20,22,36,.92) 0%, rgba(20,22,36,.66) 42%, rgba(20,22,36,.30) 100%), linear-gradient(to bottom, transparent 55%, rgba(20,22,36,.88) 100%); }
@media (max-width: 767.98px) { .hero-panel-shell { height: auto; min-height: 0; padding: 88px 0 40px; } .hero-panel-title { font-size: 2.2rem; } .hero-panel-subtitle { font-size: 1rem; } }

/* Zones: every homepage section is its own band with a header row (eyebrow + heading + a hint on the right), so
   the eye can tell where one thing ends and the next begins (Terence 2026-09-25: "very little separation"). */
.cl-zone-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 14px; }
.cl-zone-head .cl-eyebrow { margin-bottom: 8px; }
.cl-zone-head .cl-h2 { margin-bottom: 0; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.cl-zone-head .hint { font-size: 12px; color: var(--l9-text-muted); white-space: nowrap; padding-bottom: 6px; }
.cl-zone-sub { color: var(--l9-text-muted); margin: 0 0 24px; max-width: 640px; font-size: 1.05rem; line-height: 1.5; }
.cl-section--band .cl-zone-sub { color: #C6CADA; }
.cl-section { padding: 64px 0; }
.cl-section + .cl-section { border-top: 1px solid #D9DEEE; }

/* The queue as cards: a soft band with a dot grid, white cards with a hard edge and a lifted shadow, the position as a
   round badge, the state as a chip. The oscillation is gone; the tilt stays faint so the stack still feels hand-placed. */
.cl-section--queue { background-color: var(--l9-bg-soft); background-image: radial-gradient(rgba(49,85,231,.18) 1px, transparent 1.2px); background-size: 18px 18px; padding: 56px 0 72px; }
.qs-head { margin-bottom: 20px; }
.qs-stats span { background: #fff; color: var(--l9-text); border: 1px solid #D5DAEA; box-shadow: 0 4px 12px rgba(32,35,52,.06); }
.qs-stats span b { color: var(--l9-accent); }
.qs-how { background: var(--cl-ink); color: #fff; border-color: var(--cl-ink); }
.qs-how:hover { background: #2C3049; border-color: #2C3049; }
.qs-stack { gap: 14px; }
.qs-tile { grid-template-columns: 52px 1fr auto; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid #D5DAEA; border-radius: 18px; box-shadow: 0 1px 0 rgba(32,35,52,.05), 0 16px 36px rgba(32,35,52,.12); animation: none; }
.qs-tile:hover { border-color: #B9C3EA; }
.qs-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--l9-bg-soft); border: 1px solid #D5DAEA; color: var(--l9-text); font-size: 1rem; }
.qs-name { font-size: 1.45rem; }
.qs-meta { font-size: .84rem; }
.qs-state { padding: 6px 10px; border-radius: 999px; background: var(--l9-bg-soft); border: 1px solid #D5DAEA; color: var(--l9-text); font-size: 10.5px; }
.qs-tile.is-done { background: #fff; border-color: #D5DAEA; }
.qs-tile.is-done .qs-state { background: #E6F6EC; border-color: #BFE7CE; color: #1E7A44; }
.qs-tile.is-live .qs-n { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: #fff; }
.qs-tile.is-live .qs-state { background: #fff; border-color: #fff; color: var(--l9-accent); }
.qs-tile.is-ready .qs-state { background: #FFF4D6; border-color: #F3DDA0; color: #8A5B00; }
.qs-tile.is-more { background: transparent; border: 1px dashed #B9C3EA; box-shadow: none; }
.qs-tile.is-more .qs-n { background: transparent; border-style: dashed; }
.qs-tile.is-join { grid-template-columns: 52px 1fr; border: 2px dashed #9FB2FF; }
.qs-tile.is-join .qs-n { background: rgba(255,255,255,.08); border-color: rgba(159,178,255,.5); color: #9FB2FF; }
.qs-tile.is-mine { border: 2px solid var(--l9-accent); }
.qs-tile.is-mine .qs-state { background: var(--l9-accent); border-color: var(--l9-accent); color: #fff; }
@media (max-width: 560px) { .qs-tile { grid-template-columns: 40px 1fr; padding: 14px 16px; } .qs-n { width: 36px; height: 36px; font-size: .9rem; } .qs-state { grid-column: 2; justify-self: start; } .qs-tile.is-join { grid-template-columns: 40px 1fr; } }

/* The events rail (copied from L9's Controls/ctrl_season_map.ascx, 2026-09-25): a horizontal strip of event cards with
   the gallery control's arrow pattern. Same class names, so l9-rail.js drives it unchanged. Recoloured to the page. */
.l9-smap { --sm-dim: var(--l9-text-muted); --sm-bg: var(--l9-bg); margin: 0 0 8px; }
.cl-section--tint .l9-smap { --sm-bg: var(--l9-bg-soft); }
.l9-sm-rail { margin: 0; }
.l9-sm-railhdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.l9-sm-railhdr .t { font-family: var(--l9-font-heading); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--l9-accent); font-weight: 600; }
.l9-sm-railhdr .h { font-size: 12px; color: var(--sm-dim); }
.l9-sm-railwrap { position: relative; }
.l9-sm-scroller { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.l9-sm-scroller::-webkit-scrollbar { display: none; }
.l9-sm-scroller > * { scroll-snap-align: start; flex: 0 0 auto; }
.l9-sm-arrow { display: none; position: absolute; top: 0; bottom: 12px; width: 64px; align-items: center; justify-content: center; border: none; cursor: pointer; z-index: 10; padding: 0; background: transparent; }
.l9-sm-arrow.is-visible { display: flex; }
.l9-sm-arrow-left { left: 0; background: linear-gradient(to right, var(--sm-bg) 0%, transparent 100%); }
.l9-sm-arrow-right { right: 0; background: linear-gradient(to left, var(--sm-bg) 0%, transparent 100%); }
.l9-sm-arrow-icon { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #D5DAEA; box-shadow: 0 6px 18px rgba(32,35,52,.16); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--l9-text); line-height: 1; padding-bottom: 2px; transition: background .15s, border-color .15s; }
.l9-sm-arrow-left .l9-sm-arrow-icon { padding-right: 3px; }
.l9-sm-arrow-right .l9-sm-arrow-icon { padding-left: 3px; }
.l9-sm-arrow:hover .l9-sm-arrow-icon { border-color: var(--l9-accent); color: var(--l9-accent); }
@media (hover: none) and (pointer: coarse) { .l9-sm-arrow { display: none !important; } }
.l9-sm-ec { width: 240px; background: #fff; border: 1px solid #D5DAEA; border-radius: 16px; overflow: hidden; text-align: left; color: var(--l9-text); text-decoration: none; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 10px 26px rgba(32,35,52,.10); }
.l9-sm-ecart { position: relative; display: block; aspect-ratio: 1 / 1; background-color: var(--cl-ink); background-size: contain; background-position: center; background-repeat: no-repeat; }
.l9-sm-ecart .l9-sm-chip { position: absolute; left: 10px; top: 10px; }
.l9-sm-ecbody { padding: 12px 14px 14px; display: grid; gap: 4px; }
.l9-cc-body .l9-sm-ect, .l9-sm-ect { display: block; color: var(--l9-text); text-decoration: none; font-family: var(--l9-font-heading); font-size: 15px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.l9-sm-ecm { font-size: 12px; color: var(--l9-text-muted); }
.l9-cc-body .l9-sm-ecreg, .l9-sm-ecreg { display: block; margin-top: 10px; text-align: center; font-family: var(--l9-font-heading); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 11px 10px; border-radius: 10px; background: var(--l9-accent); color: #fff; align-self: end; text-decoration: none; }
.l9-cc-body .l9-sm-ecreg:hover, .l9-sm-ecreg:hover { background: var(--l9-accent-hover); color: #fff; }
.l9-sm-chip { font-family: var(--l9-font-heading); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 7px; background: rgba(32,35,52,.74); color: #fff; border: 1px solid rgba(255,255,255,.18); font-weight: 600; white-space: nowrap; }
.l9-sm-chip.gold { background: var(--l9-accent); border-color: var(--l9-accent); color: #fff; }
.l9-sm-chip.live { background: #E04E6F; color: #fff; border-color: #E04E6F; }
.l9-sm-chip.dim { background: transparent; color: var(--sm-dim); border-color: var(--l9-border); }
.l9-sm-empty { padding: 18px; border: 1px dashed #B9C3EA; border-radius: 14px; color: var(--l9-text-muted); font-size: 14px; }
@media (max-width: 560px) { .l9-sm-ec { width: 200px; } }

/* Meanwhile, under the rail: the alert form and the short course as two cards. */
.cl-meanwhile--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
@media (max-width: 860px) { .cl-meanwhile--2 { grid-template-columns: 1fr; } }

/* The video strip (Controls/ctrl_gallery.ascx, the same control behind "New to L9?"): its cards on the light page. */
.l9-cc-body .l9-gallery { margin: 0; }
.l9-gallery-arrow-left, .l9-gallery-arrow-right { background: transparent; }
.l9-cc-body .l9-gallery a { color: inherit; }

/* The inline chat (Controls/ctrl_webchat.ascx, the same control L9's homepage embeds): recoloured to the Clusta
   palette. An ink card with cobalt accents, so it sits on the light page as one clear zone. */
#askbot .l9c.inline, .l9c { background: var(--cl-ink); border: 1px solid #2C3049; border-radius: 18px; font-family: var(--l9-font-body); color: #E9EBF3; }
.l9c-head, .l9c-foot { background: #1A1D2E; border-color: #2C3049; }
.l9c-av { background: var(--l9-accent); border-color: var(--l9-accent); color: #fff; }
.l9c-name { color: #fff; }
.l9c-name .ai { border-color: #3A3F5C; color: #A6ABC4; }
.l9c-sub { color: #A6ABC4; }
.l9c-msg.bot { background: #2A2E44; border-color: #353A55; color: #E9EBF3; }
.l9c-msg.me { background: var(--l9-accent); color: #fff; }
.l9c-msg.sys { color: #A6ABC4; }
.l9c-cc-body .l9c-msg a, .l9-cc-body .l9c-msg a, .l9c-msg a { color: #9DB0FF; }
.l9c-q { border-color: #9DB0FF; color: #9DB0FF; }
.l9c-q:hover { background: var(--l9-accent); border-color: var(--l9-accent); color: #fff; }
.l9-cc-body .l9c-cta, .l9c-cta { background: var(--l9-accent); color: #fff; }
.l9c-foot button { background: var(--l9-accent); color: #fff; }
.l9c-foot input { background: #12141F; border-color: #2C3049; color: #fff; }
.l9c-foot input::placeholder { color: #7C829E; }
.l9c-typing i { background: #A6ABC4; }
.l9c-media .cap { background: #2A2E44; color: #A6ABC4; }

/* Round 5 fixes (2026-09-25): the control stylesheets sit inline in the body and the CMS prose link rule sits in the
   page head, both after this file, so these overrides carry the specificity to win: the hero shell, the rail root,
   the chat's id. */
.hero-panel-shell .hero-panel-actions .l9-btn-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.hero-panel-shell .hero-panel-actions .l9-btn-secondary:hover, .hero-panel-shell .hero-panel-actions .l9-btn-secondary:focus { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.l9-cc-body .l9-smap .l9-sm-ect { color: var(--l9-text); }
.l9-cc-body .l9-smap .l9-sm-ecreg { color: #fff; }
.l9-cc-body .l9-smap .l9-sm-ecreg:hover { color: #fff; }
#qsSticky, #qsSticky:hover { color: #fff; }
.l9-cc-body .qs-tile.is-more .qs-state a { color: var(--l9-accent); }
#l9c.l9c, #askbot #l9c.l9c.inline { background: var(--cl-ink); border: 1px solid #2C3049; border-radius: 18px; font-family: var(--l9-font-body); color: #E9EBF3; }
#l9c .l9c-head, #l9c .l9c-foot { background: #1A1D2E; border-color: #2C3049; }
#l9c .l9c-av { background: var(--l9-accent); border-color: var(--l9-accent); color: #fff; }
#l9c .l9c-name { color: #fff; }
#l9c .l9c-name .ai { border-color: #3A3F5C; color: #A6ABC4; }
#l9c .l9c-sub { color: #A6ABC4; }
#l9c .l9c-msg.bot { background: #2A2E44; border-color: #353A55; color: #E9EBF3; }
#l9c .l9c-msg.me { background: var(--l9-accent); color: #fff; }
#l9c .l9c-msg.sys { color: #A6ABC4; }
#l9c .l9c-msg a { color: #9DB0FF; }
#l9c .l9c-q { border-color: #9DB0FF; color: #9DB0FF; }
#l9c .l9c-q:hover { background: var(--l9-accent); border-color: var(--l9-accent); color: #fff; }
#l9c .l9c-cta { background: var(--l9-accent); color: #fff; }
#l9c .l9c-foot button { background: var(--l9-accent); color: #fff; }
#l9c .l9c-foot input { background: #12141F; border-color: #2C3049; color: #fff; }
#l9c .l9c-foot input::placeholder { color: #7C829E; }
#l9c .l9c-typing i { background: #A6ABC4; }
#l9c .l9c-media .cap { background: #2A2E44; color: #A6ABC4; }

/* Meanwhile with one card left (the short course): a single column, no wider than the copy needs. */
.cl-meanwhile--1 { grid-template-columns: 1fr; max-width: 720px; margin-top: 26px; }

/* The Clusta 24 tag pills off the dark band (2026-09-25 trims): white pills with a hard edge on the light sections. */
.cl-section:not(.cl-section--band) .cl-tags li { background: #fff; border: 1px solid #D5DAEA; color: var(--l9-text); }

/* ---------- 2026-09-25 (round 6): the queue as cards on a table ----------
   Terence: "Imagine cards on a table and one is empty ready to fill in. They all look quite identical except for the one
   that you are about to fill in." One card for every studio: white card stock with a crisp ink edge, the number badge and
   the state chip on the top row, the nickname and its line at the bottom. The empty card is that same card, blank: a
   dashed cobalt edge, a soft glow, the nickname and email written straight onto it. Scoped under .qs-stack so it outranks
   every earlier tile rule, the phone rules included. */
.qs-stack { gap: 20px; padding: 10px 4px 4px; }
.qs-stack .qs-tile {
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n . state" "body body body";
    align-content: space-between; align-items: center; row-gap: 22px; column-gap: 12px;
    min-height: 200px; padding: 20px 22px 22px;
    background: #fff; color: var(--l9-text);
    border: 1.5px solid var(--cl-ink); border-radius: 18px;
    box-shadow: 0 2px 0 rgba(32,35,52,.10), 0 16px 32px rgba(32,35,52,.14);
    transform: rotate(var(--r, 0deg)); animation: none;
}
.qs-stack .qs-tile > .qs-n { grid-area: n; }
.qs-stack .qs-tile > .qs-body { grid-area: body; align-self: end; gap: 8px; min-width: 0; }
.qs-stack .qs-tile > .qs-state { grid-area: state; justify-self: end; text-align: right; }
.qs-stack .qs-n, .qs-preview .qs-n { display: inline-flex; align-items: center; width: auto; height: auto; padding: 5px 11px; border-radius: 999px; background: var(--l9-bg-soft); border: 1.5px solid var(--cl-ink); color: var(--cl-ink); font-family: var(--cl-font-wordmark); font-weight: 650; font-size: .95rem; letter-spacing: -.02em; line-height: 1.2; }
.qs-stack .qs-name, .qs-preview .qs-name { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.08; color: var(--l9-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-stack .qs-meta { font-size: .88rem; color: var(--l9-text-muted); }
.qs-stack .qs-state { padding: 6px 11px; border-radius: 999px; background: #fff; border: 1.5px solid #C9CFE3; color: var(--l9-text); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
/* States: the same card stock; only the chip changes (and the edge, for the studio being transformed right now). */
.qs-stack .qs-tile.is-done { background: #fff; border-color: var(--cl-ink); }
.qs-stack .qs-tile.is-done .qs-state { background: #E6F6EC; border-color: #9ED3B3; color: #1E7A44; }
.qs-stack .qs-tile.is-ready .qs-state { background: #FFF4D6; border-color: #EBCB7A; color: #7A5000; }
.qs-stack .qs-tile.is-live { background: #fff; border: 2px solid var(--l9-accent); color: var(--l9-text); }
.qs-stack .qs-tile.is-live .qs-n { color: var(--cl-ink); }
.qs-stack .qs-tile.is-live .qs-name { color: var(--l9-text); }
.qs-stack .qs-tile.is-live .qs-meta { color: var(--l9-text-muted); }
.qs-stack .qs-tile.is-live .qs-state { background: var(--l9-accent); border-color: var(--l9-accent); color: #fff; }
/* "N more studios": the rest of the pile, a low dashed row rather than another full card. */
.qs-stack .qs-tile.is-more { min-height: 0; grid-template-areas: "n body state"; background: transparent; border: 1.5px dashed #AEB6D3; box-shadow: none; }
.qs-stack .qs-tile.is-more > .qs-body { align-self: center; }
.qs-stack .qs-tile.is-more .qs-name { font-size: 1.1rem; }

/* The empty card */
.qs-stack .qs-tile.is-join { background: #fff; color: var(--l9-text); border: 2px dashed var(--l9-accent); transform: none; animation: qsCardGlow 2.6s ease-in-out infinite; }
@keyframes qsCardGlow { 0%, 100% { box-shadow: 0 0 0 5px rgba(49,85,231,.10), 0 16px 36px rgba(49,85,231,.18); } 50% { box-shadow: 0 0 0 9px rgba(49,85,231,.16), 0 20px 46px rgba(49,85,231,.30); } }
.qs-stack .qs-tile.is-join .qs-n { background: #fff; border: 1.5px dashed var(--l9-accent); color: var(--l9-accent); }
.qs-stack .qs-tile.is-join .qs-state { background: #fff; border: 1.5px dashed var(--l9-accent); color: var(--l9-accent); }
.qs-stack .qs-tile.is-join .qs-in { background: transparent; color: var(--l9-text); border: 0; border-bottom: 1.5px dashed #B9C3EA; border-radius: 0; padding: 6px 0; }
.qs-stack .qs-tile.is-join .qs-in::placeholder { color: #9AA1BA; }
.qs-stack .qs-tile.is-join .qs-in:focus { border-bottom: 1.5px solid var(--l9-accent); outline: none; }
.qs-stack .qs-tile.is-join .qs-in--nick { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.08; font-family: var(--cl-font-wordmark); font-weight: 650; letter-spacing: -.03em; }
.qs-stack .qs-tile.is-join .qs-cursor { background: var(--l9-accent); top: 9px; height: 1.8rem; }
.qs-join-line { display: flex; align-items: center; gap: 14px; }
.qs-join-line .qs-in { flex: 1 1 auto; min-width: 0; }
.qs-stack .qs-join-btn { grid-column: auto; justify-self: auto; flex: 0 0 auto; margin: 0; background: var(--l9-accent); color: #fff; border: 0; border-radius: 999px; padding: 12px 20px; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; box-shadow: 0 8px 20px rgba(49,85,231,.32); }
.qs-stack .qs-join-btn:hover { background: var(--l9-accent-hover); }
.qs-stack .qs-join-status { min-height: 0; }
.qs-stack .qs-join-status:empty { display: none; }
.qs-stack .qs-join-status.is-error { color: #B3261E; }
.qs-stack .qs-join-status.is-ok { color: #1E7A44; }
.qs .qs-join-note { display: block; text-align: center; margin: 16px auto 0; max-width: 520px; font-size: .8rem; color: var(--l9-text-muted); }

/* The empty card once it is yours: a studio card like the rest, with a cobalt edge and your chip. */
.qs-stack .qs-tile.is-mine { background: #fff; border: 2px solid var(--l9-accent); animation: none; box-shadow: 0 0 0 5px rgba(49,85,231,.12), 0 16px 32px rgba(32,35,52,.14); }
.qs-stack .qs-tile.is-mine .qs-n { border-color: var(--l9-accent); color: var(--l9-accent); background: #fff; }
.qs-stack .qs-tile.is-mine .qs-state { background: var(--l9-accent); border-color: var(--l9-accent); color: #fff; }

/* The customise dialog's preview is the same card. */
.qs-preview { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n ." "name name"; row-gap: 26px; align-content: space-between; min-height: 150px; padding: 18px 20px 20px; background: #fff; border: 1.5px solid var(--cl-ink); border-radius: 18px; box-shadow: 0 2px 0 rgba(32,35,52,.10), 0 12px 26px rgba(32,35,52,.12); }
.qs-preview .qs-n { grid-area: n; justify-self: start; }
.qs-preview .qs-n:empty { visibility: hidden; }
.qs-preview .qs-name { grid-area: name; }

@media (max-width: 560px) {
    .qs-stack .qs-tile { min-height: 238px; padding: 16px 16px 18px; row-gap: 18px; }
    .qs-stack .qs-tile.is-more { min-height: 0; }
    .qs-stack .qs-state { font-size: 10px; padding: 5px 9px; }
    .qs-join-line { flex-direction: column; align-items: stretch; gap: 14px; }
    .qs-stack .qs-join-btn { width: 100%; padding: 14px 20px; }
}