/* Requires clozr-marketing-tokens.css. All components use the cm-* namespace. */
.cm { margin: 0; color: rgb(var(--cm-ink)); background: rgb(var(--cm-paper)); font: 400 var(--cm-type-body)/var(--cm-leading-body) var(--cm-font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
.cm *, .cm *::before, .cm *::after { box-sizing: border-box; }
.cm :where(h1, h2, h3, p) { margin: 0; }
.cm :where(h1, h2, h3) { font-weight: 600; letter-spacing: var(--cm-tracking-heading); line-height: var(--cm-leading-heading); }
.cm a { color: inherit; text-decoration: none; }
.cm :where(button, input) { font: inherit; }
.cm button { cursor: pointer; }
.cm :focus-visible { outline: 3px solid rgb(var(--cm-focus)); outline-offset: 4px; }
.cm [hidden] { display: none !important; }
.cm [id] { scroll-margin-top: calc(var(--cm-header-height) + 2rem); }
.cm svg { flex-shrink: 0; }
.cm-container { width: 100%; max-width: var(--cm-container); margin-inline: auto; padding-inline: var(--cm-gutter); }
.cm-section { padding-block: var(--cm-section-space); }
.cm-section + .cm-section { border-top: 1px solid rgb(var(--cm-line)); }
.cm-display { font-size: var(--cm-type-display); letter-spacing: var(--cm-tracking-display); line-height: var(--cm-leading-display); font-weight: 600; }
.cm-heading { font-size: var(--cm-type-section); }
/* font-optical-sizing: none keeps the 'Inter Display' @font-face opsz (32) instead of letting the axis
 * follow the font size, so small titles get the display cut too. --cm-word-display is a per-face hook. */
.cm-display, .cm-heading, .cm-mega-title, .cm-mega-card strong { font-family: var(--cm-font-display); font-optical-sizing: none; word-spacing: var(--cm-word-display); }
.cm-lead { font-size: var(--cm-type-lead); line-height: 1.6; max-width: var(--cm-measure); }
.cm-eyebrow { font: 500 var(--cm-type-label)/1.5 var(--cm-font-mono); letter-spacing: var(--cm-tracking-label); text-transform: uppercase; color: rgb(var(--cm-ink-muted)); }
.cm-muted { color: rgb(var(--cm-ink-muted)); }
.cm-small { font-size: var(--cm-type-small); }
.cm-mono { font-family: var(--cm-font-mono); font-size: var(--cm-type-small); }
.cm-stack > * + * { margin-top: var(--cm-space-5); }
.cm-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-space-3); }
.cm-section-intro { display: flex; align-items: end; justify-content: space-between; gap: var(--cm-space-8); margin-bottom: var(--cm-space-10); }
.cm-section-intro p { max-width: 30rem; }
.cm-link { color: rgb(var(--cm-link)) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cm-space-2); min-height: var(--cm-control-height); padding: var(--cm-space-2) var(--cm-space-5); border: 1px solid transparent; border-radius: var(--cm-radius-control); background: rgb(var(--cm-ink)); color: rgb(var(--cm-white)) !important; font-size: var(--cm-type-ui); font-weight: 500; line-height: 1.3; transition: background var(--cm-time-hover), transform var(--cm-time-hover) var(--cm-ease-out); }
.cm-btn:hover { background: rgb(var(--cm-slate-700)); }
.cm-btn:active { transform: translateY(1px); }
.cm-btn--secondary { background: rgb(var(--cm-white)); color: rgb(var(--cm-ink)) !important; border-color: rgb(var(--cm-line-strong)); }
.cm-btn--secondary:hover { background: rgb(var(--cm-surface-soft)); }
.cm-btn--light { background: rgb(var(--cm-white)); color: rgb(var(--cm-sky-900)) !important; }
.cm-btn--light:hover { background: rgb(var(--cm-sky-100)); }
.cm-btn--glass { background: rgb(var(--cm-sky-900) / .28); border-color: rgb(var(--cm-white) / .7); }
.cm-btn--glass:hover { background: rgb(var(--cm-sky-900) / .5); }
.cm-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cm-badge { display: inline-flex; align-items: center; gap: var(--cm-space-2); padding: .25rem .625rem; border: 1px solid rgb(var(--cm-line)); border-radius: var(--cm-radius-pill); font-size: var(--cm-type-small); font-weight: 500; background: rgb(var(--cm-surface)); }
.cm-badge--success { color: rgb(var(--cm-success)); background: rgb(var(--cm-success-soft)); border-color: transparent; }
.cm-badge--warning { color: rgb(var(--cm-warning)); background: rgb(var(--cm-warning-soft)); border-color: transparent; }
.cm-badge--danger { color: rgb(var(--cm-danger)); background: rgb(var(--cm-danger-soft)); border-color: transparent; }
.cm-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cm-field { display: grid; gap: var(--cm-space-2); font-size: var(--cm-type-ui); font-weight: 500; }
.cm-input { width: 100%; min-height: var(--cm-control-height); border: 1px solid rgb(var(--cm-line-strong)); border-radius: var(--cm-radius-control); padding: var(--cm-space-2) var(--cm-space-3); background: rgb(var(--cm-surface)); color: rgb(var(--cm-ink)); }
.cm-input::placeholder { color: rgb(var(--cm-ink-muted)); }
.cm-card { padding: var(--cm-space-6); border: 1px solid rgb(var(--cm-line)); border-radius: var(--cm-radius-card); background: rgb(var(--cm-surface)); }
.cm-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cm-skip { position: fixed; top: -100px; left: 1rem; z-index: 100; padding: 1rem; background: white; }
.cm-skip:focus { top: 1rem; }

