/* WhatsApp use-case page — partials/use-whatsapp.html
   Self-contained styles. */

.uw-accent { color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════ */
.uw-hero {
  position: relative;
  /* Hero top padding cut in half so the H1 sits closer to the nav and
     the stage takes more visual real estate; bottom padding kept as the
     standard section value. */
  padding-block: calc(var(--section-py) * 0.5) var(--section-py);
  background: var(--color-bg);
  overflow: hidden;
}
.uw-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 380px at 90% 0%, rgba(37,211,102,0.10), transparent 65%),
    radial-gradient(900px 480px at 0% 100%, rgba(77,0,242,0.06), transparent 70%);
  pointer-events: none;
}
.uw-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.uw-hero__copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.uw-hero__title {
  font-family: var(--font-display);
  font-size: 51px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 8px 0 0;
}
.uw-hero__accent { color: var(--color-primary); }
.uw-hero__lede {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 560px;
}
.uw-hero__ctas { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.uw-hero__ghost { font-size: 16px; padding: 14px 22px; }
.uw-hero__answer {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  background: var(--color-primary-tint-1);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-top: 12px;
  max-width: 560px;
}
.uw-hero__answer strong { color: var(--color-text); }

/* Phone mock */
.uw-hero__stage { display: flex; justify-content: center; }
.uw-mock {
  width: 100%; max-width: 380px;
  background: var(--wa-bg, #ECE5DD);
  border-radius: var(--r-2xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.uw-mock__hd {
  background: var(--wa-green, #075E54);
  color: #fff;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.uw-mock__hd strong { display: block; font-size: 14px; }
.uw-mock__sub { font-size: 11px; opacity: 0.85; display: inline-flex; align-items: center; gap: 6px; }
.uw-mock__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-online, #4ADE80); display: inline-block; }
.uw-mock__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: grid; place-items: center;
  color: #fff;
}
.uw-mock__avatar i { width: 18px; height: 18px; }
.uw-mock__msgs {
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
  background-image: linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 100% 8px;
  min-height: 240px;
}
.uw-mock__msg {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 82%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.uw-mock__msg--in { background: var(--wa-bubble-in, #fff); align-self: flex-start; border-top-left-radius: 4px; }
.uw-mock__msg--out { background: var(--wa-bubble-out, #DCF8C6); align-self: flex-end; border-top-right-radius: 4px; }
.uw-mock__ft { padding: 10px 16px 14px; }
.uw-mock__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.85);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: 11px;
  color: var(--color-text);
  font-weight: 600;
}
.uw-mock__pill i { width: 13px; height: 13px; color: var(--wa-send, #25D366); }

@media (max-width: 880px) {
  .uw-hero__inner { grid-template-columns: 1fr; }
  .uw-hero__stage { order: -1; }
}

/* ═══════════════════════════════════════════════════════
   Section heading rhythm
   ═══════════════════════════════════════════════════════ */
.uw-cards__title,
.uw-how__title,
.uw-outcome__title,
.uw-faq__title {
  font-family: var(--font-display);
  font-size: var(--fs-section-h2);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 16px 0 14px;
}
.uw-cards__lede,
.uw-how__lede,
.uw-faq__lede {
  font-size: var(--fs-section-lede);
  line-height: var(--lh-section-lede);
  color: var(--color-text-muted);
  max-width: 640px;
}
.uw-cards__head, .uw-how__head, .uw-outcome__head, .uw-faq__head {
  margin-bottom: var(--gap-head-body);
  text-align: center;
  margin-inline: auto;
  max-width: 720px;
}
.uw-cards__lede, .uw-how__lede, .uw-faq__lede { margin-inline: auto; }

/* ═══════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════ */
.uw-cards { padding-block: var(--section-py); background: var(--color-bg-soft); }
.uw-cards__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }

.uw-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.uw-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  padding: 28px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.uw-card__icon {
  width: 48px; height: 48px;
  background: var(--color-primary-tint-1);
  color: var(--color-primary);
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.uw-card__icon i { width: 22px; height: 22px; }
.uw-card h3 { font-family: var(--font-display); font-size: 19px; margin-bottom: 10px; line-height: 1.2; }
.uw-card > p { color: var(--color-text-muted); font-size: 15px; line-height: 1.6; margin-bottom: 16px; }
.uw-card__list { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--color-border-strong); }
.uw-card__list li {
  font-size: 13.5px; color: var(--color-text); padding-left: 22px; position: relative;
}
.uw-card__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 14px; height: 14px;
  background: var(--color-primary); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5 6.5 12 13 5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5 6.5 12 13 5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

@media (max-width: 960px) { .uw-cards__grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════
   How it works
   ═══════════════════════════════════════════════════════ */
.uw-how { padding-block: var(--section-py); }
.uw-how__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }

.uw-how__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}
.uw-how__step {
  background: var(--color-primary-tint-1);
  border: 1px solid var(--color-primary-tint-2);
  border-radius: var(--r-2xl);
  padding: 28px 22px;
  position: relative;
}
.uw-how__num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--color-primary);
  display: block;
  margin-bottom: 14px;
  letter-spacing: -0.04em;
}
.uw-how__step h3 { font-family: var(--font-display); font-size: 17px; margin-bottom: 8px; line-height: 1.25; }
.uw-how__step p { font-size: 14px; line-height: 1.55; color: var(--color-text-muted); }

@media (max-width: 980px) { .uw-how__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .uw-how__steps { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════
   Outcome / testimonial
   ═══════════════════════════════════════════════════════ */
.uw-outcome { padding-block: var(--section-py); background: var(--color-primary-deeper); color: #fff; }
.uw-outcome__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }
.uw-outcome__head .eyebrow { background: rgba(255,255,255,0.06); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); }
.uw-outcome__head .eyebrow__icon { background: var(--color-primary-light); }
.uw-outcome__title { color: #fff; }

.uw-spot {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-2xl);
  padding: 36px;
  backdrop-filter: blur(4px);
}
.uw-spot__quote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 28px;
}
.uw-spot__stats {
  display: flex; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
}
.uw-spot__stats li { display: flex; flex-direction: column; gap: 2px; }
.uw-spot__stats strong {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-primary-light);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.uw-spot__stats span { font-size: 12px; color: rgba(255,255,255,0.7); }

.uw-spot__person { display: flex; flex-direction: column; gap: 14px; }
.uw-spot__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
}
.uw-spot__person dl { display: flex; flex-direction: column; gap: 12px; }
.uw-spot__person dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); margin-bottom: 2px; }
.uw-spot__person dd { font-size: 14px; color: #fff; }
.uw-spot__note { font-size: 11px; color: rgba(255,255,255,0.5); font-style: italic; margin-top: auto; }

@media (max-width: 880px) { .uw-spot { grid-template-columns: 1fr; padding: 24px; } }

/* ═══════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════ */
.uw-faq { padding-block: var(--section-py); }
.uw-faq__inner { max-width: 880px; margin-inline: auto; padding-inline: var(--container-px); }
.uw-faq__lede a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.uw-faq__list { display: flex; flex-direction: column; gap: 12px; }
.uw-faq__item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.uw-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}
.uw-faq__item summary::-webkit-details-marker { display: none; }
.uw-faq__item summary i { width: 18px; height: 18px; color: var(--color-primary); transition: transform 240ms ease; flex-shrink: 0; }
.uw-faq__item[open] summary i { transform: rotate(45deg); }
.uw-faq__item > div { padding: 0 24px 22px; }
.uw-faq__item p { color: var(--color-text-muted); font-size: 15px; line-height: 1.65; }
.uw-faq__item a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────────────────────────────────────────
   Hero stage, two-phase narrative.
   Phase A (chat): the customer-facing surface, what your customer sees.
   Phase B (flow): the backend dataflow, what AiFlo does behind the scenes.
   JS toggles `is-chat` / `is-flow` on the stage; CSS handles the cross-fade
   and bubble stagger. Bubbles also reset every cycle via JS (clears the
   `is-shown` class then re-adds with staggered timeouts).
   ───────────────────────────────────────────────────────────── */
.uw-hero__stage {
  position: relative;
  min-height: 500px;
}
.uw-stage__layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.uw-hero__stage.is-chat .uw-stage__layer--chat,
.uw-hero__stage.is-flow .uw-stage__layer--flow {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Outgoing layer drifts up slightly as it fades out — feels like one
   thought transitioning to the next, not a hard cut. */
.uw-hero__stage.is-flow .uw-stage__layer--chat,
.uw-hero__stage.is-chat .uw-stage__layer--flow {
  transform: translateY(-8px);
}
/* Default state (before JS runs): chat is the entry view */
.uw-hero__stage:not(.is-flow):not(.is-chat) .uw-stage__layer--chat {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Phase B: drop the panel's lavender pastel background + border so the
   diagram floats directly on the section bg. The flow visualization
   carries its own visual weight via the icons + dashed lines. */
.uw-stage__layer--flow .feature__media--anim {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.uw-stage__layer--flow .feature__media--anim::before { display: none; }
.uw-stage__layer--flow .fa-glow { display: none; }

.uw-stage__caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.22);
  color: var(--color-primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.uw-stage__caption i,
.uw-stage__caption [data-lucide] {
  width: 18px;
  height: 18px;
  padding: 4px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 999px;
  box-sizing: content-box;
}

/* Pager dots removed per design feedback. Selectors kept as no-ops in
   case the markup is still present; section reads cleaner without
   chrome under the stage. */
.uw-stage__pager { display: none; }

/* Bubbles inside the chat — animate in via the `is-shown` class added by JS */
.uw-stage__layer--chat .uw-mock__msgs {
  /* Reset for each cycle, JS handles which bubble is visible at a given time */
}
.uw-stage__layer--chat .uw-mock__msg {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.uw-stage__layer--chat .uw-mock__msg.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* Generic Phase-A row reveal used by non-WhatsApp use-case pages
   (email rows, hiring candidates, workflow steps, lead score lines). */
.uw-stage__layer--chat .uc-mock__row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.uw-stage__layer--chat .uc-mock__row.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* Backend flow panel — fixed height inside the hero stage */
.uw-stage__layer--flow .feature__media--anim {
  position: relative;
  min-height: 420px;
  flex: 1;
}

@media (prefers-reduced-motion: reduce) {
  .uw-stage__layer { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   Plug & play, integrations strip
   ───────────────────────────────────────────────────────────── */
.uw-integ { padding-block: var(--section-py); background: #ffffff; }
.uw-integ__inner { max-width: 1100px; margin-inline: auto; }
.uw-integ__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--gap-head-body);
}
.uw-integ__title {
  font-family: var(--font-display);
  font-size: var(--fs-section-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.uw-integ__lede {
  font-size: var(--fs-section-lede);
  line-height: var(--lh-section-lede);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 56ch;
}
.uw-integ__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.uw-integ__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(100, 80, 160, 0.14);
  transition: border-color 240ms ease, transform 240ms ease;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-mid);
  line-height: 1.3;
}
.uw-integ__item:hover {
  border-color: rgba(124, 58, 237, 0.32);
  transform: translateY(-2px);
}
.uw-integ__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.uw-integ__icon img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 720px) {
  .uw-integ__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─────────────────────────────────────────────────────────────
   Flow visualization — homepage card 1 animation
   ───────────────────────────────────────────────────────────── */
.uw-flow {
  padding-block: var(--section-py);
  background: linear-gradient(180deg, #f8f7ff 0%, #ede9fe 100%);
}
.uw-flow__inner { max-width: 1100px; margin-inline: auto; }
.uw-flow__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--gap-head-body);
}
.uw-flow__title {
  font-family: var(--font-display);
  font-size: var(--fs-section-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.uw-flow__lede {
  font-size: var(--fs-section-lede);
  line-height: var(--lh-section-lede);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 56ch;
}
.uw-flow__panel {
  max-width: 880px;
  margin-inline: auto;
  border-radius: 24px;
  overflow: hidden;
}
.uw-flow__panel .feature__media--anim {
  /* Local override: fixed-height panel since the global .feature__media
     is built around the homepage's sticky grid (which sets its height
     via the row layout). On this standalone page we need an explicit
     height. */
  position: relative;
  min-height: 420px;
}

/* ─────────────────────────────────────────────────────────────
   Templates — pre-built workflows
   ───────────────────────────────────────────────────────────── */
.uw-templates { padding-block: var(--section-py); background: #ffffff; }
.uw-templates__inner { max-width: 1180px; margin-inline: auto; }
.uw-templates__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--gap-head-body);
}
.uw-templates__title {
  font-family: var(--font-display);
  font-size: var(--fs-section-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.uw-templates__lede {
  font-size: var(--fs-section-lede);
  line-height: var(--lh-section-lede);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 56ch;
}
.uw-templates__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.uw-tmpl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(100, 80, 160, 0.14);
  transition: border-color 240ms ease, transform 240ms ease;
}
.uw-tmpl:hover {
  border-color: rgba(124, 58, 237, 0.32);
  transform: translateY(-2px);
}
.uw-tmpl__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--tmpl-bg, rgba(124, 58, 237, 0.12));
  color: var(--tmpl-fg, #7c3aed);
  margin-bottom: 4px;
}
.uw-tmpl__icon i, .uw-tmpl__icon [data-lucide] { width: 20px; height: 20px; }
.uw-tmpl__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.uw-tmpl__sub {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.uw-tmpl__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 6px;
}
.uw-tmpl__cta i { width: 14px; height: 14px; transition: transform 240ms ease; }
.uw-tmpl__cta:hover i { transform: translateX(3px); }

@media (max-width: 900px) {
  .uw-templates__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .uw-templates__grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Reviews — 3-column masonry of customer outcomes
   (lite-style, ported into prod's clean visual language)
   ───────────────────────────────────────────────────────────── */
.uw-reviews {
  padding-block: var(--section-py);
  background: linear-gradient(180deg, #ede9fe 0%, #f5f3ff 100%);
}
.uw-reviews__inner { max-width: 1180px; margin-inline: auto; }
.uw-reviews__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--gap-head-body);
}
.uw-reviews__title {
  font-family: var(--font-display);
  font-size: var(--fs-section-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.uw-reviews__lede {
  font-size: var(--fs-section-lede);
  line-height: var(--lh-section-lede);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 56ch;
}
.uw-reviews__masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.uw-reviews__col { display: flex; flex-direction: column; gap: 18px; }

.uw-review {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(100, 80, 160, 0.14);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.uw-review:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(36, 28, 110, 0.06); }
.uw-review--featured {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.28);
  padding: 28px;
}
.uw-review__stars {
  display: flex;
  gap: 3px;
}
.uw-review__stars span {
  width: 14px;
  height: 14px;
  background-color: #f59e0b;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1l2.5 6.5h6.5l-5.2 4 2 6.5L10 14l-5.8 4 2-6.5L1 7.5h6.5z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1l2.5 6.5h6.5l-5.2 4 2 6.5L10 14l-5.8 4 2-6.5L1 7.5h6.5z'/></svg>") center / contain no-repeat;
}
.uw-review__quote {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-mid);
  margin: 0;
}
.uw-review--featured .uw-review__quote { font-size: 15.5px; }
.uw-review__metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.18);
  color: var(--color-primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.uw-review__metric--alt {
  background: rgba(34, 211, 238, 0.10);
  border-color: rgba(34, 211, 238, 0.22);
  color: #0e7490;
}
.uw-review__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.uw-review__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(100, 80, 160, 0.10);
}
.uw-review__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}
.uw-review__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.uw-review__role {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.uw-reviews__note {
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 900px) {
  .uw-reviews__masonry { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .uw-reviews__masonry { grid-template-columns: 1fr; }
}