/* Homepage camera trial. Scoped styles do not depend on the Tailwind CDN. */
.wlh-preview {
  --preview-ink: #f3f7ff;
  --preview-muted: #aebbd0;
  --preview-line: rgba(166, 198, 232, .17);
  --preview-cyan: #67e8f9;
  color: var(--preview-ink);
  background: var(--color-deep-navy, #080f20);
  padding: clamp(60px, 7vw, 100px) 20px;
  position: relative;
  isolation: isolate;
}
.wlh-preview *, .wlh-preview *::before, .wlh-preview *::after { box-sizing: border-box; }
.wlh-preview [hidden] { display: none !important; }
.wlh-preview__inner { max-width: 1170px; margin: 0 auto; }
.wlh-preview__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 30px; }
.wlh-preview__intro { max-width: 710px; }
.wlh-preview__eyebrow { color: var(--preview-cyan); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 13px; }
.wlh-preview h2 { margin: 0 0 16px; font-size: clamp(29px, 4vw, 44px); line-height: 1.15; font-weight: 750; letter-spacing: -.025em; color: var(--preview-ink); }
.wlh-preview__lead { margin: 0; color: var(--preview-muted); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.7; }
.wlh-preview__trial-note { margin: 12px 0 0; color: #93a4be; font-size: 12px; line-height: 1.6; }
.wlh-preview__session-note { color: #93a4be; font-size: 12px; line-height: 1.6; text-align: right; max-width: 185px; margin: 0 0 3px; flex-shrink: 0; }
.wlh-preview__layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.wlh-preview__host { border: 1px solid var(--preview-line); background: #0d172b; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, .2); }
.wlh-preview__bar { padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--preview-line); background: rgba(255, 255, 255, .018); }
.wlh-preview__step { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 650; margin: 0; color: var(--preview-ink); }
.wlh-preview__step-number { width: 24px; height: 24px; border: 1px solid rgba(103, 232, 249, .38); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--preview-cyan); background: rgba(103, 232, 249, .06); flex-shrink: 0; }
.wlh-preview__state { display: flex; align-items: center; gap: 7px; color: var(--preview-muted); font-size: 12px; line-height: 1.4; text-align: right; }
.wlh-preview__state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8290a8; flex-shrink: 0; }
.wlh-preview[data-state="ready"] .wlh-preview__state::before { background: #67e8f9; }
.wlh-preview[data-state="live"] .wlh-preview__state::before { background: #fb7185; box-shadow: 0 0 0 3px rgba(251, 113, 133, .12); }
.wlh-preview[data-state="busy"] .wlh-preview__state::before, .wlh-preview[data-state="recovery"] .wlh-preview__state::before { background: #fbbf24; }
.wlh-preview[data-state="error"] .wlh-preview__state::before { background: #fb7185; }
.wlh-preview[data-state="checking"] .wlh-preview__state::before, .wlh-preview[data-state="preparing"] .wlh-preview__state::before, .wlh-preview[data-state="stopping"] .wlh-preview__state::before { background: var(--preview-cyan); animation: wlh-preview-pulse 1.5s ease-in-out infinite; }
.wlh-preview__stage { position: relative; min-height: 390px; background: #070f1f; }
.wlh-preview__empty { min-height: 390px; padding: 42px 30px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: radial-gradient(ellipse at 50% 42%, rgba(57, 139, 188, .09), transparent 66%); }
.wlh-preview__camera-symbol { width: 96px; height: 80px; border: 1px solid rgba(103, 232, 249, .25); border-radius: 19px; display: flex; align-items: center; justify-content: center; background: rgba(103, 232, 249, .045); position: relative; margin: 4px 0 28px; }
.wlh-preview__camera-symbol::before { content: ''; width: 148px; height: 124px; border: 1px dashed rgba(132, 173, 217, .18); position: absolute; border-radius: 32px; }
.wlh-preview__camera-symbol svg { width: 42px; height: 42px; color: var(--preview-cyan); }
.wlh-preview__empty h3 { margin: 0 0 11px; color: #e7efff; font-size: 19px; font-weight: 600; line-height: 1.4; }
.wlh-preview__empty p { margin: 0; color: #95a5be; max-width: 345px; font-size: 14px; line-height: 1.65; }
.wlh-preview__host-frame { display: block; border: 0; width: 100%; height: clamp(660px, 50vw, 760px); background: #070f1f; }
.wlh-preview__slow { padding: 10px 18px; color: #fde68a; background: #292519; border-bottom: 1px solid rgba(251, 191, 36, .2); font-size: 12px; line-height: 1.6; }
.wlh-preview__controls { padding: 20px; border-top: 1px solid var(--preview-line); display: flex; gap: 15px; align-items: flex-start; flex-wrap: wrap; }
.wlh-preview__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.wlh-preview__button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 11px 17px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.5; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.wlh-preview__button--primary { background: var(--preview-cyan); color: #06202b; }
.wlh-preview__button--primary:hover:not(:disabled) { background: #a5f3fc; transform: translateY(-1px); }
.wlh-preview__button--secondary { background: rgba(103, 232, 249, .055); border-color: rgba(103, 232, 249, .35); color: var(--preview-cyan); }
.wlh-preview__button--secondary:hover:not([aria-disabled="true"]):not(:disabled) { border-color: var(--preview-cyan); background: rgba(103, 232, 249, .12); }
.wlh-preview__button--quiet { background: transparent; border-color: #49576f; color: #d3deee; }
.wlh-preview__button--quiet:hover:not(:disabled) { border-color: #98aac5; background: rgba(255, 255, 255, .04); }
.wlh-preview__button:disabled, .wlh-preview__button[aria-disabled="true"] { cursor: default; opacity: .5; transform: none; }
.wlh-preview button:focus-visible, .wlh-preview a:focus-visible, .wlh-preview input:focus-visible { outline: 3px solid #67e8f9; outline-offset: 4px; }
.wlh-preview__detail { flex: 1; min-width: 180px; font-size: 12px; line-height: 1.7; color: var(--preview-muted); margin: 1px 0 0; }
.wlh-preview__aside { display: grid; gap: 18px; }
.wlh-preview__viewer { background: linear-gradient(135deg, #12243a, #0e1a2e); border: 1px solid rgba(103, 232, 249, .22); border-radius: 16px; padding: 25px; }
.wlh-preview__viewer h3 { margin-bottom: 19px; }
.wlh-preview__viewer p { color: var(--preview-muted); font-size: 13px; line-height: 1.7; margin: 0 0 19px; }
.wlh-preview__viewer .wlh-preview__button { width: 100%; }
.wlh-preview__viewer-hint { color: #8d9fb9; display: block; margin-top: 12px; font-size: 11px; line-height: 1.7; }
.wlh-preview__share { display: block; font: inherit; color: var(--preview-cyan); background: none; border: 0; cursor: pointer; padding: 8px 0 0; font-size: 12px; text-align: left; min-height: 34px; }
.wlh-preview__share-input { width: 100%; background: #070f1f; color: #e7efff; border: 1px solid #41516c; border-radius: 6px; font: inherit; font-size: 11px; margin-top: 8px; padding: 10px; }
.wlh-preview__sdk { border: 1px solid var(--preview-line); border-radius: 16px; padding: 22px 25px; background: rgba(255, 255, 255, .015); }
.wlh-preview__sdk h3 { margin: 0 0 8px; font-size: 15px; font-weight: 650; }
.wlh-preview__sdk p { margin: 0 0 16px; color: var(--preview-muted); font-size: 12px; line-height: 1.7; }
.wlh-preview__code { margin: 0 -25px 16px; padding: 16px 16px; border-top: 1px solid var(--preview-line); border-bottom: 1px solid var(--preview-line); background: #070f1f; font-size: clamp(10px, 1vw, 11px); line-height: 1.9; overflow-x: auto; color: #d0ddf0; }
.wlh-preview__code code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.wlh-preview__code .wlh-preview__code-key { color: #a5b4fc; }
.wlh-preview__code .wlh-preview__code-value { color: #99f6e4; }
.wlh-preview__sdk-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.wlh-preview__sdk-links a { font-size: 12px; font-weight: 600; line-height: 1.7; color: var(--preview-cyan); text-decoration: none; }
.wlh-preview__sdk-links a:hover { text-decoration: underline; }
.wlh-preview__sdk-links a:last-child { color: #e4ebf7; }
.wlh-preview__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 1px solid var(--preview-line); margin-top: 30px; padding-top: 27px; list-style: none; margin-bottom: 0; padding-left: 0; }
.wlh-preview__benefits li { display: flex; gap: 12px; }
.wlh-preview__benefits svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--preview-cyan); margin-top: 3px; }
.wlh-preview__benefits strong { display: block; font-size: 13px; font-weight: 650; line-height: 1.5; margin-bottom: 5px; }
.wlh-preview__benefits p { color: #93a4be; font-size: 12px; line-height: 1.65; margin: 0; }
.wlh-preview__noscript { color: #fde68a; font-size: 13px; padding: 15px 0 0; }
@keyframes wlh-preview-pulse { 50% { opacity: .35; } }
@media (max-width: 960px) { .wlh-preview__layout { grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr); gap: 16px; } .wlh-preview__viewer { padding: 21px; } .wlh-preview__session-note { display: none; } }
@media (max-width: 760px) { .wlh-preview { padding: 58px 16px; } .wlh-preview__header { margin-bottom: 24px; } .wlh-preview__layout { grid-template-columns: 1fr; } .wlh-preview__aside { grid-template-columns: 1fr 1fr; gap: 16px; } .wlh-preview__viewer, .wlh-preview__sdk { padding: 20px; } .wlh-preview__code { margin-left: -20px; margin-right: -20px; } .wlh-preview__benefits { gap: 20px; } }
@media (max-width: 540px) { .wlh-preview__aside { grid-template-columns: 1fr; } .wlh-preview__bar { padding: 15px 16px; } .wlh-preview__step { font-size: 13px; } .wlh-preview__state { max-width: 130px; font-size: 11px; } .wlh-preview__empty { min-height: 320px; padding: 40px 22px; } .wlh-preview__stage { min-height: 320px; } .wlh-preview__host-frame { height: 680px; } .wlh-preview__controls { padding: 17px 16px; gap: 10px; } .wlh-preview__actions { width: 100%; } .wlh-preview__actions .wlh-preview__button { width: 100%; } .wlh-preview__detail { min-width: 0; width: 100%; } .wlh-preview__benefits { grid-template-columns: 1fr; gap: 22px; margin-top: 25px; } .wlh-preview__benefits strong { font-size: 14px; } .wlh-preview__benefits p { font-size: 13px; } .wlh-preview__viewer p { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .wlh-preview *, .wlh-preview *::before { animation: none !important; transition: none !important; } }