/* Navigation: a full-width panel, not a floating list of tiny links. */
.cm-header { position: sticky; top: 0; z-index: var(--cm-z-header); background: rgb(var(--cm-white) / .94); border-bottom: 1px solid rgb(var(--cm-line)); backdrop-filter: blur(16px); }
.cm-header-row { display: flex; align-items: center; gap: var(--cm-space-10); min-height: var(--cm-header-height); }
.cm-logo { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -.05em; }
.cm-logo svg { display: block; width: auto; height: var(--cm-logo-height, 1.75rem); fill: currentColor; } /* Inline Clozr mark + wordmark: ink on white, white on sky. */
.cm-logo-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: white; background: rgb(var(--cm-sky-700)); font-size: 19px; }
.cm-nav-pane { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-6); }
.cm-nav { display: flex; align-items: center; gap: var(--cm-space-1); }
.cm-nav-trigger, .cm-nav-link { display: flex; align-items: center; gap: var(--cm-space-2); min-height: var(--cm-control-height); border: 0; padding: var(--cm-space-2) var(--cm-space-3); color: rgb(var(--cm-ink-muted)); background: transparent; border-radius: var(--cm-radius-control); font-size: var(--cm-type-small); }
.cm-nav-trigger:hover, .cm-nav-trigger[aria-expanded="true"], .cm-nav-link:hover { background: rgb(var(--cm-surface-soft)); color: rgb(var(--cm-ink)); }
.cm-caret { transition: transform var(--cm-time-panel) var(--cm-ease-out); }
[aria-expanded="true"] > .cm-caret { transform: rotate(180deg); }
.cm-mega { position: absolute; z-index: var(--cm-z-menu); top: 100%; left: 0; right: 0; opacity: 0; visibility: hidden; pointer-events: none; background: rgb(var(--cm-surface)); box-shadow: var(--cm-shadow-menu); transition: opacity var(--cm-time-panel) ease-out, visibility var(--cm-time-panel); }
.cm-mega::before { content: ''; position: absolute; inset: -18px 0 auto; height: 18px; }
.cm-menu.is-open .cm-mega { opacity: 1; visibility: visible; pointer-events: auto; transition-property: opacity; }
.cm-mega-layout { display: grid; grid-template-columns: 280px 1fr; }
.cm-mega-intro { padding: var(--cm-space-8) var(--cm-space-8) var(--cm-space-8) 0; border-right: 1px solid rgb(var(--cm-line)); }
.cm-mega-title { font-size: 2.25rem; line-height: 1.05; }
.cm-mega-intro p { font-size: var(--cm-type-ui); color: rgb(var(--cm-ink-muted)); }
.cm-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-mega-card { display: flex; flex-direction: column; align-items: start; gap: var(--cm-space-3); padding: var(--cm-space-6); border-bottom: 1px solid rgb(var(--cm-line)); border-right: 1px solid rgb(var(--cm-line)); min-width: 0; opacity: 0; transform: translateY(6px); transition: opacity var(--cm-time-fade) ease-out, transform var(--cm-time-card) var(--cm-ease-out), background-color var(--cm-time-hover) ease-out; }
.cm-menu.is-open .cm-mega-card { opacity: 1; transform: translateY(0); transition-delay: calc(var(--cm-stagger-start) + var(--cm-order, 0) * var(--cm-stagger-step)), calc(var(--cm-stagger-start) + var(--cm-order, 0) * var(--cm-stagger-step)), 0ms; }
.cm-mega-card:hover, .cm-mega-card:focus-visible { background: rgb(var(--cm-surface-soft)); }
.cm-mega-card strong { font-size: var(--cm-type-title); font-weight: 600; letter-spacing: var(--cm-tracking-heading); }
.cm-mega-card p { font-size: var(--cm-type-ui); color: rgb(var(--cm-ink-muted)); }
.cm-mega-card > span:last-child { margin-top: auto; font-size: var(--cm-type-small); color: rgb(var(--cm-link)); }
.cm-mega-feature { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
.cm-mega-feature .cm-stack { display: grid; gap: var(--cm-space-2); }
.cm-mega-feature .cm-stack > * + * { margin-top: 0; }
.cm-flow { display: flex; align-items: center; gap: .5rem; font-size: var(--cm-type-small); white-space: nowrap; color: rgb(var(--cm-ink-muted)); }
.cm-flow span { padding: .4rem .65rem; border: 1px solid rgb(var(--cm-line)); border-radius: var(--cm-radius-pill); background: white; }
.cm-flow span:nth-of-type(2) { background: rgb(var(--cm-brand-soft)); color: rgb(var(--cm-link)); }
.cm-mega-footer { display: flex; align-items: center; justify-content: space-between; padding-block: var(--cm-space-4); font-size: var(--cm-type-small); }
.cm-mobile-toggle, .cm-mobile-bar { display: none; }

/* Original CSS atmosphere: no Warmbly imagery or branded assets. */
.cm-sky { position: relative; isolation: isolate; overflow: hidden; background: rgb(var(--cm-sky-700)); color: white; }
.cm-sky::before { content: ''; position: absolute; z-index: -2; inset: -20%; background: radial-gradient(ellipse at 72% 12%, rgb(var(--cm-sky-300) / .68), transparent 40%), radial-gradient(ellipse at 20% 70%, rgb(var(--cm-sky-500) / .6), transparent 55%), linear-gradient(130deg, rgb(var(--cm-sky-700)), rgb(var(--cm-sky-800))); animation: cm-sky-drift var(--cm-time-sky) ease-in-out infinite alternate; }
.cm-sky::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 80% 30%, rgb(var(--cm-white) / .13), transparent 50%); animation: cm-light var(--cm-time-light) ease-in-out infinite alternate; }
.cm-sky .cm-eyebrow { color: rgb(var(--cm-white) / .85); }
.cm-sky :focus-visible { outline-color: white; }
.cm-hero { padding-top: var(--cm-space-24); }
.cm-hero-copy { text-align: center; max-width: 65rem; margin: auto; }
.cm-hero-copy > * + * { margin-top: var(--cm-space-8); }
.cm-hero-copy .cm-lead { margin-inline: auto; }
.cm-hero-copy .cm-cluster { justify-content: center; }
.cm-hero-foot { display: flex; justify-content: space-between; gap: var(--cm-space-5); margin-top: var(--cm-space-16); padding-block: var(--cm-space-5); border-top: 1px solid rgb(var(--cm-white) / .25); font-size: var(--cm-type-small); }
.cm-feature { display: grid; grid-template-columns: .85fr 1.25fr; align-items: center; gap: var(--cm-space-16); }
.cm-feature > * { min-width: 0; }
.cm-feature-list { list-style: none; padding: 0; display: grid; gap: var(--cm-space-4); color: rgb(var(--cm-ink-secondary)); }
.cm-feature-list li { padding-left: 1rem; border-left: 2px solid rgb(var(--cm-brand)); }

