/* Praza AI article: "full app coming" teaser and First List box. Teal theme tokens from styles.css. */
.uee-teaser {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem;
  margin: 1.6rem 0 0; padding: .9rem 1.1rem; border-radius: 14px;
  background: var(--ink); color: #f4efe6; text-decoration: none;
}
.uee-teaser__txt { font-size: .98rem; line-height: 1.45; }
.uee-teaser__txt strong { color: #d4ff3a; }
a.uee-teaser:hover { outline: 2px solid #d4ff3a; outline-offset: 2px; }
.uee-teaser__go { font-family: var(--font-mono); font-size: .82rem; white-space: nowrap; }
.uee-teaser [data-clock] { font-variant-numeric: tabular-nums; }

.uee-box {
  margin: clamp(2.4rem, 6vw, 3.6rem) 0 0; padding: clamp(1.4rem, 4vw, 2.4rem);
  border-radius: 20px; background: var(--ink); color: #f4efe6;
}
.uee-box__eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #d4ff3a; margin: 0 0 .7rem; }
.uee-box h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; margin: 0 0 .8rem; color: #f4efe6; }
.uee-box p { color: rgba(244,239,230,.78); max-width: 58ch; line-height: 1.55; margin: 0 0 .9rem; }
.uee-box ul { margin: 0 0 1.2rem; padding-left: 1.1rem; color: rgba(244,239,230,.86); display: grid; gap: .35rem; }
.uee-box__clock { font-family: var(--font-mono); font-size: .9rem; color: rgba(244,239,230,.7); }
.uee-box__clock [data-clock] { color: #d4ff3a; font-variant-numeric: tabular-nums; }
.uee-box .join__row { display: flex; gap: .5rem; padding: .35rem; border-radius: 999px; background: #22231f; border: 1px solid rgba(244,239,230,.14); max-width: 32rem; }
.uee-box .join__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: #f4efe6; font: inherit; padding: .6rem 1rem; outline: none; }
.uee-box .join__input::placeholder { color: rgba(244,239,230,.45); }
.uee-box .join__btn { border: 0; border-radius: 999px; padding: .7rem 1.2rem; background: #d4ff3a; color: #11140a; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.uee-box .join__msg { min-height: 1.4em; margin-top: .6rem; font-weight: 600; }
.uee-box .join__msg[data-state="ok"] { color: #d4ff3a; }
.uee-box .join__msg[data-state="err"] { color: #ff9a8a; }
.uee-box .join__note { font-size: .85rem; margin-top: .4rem; }
.uee-box a { color: #f4efe6; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


@media (max-width: 420px) {
  .uee-box .join__row { flex-direction: column; border-radius: 16px; }
  .uee-box .join__btn { width: 100%; }
}

.uee-box__rec { margin: 0 0 1.2rem; border-radius: 12px; overflow: hidden; background: #22231f; max-width: 40rem; }
.uee-box__rec video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.uee-box__rec figcaption { padding: .5rem .8rem; font-size: .82rem; color: rgba(244,239,230,.7); }

/* free vs full comparison in the First List box (29 Oct: upsell, Praza) */
.uee-compare-wrap { overflow-x: auto; margin: .4rem 0 .8rem; -webkit-overflow-scrolling: touch; }
.uee-compare { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9rem; color: rgba(244,239,230,.86); }
.uee-compare th, .uee-compare td { padding: .6rem .7rem; border-bottom: 1px solid rgba(244,239,230,.12); text-align: left; vertical-align: top; }
.uee-compare thead th { font-family: var(--font-display); font-size: 1rem; color: #f4efe6; border-bottom-color: rgba(244,239,230,.3); }
.uee-compare thead th span { font-family: var(--font-mono); font-size: .72rem; font-weight: 400; color: #d4ff3a; }
.uee-compare tbody th { font-weight: 500; color: rgba(244,239,230,.7); width: 34%; }
.uee-compare td:last-child { color: #f4efe6; }
.uee-compare strong { color: #d4ff3a; }
.uee-compare__fine { font-size: .85rem; }
.uee-box .uee-compare__fine a, .uee-box p a { color: #d4ff3a; }
@media (max-width: 640px) {
  .uee-compare { min-width: 0; }
  .uee-compare thead { display: none; }
  .uee-compare, .uee-compare tbody, .uee-compare tr, .uee-compare th, .uee-compare td { display: block; width: auto; }
  .uee-compare tr { padding: .7rem 0; border-bottom: 1px solid rgba(244,239,230,.12); }
  .uee-compare th, .uee-compare td { border: 0; padding: .15rem 0; }
  .uee-compare tbody th { color: #f4efe6; font-weight: 600; margin-bottom: .2rem; }
  .uee-compare tbody th { width: auto; }
  .uee-compare td { text-align: right; overflow: hidden; }
  .uee-compare td::before { content: attr(data-label); float: left; margin-right: .8rem; font-family: var(--font-mono); font-size: .74rem; color: rgba(244,239,230,.55); padding-top: .15rem; }
}