/* ==========================================================================
   USE-CASE PAGES — layout only, like landing.css. Colour, type, borders and
   motion come from css/ds.css; .uc-* only arranges the hero, the chat mock,
   the before/after slider, the FAQ and the sticky mobile CTA.
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------- */

.uc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-12);
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--space-15) + var(--space-9));   /* the overlay appbar sits on top */
  padding-bottom: var(--space-13);
}

.uc-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: var(--ls-tightest);
  line-height: 1.12;
  text-transform: none;
  margin: var(--space-6) 0 0;
  text-wrap: pretty;
}

.uc-hero-copy .ds-body { margin: var(--space-7) 0 0; max-width: 520px; }
.uc-hero-copy .lp-actions { justify-content: flex-start; margin-top: var(--space-9); }

/* ---- particle hero — a canvas the figures are drawn into ----------------- */

.uc-hero-visual {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  justify-self: end;
  color: var(--pc-ink);
}

.uc-hero-visual canvas { display: block; width: 100%; height: 100%; }

/* ---- lists & steps ------------------------------------------------------- */

.uc-list { display: flex; flex-direction: column; }
.uc-list .ds-row:last-of-type { border-bottom: 0; }
.uc-lead { margin: 0 0 var(--space-9); max-width: var(--measure-prose); }
.uc-note { display: block; margin-top: var(--space-7); opacity: var(--dim-5); }

.uc-step { display: flex; flex-direction: column; gap: var(--space-4); }
.uc-step .ds-body { margin: 0; }

.uc-step-n {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  color: var(--pc-accent-mint);
}

.uc-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-11);
  align-items: start;
}

/* ---- how it works: three looping scenes ----------------------------------
   Each scene is a compact phone (css/phone.css) driven by js/pages/usecase.js:
   parts with `[data-t]` pop in at that millisecond, `[data-until]` parts go
   again. New messages push older ones up, like a real chat. */

.uc-step-phone { align-items: center; text-align: center; }
.uc-step-phone .ds-body { max-width: 34ch; }
[data-scene] .uc-chat-body { justify-content: flex-end; overflow: hidden; }
[data-scene] [data-t] { display: none; }
[data-scene] [data-t].is-on { display: block; animation: uc-pop 0.25s ease-out both; }
[data-scene] .uc-gif-typing.is-on, [data-scene] .uc-gif-site.is-on, [data-scene] .uc-gif-site-bar.is-on { display: flex; }
[data-scene] .uc-gif-site-bar i.is-on { display: inline-block; }
[data-scene] [data-t].is-off { display: none; }

.uc-gif-from { display: block; margin-bottom: 2px; font-size: 10px; letter-spacing: var(--ls-wider); text-transform: uppercase; opacity: var(--dim-4); }
.uc-gif-photo { display: block; box-sizing: border-box; width: 110px; height: 54px; margin-bottom: 5px; border: 1px solid currentColor; border-radius: 8px; background: repeating-linear-gradient(135deg, currentColor 0 6px, transparent 6px 12px); opacity: 0.3; }
.uc-gif-typing { display: flex; gap: 4px; padding: 9px 10px; }   /* the "…" bubble of a scene */
.uc-gif-typing i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: uc-dot 1.1s infinite; }
.uc-gif-typing i:nth-child(2) { animation-delay: 0.18s; }
.uc-gif-typing i:nth-child(3) { animation-delay: 0.36s; }

/* a site preview inside a bot bubble, Telegram link-preview style */
.uc-msg-preview { width: 94%; max-width: 94%; padding: 0; overflow: hidden; }
.uc-msg-preview .uc-gif-site { border: 0; }
.uc-gif-site { display: flex; flex-direction: column; gap: 6px; padding: 0 0 8px; border: var(--bw-hairline) solid var(--pc-border); background: var(--pc-surface); font-family: var(--font-display); }
.uc-gif-site-bar { display: flex; gap: 8px; padding: 6px 10px; border-bottom: var(--bw-hairline) solid var(--pc-border); font-size: 10px; }
.uc-gif-site-bar b { margin-right: auto; font-weight: var(--fw-medium); white-space: nowrap; }
.uc-gif-site-bar span { min-width: 0; opacity: var(--dim-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-gif-site-bar i { display: inline-block; margin-left: -4px; font-style: normal; font-weight: var(--fw-medium); white-space: nowrap; } /* the menu item a scene adds */
.uc-gif-site-img { height: 34px; margin: 2px 10px 0; background: var(--pc-bg-hover); }
.uc-gif-site-h { margin: 2px 10px 0; font-size: 15px; font-weight: var(--fw-light); letter-spacing: var(--ls-tightest); }
.uc-gif-site-p { margin: 0 10px; font-size: 10px; opacity: var(--dim-4); }
.uc-gif-site-line { margin: 2px 10px 0; padding: 5px 8px; border: var(--bw-hairline) solid var(--pc-border); font-size: 11px; }
.uc-gif-site-line.is-new { border-color: var(--pc-border-strong); background: var(--pc-bg-subtle); }

.uc-steps-cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); margin-top: var(--space-10); }

/* ---- video --------------------------------------------------------------- */

.uc-video {
  position: relative;
  overflow: hidden;
  border: var(--bw-hairline) solid var(--pc-border);
  background: var(--pc-true-black);
  line-height: 0;
}

.uc-video video { display: block; width: 100%; height: auto; cursor: pointer; }

.uc-video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--pc-surface);
  z-index: 1;
}

.uc-video.is-playing .uc-video-play { opacity: 0; pointer-events: none; }

/* ---- pricing ------------------------------------------------------------- */

.uc-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-11);
  align-items: start;
}

.uc-pricing .ds-card { background: var(--pc-surface); }
.uc-pricing .ds-card .ds-btn { align-self: flex-start; }
.uc-pricing-aside { display: flex; flex-direction: column; gap: var(--space-7); padding-top: var(--space-6); }
.uc-pricing-aside .ds-body { margin: 0; }

/* ---- FAQ ----------------------------------------------------------------- */

.uc-faq { display: flex; flex-direction: column; }

.uc-faq-item { border-bottom: var(--bw-hairline) solid var(--pc-border); }
.uc-faq-item:last-child { border-bottom: 0; }

.uc-faq-item summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-7) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}

.uc-faq-item summary::-webkit-details-marker { display: none; }

.uc-faq-item summary::before {
  content: '>';
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--pc-accent-mint);
  transition: transform 0.2s ease;
}

.uc-faq-item[open] summary::before { transform: rotate(90deg); }
.uc-faq-item .ds-body { margin: 0 0 var(--space-8) calc(var(--space-6) + 0.5em); max-width: var(--measure-prose); }

/* ---- closing & sticky CTA ------------------------------------------------ */

.uc-closing { text-align: center; }
.uc-closing h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: var(--ls-tightest);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.uc-closing .lp-actions { justify-content: center; margin-top: var(--space-9); }

.uc-sticky {
  display: none;
  position: fixed;
  left: var(--gutter-mobile);
  right: var(--gutter-mobile);
  bottom: var(--gutter-mobile);
  z-index: 40;
  text-align: center;
}

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .uc-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); padding-top: calc(var(--space-14) + var(--space-6)); padding-bottom: var(--space-11); }
  .uc-phone { justify-self: center; }
  .uc-hero-visual { justify-self: center; max-width: 360px; }
  .uc-split, .uc-pricing { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .uc-sticky.is-visible { display: block; }
  body { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-gif-typing i { animation: none; }
  [data-scene] [data-t].is-on { animation: none; }
  .uc-faq-item summary::before { transition: none; }
}