/* Reusable product demonstration shell. Data stays in HTML; motion is progressive. */
.cm-frame { position: relative; border: 1px solid rgb(var(--cm-line)); border-radius: var(--cm-radius-frame); overflow: hidden; background: rgb(var(--cm-surface)); color: rgb(var(--cm-ink)); box-shadow: var(--cm-shadow-frame); }
.cm-frame-bar { display: flex; gap: .4rem; align-items: center; padding: var(--cm-space-3) var(--cm-space-5); background: rgb(var(--cm-surface-soft)); border-bottom: 1px solid rgb(var(--cm-line)); font-size: .6875rem; color: rgb(var(--cm-ink-muted)); }
.cm-frame-bar > i { width: 6px; height: 6px; background: rgb(var(--cm-line-strong)); border-radius: 50%; }
.cm-frame-bar > span { margin-left: auto; }
.cm-demo-stage { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); min-height: 365px; }
.cm-demo-sidebar { display: flex; flex-direction: column; gap: var(--cm-space-2); background: rgb(var(--cm-slate-900)); color: white; padding: var(--cm-space-5) var(--cm-space-3); font-size: .75rem; }
.cm-demo-sidebar > strong { font-size: 1.1rem; margin-bottom: var(--cm-space-6); }
.cm-demo-nav-item { padding: .45rem .65rem; border-radius: 5px; color: rgb(var(--cm-white) / .75); }
.cm-demo-nav-item.is-active { background: rgb(var(--cm-white) / .13); color: white; }
.cm-demo-sidebar > small { margin-top: auto; color: rgb(var(--cm-white) / .65); }
.cm-demo-main { min-width: 0; padding: var(--cm-space-6); }
.cm-demo-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--cm-space-3); margin-bottom: var(--cm-space-6); font-size: var(--cm-type-ui); }
.cm-demo-row { display: flex; align-items: center; gap: var(--cm-space-3); padding: var(--cm-space-4) 0; border-bottom: 1px solid rgb(var(--cm-line)); }
.cm-avatar { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgb(var(--cm-brand-soft)); color: rgb(var(--cm-link)); font-size: var(--cm-type-small); font-weight: 600; }
.cm-demo-row strong { display: block; font-size: var(--cm-type-ui); font-weight: 600; }
.cm-demo-row small { color: rgb(var(--cm-ink-muted)); font-size: .6875rem; }
.cm-demo-row > .cm-badge { margin-left: auto; }
.cm-demo-detail { margin-top: var(--cm-space-5); display: grid; gap: var(--cm-space-3); }
.cm-demo-note { min-height: 60px; padding: var(--cm-space-3); background: rgb(var(--cm-surface-soft)); border-radius: var(--cm-radius-control); font-size: var(--cm-type-small); }
.cm-demo-action { display: inline-flex; justify-content: center; width: fit-content; padding: .55rem .85rem; border-radius: 7px; font-size: var(--cm-type-small); background: rgb(var(--cm-brand-soft)); color: rgb(var(--cm-link)); }
.cm-demo-pointer { position: absolute; width: 19px; height: 25px; top: 0; left: 0; z-index: 2; pointer-events: none; opacity: 0; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .15)); transition: transform 700ms var(--cm-ease-out), opacity var(--cm-time-fade); }
.cm-demo.is-running .cm-demo-pointer { opacity: 1; }
.cm-demo-detail.is-changing { animation: cm-demo-enter 400ms var(--cm-ease-out); }
.cm-demo-controls { display: flex; align-items: center; gap: var(--cm-space-2); padding: var(--cm-space-3); border-top: 1px solid rgb(var(--cm-line)); background: rgb(var(--cm-surface-soft)); }
.cm-demo-step { min-height: 44px; min-width: 44px; padding: .5rem; background: transparent; border: 0; border-radius: 7px; color: rgb(var(--cm-ink-muted)); font-size: var(--cm-type-small); }
.cm-demo-step[aria-current="step"] { color: rgb(var(--cm-link)); background: rgb(var(--cm-brand-soft)); }
.cm-demo-pause { margin-left: auto; }
.cm-demo-caption { margin-top: var(--cm-space-4); color: rgb(var(--cm-ink-muted)); font-size: var(--cm-type-small); }

