/* Case study demos (js/case-demo.js): a phone or a browser window showing real screens, driven by the grey touch dot. */
.cd-grp { margin-top: 48px; }
.cd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.cd-pair.ph2 { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: start; }
.cd-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 72px; align-items: center; margin-top: 48px; }
.cd-row > .reasons, .cd-row > .ba { margin-top: 0; } .cd-row > .reasons { grid-template-columns: 1fr; }
.cd-item h3 { font-size: 15px; font-weight: 500; color: #6e6e73; margin: 0 0 22px; line-height: 1.4; }
.cd-note { min-height: 44px; margin: 22px 0 0; font-size: 16px; line-height: 1.4; color: #000; max-width: 34ch; }
.cd-res { min-height: 22px; margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: #6e6e73; opacity: 0; transition: opacity .4s; max-width: 34ch; } .cd-res.on { opacity: 1; }
.cd-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 14px; color: #6e6e73; } .cd-stats b { color: #000; font-weight: 500; font-variant-numeric: tabular-nums; }

/* the phone: 390 x 844, drawn at --k */
.cd-ph { --k: .72; width: calc(390px * var(--k)); height: calc(844px * var(--k)); position: relative; }
.cd-ph > [data-cd], .cd-ph > .cd-real { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden;
  border-radius: 54px; background: #fff; box-shadow: 0 0 0 11px #111, 0 0 0 12px #3a3a3c, 0 30px 60px -20px rgba(0,0,0,.35); }
.cd-st { position: absolute; inset: 0 0 auto; height: 47px; z-index: 4; background: #fff; display: flex; align-items: center; padding: 0 34px; font: 600 16px/1 -apple-system, "SF Pro Text", sans-serif; color: #000; }
.cd-st i { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.cd-ph .cd-vp { position: absolute; left: 0; top: 47px; width: 390px; height: 664px; overflow: hidden; background: var(--cd-bg, #9c1d54); }
.cd-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 133px; z-index: 4; background: rgba(246,246,246,.96); border-top: 1px solid #d9d9d9;
  display: flex; align-items: flex-start; justify-content: center; gap: 14px; padding-top: 12px; font: 400 16px/1 -apple-system, sans-serif; }
.cd-bar .cd-url { flex: 0 1 270px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); display: grid; place-items: center; color: #000; }
.cd-tabs { width: 30px; height: 30px; margin-top: 7px; border: 2px solid #007aff; border-radius: 7px; color: #007aff; display: grid; place-items: center; font: 600 14px/1 -apple-system, sans-serif; transition: transform .3s; }
.cd-tabs.pulse { transform: scale(1.35); background: #007aff; color: #fff; }
.cd-ph .cd-real iframe { position: absolute; left: 0; top: 47px; width: 980px; height: 1669px; border: 0; transform: scale(.398); transform-origin: 0 0; }
.cd-real { background: #9c1d54 !important; }

/* the browser: 1440 x 956, scaled to its box by the script (--k) */
.cd-bw { position: relative; width: 100%; aspect-ratio: 1440 / 956; }
.cd-bw > [data-cd], .cd-bw > .cd-real { --k: .4; position: absolute; left: 0; top: 0; width: 1440px; height: 956px; transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden;
  border-radius: 22px; background: #fff; box-shadow: 0 0 0 2px #d9d9d9, 0 40px 80px -30px rgba(0,0,0,.35); }
.cd-top { position: absolute; inset: 0 0 auto; height: 56px; z-index: 4; background: #f2f2f2; border-bottom: 1px solid #ddd; display: flex; align-items: center; gap: 18px; padding: 0 22px; font: 400 17px/1 -apple-system, sans-serif; color: #000; }
.cd-lights { display: flex; gap: 9px; } .cd-lights i { width: 14px; height: 14px; border-radius: 50%; background: #d0d0d0; }
.cd-tab { height: 38px; padding: 0 22px; display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cd-top .cd-url { flex: 1; max-width: 640px; margin: 0 auto; height: 36px; border-radius: 10px; background: #e6e6e6; display: grid; place-items: center; color: #444; }
.cd-bw .cd-vp { position: absolute; left: 0; top: 56px; width: 1440px; height: 900px; overflow: hidden; background: #fff; }
.cd-bw.real { aspect-ratio: 1100 / 816; } .cd-bw > .cd-real { width: 1100px; height: 816px; }
.cd-bw .cd-real iframe { position: absolute; left: 0; top: 56px; width: 1100px; height: 760px; border: 0; }
.cd-pair.tryd { grid-template-columns: 1.35fr 1fr; gap: 48px; }

/* pages and tabs */
.cd-tabp { position: absolute; inset: 0; background: #fff; transition: transform .6s cubic-bezier(.3,.7,.2,1), opacity .5s; }
.cd-tabp.in { opacity: 0; } .cd-tabp.down { transform: translateY(100%); transition-duration: .9s; } .cd-tabp.fresh { transform: translateY(105%); } .cd-tabp.away { transform: scale(.86); opacity: .3; }
.cd-pg { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .75s cubic-bezier(.4,0,.2,1); background: var(--cd-bg, #9c1d54); }
.cd-pg.now { transition: none; } .cd-pg > img, .cd-pg > video { width: 100%; height: 100%; display: block; }
.cd-pin { position: absolute; left: 0; top: 0; width: 100%; z-index: 3; pointer-events: none; }   /* a site's own top bar, pinned while the page scrolls */
.cd-hl { position: absolute; background: rgba(0,122,255,.3); }
.cd-ghost { position: absolute; left: 332px; top: 10px; width: 775px; height: 890px; background: url(/img/case/anna/try/old-d-home.webp) -332px -10px / 1440px 900px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.cd-ghost.on { opacity: .45; }

/* the site's grey touch dot (css/app-demo.css .tp) */
.cd-dot { position: absolute; z-index: 6; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(60,60,67,.38); box-shadow: 0 0 0 2px #fff;
  opacity: 0; transform: scale(.6); transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1), opacity .25s, transform .2s; pointer-events: none; }
.cd-bw .cd-dot { width: 70px; height: 70px; margin: -35px 0 0 -35px; box-shadow: 0 0 0 3px #fff; }
.cd-dot.on { opacity: 1; transform: scale(1); } .cd-dot.down { transform: scale(.78); background: rgba(60,60,67,.55); }
.cd-pop { position: absolute; z-index: 5; left: 20px; right: 20px; bottom: 150px; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.3);
  font: 400 16px/1.35 -apple-system, sans-serif; color: #000; opacity: 0; transform: translateY(16px); transition: .35s; pointer-events: none; }
.cd-pop.on { opacity: 1; transform: none; } .cd-pop b { display: block; font-weight: 600; margin-bottom: 4px; } .cd-pop span { color: #6e6e73; display: block; }
.cd-pop em { display: block; margin-top: 12px; font-style: normal; color: #007aff; font-weight: 600; }
.cd-pop.win { top: 160px; bottom: auto; min-height: 260px; border-radius: 10px; border-top: 28px solid #dcdcdc; }
.cd-pop.big { left: 50%; right: auto; bottom: auto; top: 300px; width: 560px; margin-left: -280px; font-size: 26px; padding: 30px 34px; }

/* phone-only and computer-only versions of the same demo */
.cd-only-ph { display: none; }
@media (max-width: 767px) {
  .cd-only-ph { display: block; } .cd-only-d { display: none; }
  .cd-pair { gap: 40px; } .cd-pair.bw2 { grid-template-columns: 1fr; }
  .cd-pair.ph2 { grid-template-columns: 1fr 1fr; gap: 14px; } .cd-pair.ph2 .cd-ph { --k: .42; }
  .cd-pair.ph2 .cd-note { font-size: 14px; min-height: 60px; } .cd-pair.ph2 .cd-stats { font-size: 12px; gap: 2px 8px; } .cd-pair.ph2 .cd-res { font-size: 13px; }
  .cd-pair.ph2 .cd-item h3 { margin-bottom: 14px; font-size: 13px; }
  .cd-row { grid-template-columns: 1fr; gap: 32px; } .cd-row > .cd-item { justify-self: center; }
}
@media (max-width: 360px) { .cd-pair.ph2 .cd-ph { --k: .355; } .cd-pair.ph2 { gap: 10px; } }
@media (max-width: 767px) { .cd-pair.tryp { grid-template-columns: 1fr; justify-items: center; gap: 56px; } }
/* Safari counts a scaled screen's full 390/1440px layout box as page width; clip sideways only, with room for the shadows */
.cd-grp, .cd-row { overflow-x: clip; overflow-y: visible; margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; }
@media (max-width: 767px) { .cd-grp, .cd-row { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } }
/* a live edit whose "after" is a screen recording (le-wide): the stage takes the recording's 16:10 shape, so nothing is cropped */
.ve .le-wide .le-stage { height: auto; aspect-ratio: 1440 / 900; }
.ve .le-wide .le-new video { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.ve .got.g9 { grid-template-columns: repeat(3, 1fr); row-gap: 48px; } @media (max-width: 991px) { .ve .got.g9 { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .ve .got.g9 { grid-template-columns: 1fr; row-gap: 32px; } }