/* =====================================================================
   LARINA — AR demo page
   Depends on larina.css for tokens. Mirrors try.css's card/hero patterns
   but built around one big embedded iframe instead of an upload flow.
   ===================================================================== */

.ardemo { padding-block: clamp(34px, 5vw, 60px) clamp(64px, 8vw, 100px); }
.ardemo__col { max-width: 900px; }

.ardemo-head { margin-bottom: 26px; }
.ardemo-head h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.1rem);
  margin: 18px 0 16px;
}
.ardemo-head .lead { margin-bottom: 18px; }

/* .chip / .chip-row / .badge already come from larina.css. */

/* ---------------------------------------------------------------------
   the embed itself
   --------------------------------------------------------------------- */
.ardemo-frame {
  background: var(--surface);
  border: var(--hair-soft);
  border-radius: var(--radius-lg);
  padding: clamp(10px, 2vw, 16px);
  box-shadow: var(--lift-1);
}

/* A live app, not a static image — reserve a tall, phone-app-shaped box
   on mobile (where most shoppers will actually use the camera) and a
   wide desktop box that leaves room for the QR "use your phone" pairing
   flow the studio itself offers. */
.ardemo-frame__ratio {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 78vh;
  border-radius: calc(var(--radius-lg) - 8px);
  overflow: hidden;
  background: #F4F4F6;
}
@media (min-width: 720px) {
  .ardemo-frame__ratio { aspect-ratio: 16 / 10; max-height: 720px; }
}
.ardemo-frame__ratio iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.ardemo-frame__caption {
  margin: 12px 4px 2px;
  color: var(--ink-mute);
  font-size: 0.82rem;
}

/* ---------------------------------------------------------------------
   bottom CTA — same visual weight as /try/'s store__cta
   --------------------------------------------------------------------- */
.ardemo-cta {
  margin-top: clamp(48px, 7vw, 84px);
  padding: clamp(36px, 5vw, 56px);
  border-radius: var(--radius-lg);
  background: var(--navy-deep);
  color: #fff;
  text-align: center;
}
.ardemo-cta h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  margin-bottom: 10px;
}
.ardemo-cta p {
  color: rgba(255,255,255,0.76);
  max-width: 52ch;
  margin: 0 auto 22px;
}