/* Catalog compositions, also available for public feature overview sections. */
.cm-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--cm-space-4); }
.cm-swatch { padding: var(--cm-space-3); border: 1px solid rgb(var(--cm-line)); border-radius: var(--cm-radius-card); }
.cm-swatch-color { height: 96px; background: var(--swatch); border-radius: 7px; margin-bottom: var(--cm-space-3); border: 1px solid rgb(var(--cm-ink) / .06); }
.cm-swatch strong { display: block; font-size: var(--cm-type-ui); font-weight: 500; }
.cm-swatch code { color: rgb(var(--cm-ink-muted)); font-size: .6875rem; }
.cm-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-8); }
.cm-spec-grid > * { min-width: 0; }
.cm-type-sample { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; gap: var(--cm-space-6); padding-block: var(--cm-space-6); border-bottom: 1px solid rgb(var(--cm-line)); }
.cm-type-sample .cm-display { font-size: clamp(2.75rem, 5vw, 4.25rem); }
.cm-spec-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--cm-type-ui); }
.cm-spec-table th, .cm-spec-table td { padding: var(--cm-space-4) var(--cm-space-2); border-bottom: 1px solid rgb(var(--cm-line)); vertical-align: top; }
.cm-spec-table th { color: rgb(var(--cm-ink-muted)); font-weight: 500; }
.cm-spec-table code { font-size: .75rem; overflow-wrap: anywhere; }
.cm-motion-sample { display: flex; align-items: center; gap: var(--cm-space-4); }
.cm-motion-track { flex: 1; height: 6px; background: rgb(var(--cm-brand-soft)); overflow: hidden; border-radius: 8px; }
.cm-motion-track span { display: block; width: 100%; height: 100%; background: rgb(var(--cm-brand)); transform: scaleX(1); transform-origin: left; }
.cm-motion-track.is-playing span { animation: cm-fill var(--cm-time-chart) var(--cm-ease-out); }
.cm-footer { padding-block: var(--cm-space-8); border-top: 1px solid rgb(var(--cm-line)); }

