/* One look for every store-listing card: 1600x900, the real chat large on the right, the benefit on the left. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 1600px; height: 900px; overflow: hidden; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  background:
    radial-gradient(1000px 700px at 55% 40%, rgba(96, 170, 235, .45), transparent 65%),
    linear-gradient(160deg, #1c6cb4 0%, #2379c2 50%, #1d6aae 100%);
  display: flex;
  align-items: center;
  padding: 0 96px;
  gap: 64px;
  position: relative; isolation: isolate;   /* so the watermark below sits over the background, under everything else */
}

/* The PERSONAIZER mark, large and faded in the middle of every card; its edges dissolve into the background. */
body::before {
  content: '';
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 600px; height: 600px; transform: translate(-50%, -50%);
  background: url('assets/logo-watermark.svg') center / contain no-repeat;
  opacity: .12;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  pointer-events: none;
}

.copy { flex: 0 0 600px; }

.eyebrow {
  display: inline-block;
  font-size: 18px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #e3eefa;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 8px 16px; border-radius: 999px;
  margin-bottom: 28px;
}

h1 { font-size: 64px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }

.sub { margin-top: 24px; font-size: 26px; line-height: 1.45; color: #e3eefa; max-width: 560px; }

ul { list-style: none; margin-top: 36px; display: grid; gap: 18px; }
li { display: flex; align-items: center; gap: 14px; font-size: 24px; font-weight: 500; }
li::before {
  content: '';
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: #22c55e url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat;
}

.stage { flex: 1; position: relative; height: 100%; display: flex; align-items: center; justify-content: flex-end; }

/* The real chat panel. The frame rounds and shadows it; the image inside overhangs by 4px so the page pixels the
   capture caught at the panel's edges are cut off. */
.chat {
  height: 792px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(2, 6, 23, .45), 0 0 0 1px rgba(255, 255, 255, .08);
}
.chat img { display: block; height: 800px; margin: -4px; }

/* Before -> after: the shopper's own photo, pointing at what the persona made of it. */
.before {
  position: absolute; left: 0; top: 135px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.before img { width: 200px; height: 200px; object-fit: cover; object-position: top; border-radius: 20px;
  box-shadow: 0 20px 40px rgba(2, 6, 23, .4); }
.before span { font-size: 19px; font-weight: 600; color: #dbeafe; }
.arrow { position: absolute; left: 214px; top: 220px; width: 110px; height: 30px; z-index: 2; }