@keyframes cm-sky-drift { from { transform: translate(-1%, -1%) scale(1); } to { transform: translate(2%, 1%) scale(1.06); } }
@keyframes cm-light { from { opacity: .45; } to { opacity: 1; } }
@keyframes cm-demo-enter { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1199px) { .cm-flow { display: none; } .cm-mega-layout { grid-template-columns: 230px 1fr; } .cm-header-row { gap: var(--cm-space-5); } }
@media (max-width: 1023px) {
  .cm-mobile-toggle { display: inline-flex; margin-left: auto; }
  .cm-nav-pane { display: flex; flex-direction: column; align-items: stretch; justify-content: start; gap: 0; position: fixed; inset: 0; height: 100dvh; z-index: var(--cm-z-mobile); overflow-y: auto; background: rgb(var(--cm-surface)); padding: var(--cm-gutter); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: opacity var(--cm-time-fade), transform var(--cm-time-mobile) var(--cm-ease-out), visibility var(--cm-time-mobile); }
  /* Visibility flips at once on open (the fade and slide still run): a visibility transition starts at
     "hidden", which made the controller's focus() on the close button fail. Closing keeps the delayed hide. */
  .cm-nav-pane.is-mobile-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity var(--cm-time-fade), transform var(--cm-time-mobile) var(--cm-ease-out), visibility 0s; }
  .cm-mobile-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--cm-space-5); }
  .cm-nav { display: block; }
  .cm-nav-trigger, .cm-nav-link { width: 100%; justify-content: space-between; min-height: 62px; padding-inline: 0; border-radius: 0; border-bottom: 1px solid rgb(var(--cm-line)); font-size: 1.125rem; color: rgb(var(--cm-ink)); }
  .cm-nav-pane > .cm-btn { margin-top: auto; flex-shrink: 0; }
  .cm-mega { display: grid; grid-template-rows: 0fr; position: static; box-shadow: none; opacity: 1; visibility: hidden; transition: grid-template-rows var(--cm-time-accordion) var(--cm-ease-out), visibility var(--cm-time-accordion); }
  .cm-menu.is-open .cm-mega { grid-template-rows: 1fr; transition-property: grid-template-rows; }
  .cm-mega::before { display: none; }
  .cm-mega-overflow { overflow: hidden; min-height: 0; }
  .cm-mega .cm-container { padding-inline: 0; }
  .cm-mega-layout { display: block; }
  .cm-mega-intro, .cm-mega-feature, .cm-mega-footer { display: none; }
  .cm-mega-grid { grid-template-columns: 1fr; }
  .cm-mega-card { padding: var(--cm-space-5) var(--cm-space-3); border-right: 0; gap: var(--cm-space-2); }
  .cm-mega-card strong { font-size: 1rem; }
  .cm-mega-card .cm-eyebrow, .cm-mega-card > span:last-child { display: none; }
  .cm-feature { grid-template-columns: 1fr; gap: var(--cm-space-10); }
  .cm-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .cm-hero { padding-top: var(--cm-space-16); }
  .cm-hero-foot { flex-direction: column; margin-top: var(--cm-space-10); }
  .cm-section-intro { display: grid; gap: var(--cm-space-4); }
  .cm-spec-grid { grid-template-columns: 1fr; }
  .cm-type-sample { grid-template-columns: 1fr; gap: var(--cm-space-3); }
  .cm-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-demo-stage { grid-template-columns: 1fr; min-height: 355px; }
  .cm-demo-sidebar { display: none; }
  .cm-demo-main { padding: var(--cm-space-4); }
  .cm-demo-controls { gap: 0; flex-wrap: wrap; }
  .cm-demo-step { padding: .5rem; font-size: .75rem; }
  .cm-demo-row .cm-badge { font-size: .6875rem; }
  .cm-frame { border-radius: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cm *, .cm *::before, .cm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cm-demo-pointer { display: none; }
}