.home-banner-section .banner-blog-right.roadmap-card {
  display: flex;
  align-self: flex-start; /* hug the content instead of stretching to the left column */
  padding: 0;
  background: #c9d3c3; /* sage, matches the photo while it loads */
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  color: #000;
  overflow: hidden;
}

.roadmap-card .rc-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  color: inherit;
  text-decoration: none;
}
/* The theme animates every link property for 0.3s; the card's layout must never animate */
.roadmap-card .rc-link { transition: none; }
.roadmap-card .rc-link:focus-visible { outline: 2px solid #000; outline-offset: -4px; }

/* Urbanist only. This out-specifies every font-family the theme sets. */
.home-banner-section .banner-blog-right.roadmap-card.roadmap-card,
.home-banner-section .banner-blog-right.roadmap-card.roadmap-card * {
  font-family: "Urbanist", sans-serif;
}

/* Tablet and phone: the theme turns this slot into a full-width row */
@media (max-width: 991px) {
  .home-banner-section .banner-blog-right.roadmap-card { display: flex; width: 100%; padding: 0; }
}

/* ================= Story Photo 2: the Growth Roadmap story over a desk photo, every word on a white card. One 22.75s loop:
   1. one white card: the title and price build in;
   2. the title lifts out and "How it works" builds into the same card, and the small title appears as a pill above;
   3. Week 1 fills that same card; Weeks 2 to 4 land on top as a deck (no timeline);
   4. the Week 4 card grows into a shorter end card with the photo framing it, the button lands and gets clicked once;
   5. the end card shrinks back into the opening card's shape, so the loop restarts on the same card. CSS only. ================= */

.pq { --pq-top: 76px; --pq-h: 228px; --pq-bot: 54px; --pq-lift: 11px; --pq-side: 22px; --pq-end-side: 14px; --pql: 22.75s; --ink: #1d1d1f; --lime: #e7fa47; --deep: #344205; position: relative; width: 100%; height: 358px; overflow: hidden; color: var(--ink); }
/* the desk photo, drifting very slowly like a camera move */
.pq::before { content: ""; position: absolute; inset: -6%; background: #c9d3c3 url('../images/story-desk.jpg') center / cover no-repeat; animation: pq-drift 26s ease-in-out infinite alternate; }
/* tablet: the theme stretches the card into a wide row, so it gets the landscape photo with objects along the sides */
@media (min-width: 480px) and (max-width: 991px) {
  .pq::before { background-image: url('../images/story-desk-wide.jpg'); }
  /* cards keep a comfortable reading width (440px), centred on the photo, and the week titles set on two lines at the same 26px;
     the end card is a little wider, like on desktop */
  .pq { --pq-side: max(22px, calc(50% - 220px)); --pq-end-side: max(14px, calc(50% - 234px)); }
  .pq .pq-txt .pq-big.pq-big3 { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; }
  .pq .pq-txt .pq-big.pq-big2 { position: static; visibility: visible; }
  /* two-line content needs less height: a 196px card, centred (81px above and below), so the opening card needs no glide */
  .pq { --pq-top: 81px; --pq-h: 196px; --pq-bot: 81px; --pq-lift: 0px; }
  /* the strip is much wider than the photo, so zoom and drift less to keep more of it in frame */
  .pq::before { inset: -2%; animation-name: pq-drift-t; }
  .pq .pq-cardT .pq-tc .pq-t3 { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; }
  .pq .pq-cardT .pq-tc .pq-t2 { position: static; visibility: visible; }
}
@keyframes pq-drift-t { 0% { transform: scale(1) translate(-.6%, 0); } 100% { transform: scale(1.02) translate(.6%, 0); } }
@keyframes pq-drift { 0% { transform: scale(1.02) translate(-1.2%, -1%); } 100% { transform: scale(1.07) translate(1.2%, 1%); } }
.pq svg { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pq svg * { stroke-dasharray: 1; }
.pq-ln { display: block; overflow: hidden; padding: .06em 0 .24em; margin: -.06em 0 -.24em; }
.pq-w { display: block; font-size: 33px; line-height: 36px; font-weight: 700; letter-spacing: -.035em; transform-origin: 50% 100%; will-change: transform; }
.pq-g .pq-w { color: #8e8e93; }
.pq-lab { font-size: 10px; line-height: 14px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; color: #8e8e93; white-space: nowrap; }

/* the small title pill, shown above the deck once the title has left the card */
.pq-eye { position: absolute; left: 0; right: 0; top: 16px; width: max-content; margin: 0 auto; padding: 5px 12px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.08); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .02em; color: #8e8e93; opacity: 0; z-index: 2; }

/* One card shape for the title, How it works and every week */
.pq-deck { position: absolute; left: var(--pq-side); right: var(--pq-side); top: var(--pq-top); height: var(--pq-h); z-index: 1; }
.pq-card { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px 14px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 26px rgba(0,0,0,.10); transform-origin: 50% 0; opacity: 0; box-sizing: border-box; }
.pq-cardT { z-index: 0; } .pq-card0 { z-index: 1; } .pq-card1 { z-index: 2; } .pq-card2 { z-index: 3; } .pq-card3 { z-index: 4; }
.pq-tc, .pq-hc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 14px; }
.pq-tico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px; background: var(--lime); opacity: 0; }
.pq-tico svg { width: 24px; height: 24px; fill: var(--deep); stroke: var(--deep); stroke-width: .9; overflow: hidden; }
.pq-tico .pq-arr { stroke-dasharray: none; transform-box: fill-box; transform-origin: 50% 100%; }
.pq-tc .pq-w { font-size: 30px; line-height: 33px; }
.pq-price { margin: 12px 0 0; font-size: 13px; line-height: 18px; font-weight: 500; color: #6e6e73; opacity: 0; }
.pq-hc .pq-lab { margin-bottom: 10px; opacity: 0; }
.pq-hc .pq-w { font-size: 26px; line-height: 29px; letter-spacing: -.02em; }
/* the four weeks as a strip of tiles; they fill with lime in order, the way the weeks will */
.pq-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: 18px; opacity: 0; }
.pq-strip i { display: grid; place-items: center; height: 34px; border-radius: 9px; font-style: normal; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .1em; background-color: #f0f0f2; color: #8e8e93; }
.pq-fmt { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; line-height: 16px; font-weight: 600; color: #6e6e73; opacity: 0; }
.pq-ci { width: 14px; height: 14px; stroke: #6e6e73; }
.pq-top { display: flex; align-items: center; justify-content: space-between; }
.pq-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--lime); }
.pq-ico svg, .pq-badge svg { stroke: var(--deep); }
.pq-ico svg { width: 18px; height: 18px; }
.pq-badge svg * { stroke-dashoffset: 1; }
.pq-ico svg * { stroke-dashoffset: 0; }
.pq-txt { position: relative; display: block; margin: auto 0; padding-left: 16px; }
.pq-txt::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--lime); transform-origin: 50% 0; }
.pq-bl { display: block; overflow: hidden; padding: .06em 0 .24em; margin: -.06em 0 -.24em; }
.pq-bw { display: block; transform-origin: 0 100%; will-change: transform; }
/* Both title versions stay rendered so their animations never restart when the browser crosses the tablet breakpoint;
   the inactive one is taken out of the layout and made invisible, never display: none. */
.pq-t3, .pq-t2 { display: block; }
.pq .pq-big.pq-big2, .pq .pq-tc .pq-t2 { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; }
.pq-big { display: block; margin: 0; font-size: 26px; line-height: 29px; font-weight: 700; letter-spacing: -.02em; }
.pq-card3c { display: flex; flex-direction: column; flex: 1; }

/* End card: revealed by clip-path from the Week 4 card's exact shape; the wrapper's drop-shadow follows the clip */
.pq-panelw { position: absolute; inset: 0; z-index: 6; filter: drop-shadow(0 10px 22px rgba(0,0,0,.12)) drop-shadow(0 1px 2px rgba(0,0,0,.06)); pointer-events: none; }
.pq-panel { position: absolute; inset: 0; background: #fff; opacity: 0; }
.pq-end { position: absolute; left: var(--pq-end-side); right: var(--pq-end-side); top: 14px; height: 330px; z-index: 7; text-align: center; }
.pq-badge { position: absolute; left: 50%; top: 40px; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: var(--lime); opacity: 0; }
.pq-badge svg { width: 26px; height: 26px; stroke-width: 2; }
.pq-head { position: absolute; left: 8px; right: 8px; top: 94px; }
.pq-head .pq-w { font-size: 34px; line-height: 38px; }
.pq-sub { position: absolute; left: 14px; right: 14px; top: 182px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: #6e6e73; text-wrap: balance; opacity: 0; }
.pq-sub b { font-weight: 600; color: var(--ink); }
.pq-cta { position: absolute; left: 14px; right: 14px; bottom: 16px; height: 44px; opacity: 0; }
.pq-ctab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-radius: 999px; background: #000; color: #fff; font-size: 15px; line-height: 22px; font-weight: 600; }
.pq-arw { width: 12px; height: 12px; filter: brightness(0) invert(1); }
.pq-ring { position: absolute; inset: 0; border-radius: 999px; border: 2px solid #000; opacity: 0; pointer-events: none; }

.pq .pq-a1 { animation: pq-a1 var(--pql) linear infinite; }
.pq .pq-a2 { animation: pq-a2 var(--pql) linear infinite; }
.pq .pq-a3 { animation: pq-a3 var(--pql) linear infinite; }
.pq .pq-tb1 { animation: pq-tb1 var(--pql) linear infinite; }
.pq .pq-tb2 { animation: pq-tb2 var(--pql) linear infinite; }
.pq .pq-price { animation: pq-price var(--pql) linear infinite; }
.pq .pq-tico { animation: pq-tico var(--pql) linear infinite; }
.pq .pq-tico .pq-arr:nth-child(1) { animation: pq-arr0 var(--pql) linear infinite; }
.pq .pq-tico .pq-arr:nth-child(2) { animation: pq-arr1 var(--pql) linear infinite; }
.pq .pq-tico .pq-arr:nth-child(3) { animation: pq-arr2 var(--pql) linear infinite; }
.pq .pq-hlab { animation: pq-hlab var(--pql) linear infinite; }
.pq .pq-h1 { animation: pq-h1 var(--pql) linear infinite; }
.pq .pq-h2 { animation: pq-h2 var(--pql) linear infinite; }
.pq .pq-strip { animation: pq-strip var(--pql) linear infinite; }
.pq .pq-st0 { animation: pq-st0 var(--pql) linear infinite; }
.pq .pq-st1 { animation: pq-st1 var(--pql) linear infinite; }
.pq .pq-st2 { animation: pq-st2 var(--pql) linear infinite; }
.pq .pq-st3 { animation: pq-st3 var(--pql) linear infinite; }
.pq .pq-fmt { animation: pq-fmt var(--pql) linear infinite; }
.pq .pq-eye { animation: pq-eye var(--pql) linear infinite; }
.pq .pq-card.pq-cardT { animation: pq-cardT var(--pql) linear infinite; }
.pq .pq-card.pq-card0 { animation: pq-card0 var(--pql) linear infinite; }
.pq .pq-txt0::before { animation: pq-bar0 var(--pql) linear infinite; }
.pq .pq-wl00 { animation: pq-wl00 var(--pql) linear infinite; }
.pq .pq-wl01 { animation: pq-wl01 var(--pql) linear infinite; }
.pq .pq-wl02 { animation: pq-wl02 var(--pql) linear infinite; }
.pq .pq-wt00 { animation: pq-wt00 var(--pql) linear infinite; }
.pq .pq-wt01 { animation: pq-wt01 var(--pql) linear infinite; }
.pq .pq-card.pq-card1 { animation: pq-card1 var(--pql) linear infinite; }
.pq .pq-txt1::before { animation: pq-bar1 var(--pql) linear infinite; }
.pq .pq-wl10 { animation: pq-wl10 var(--pql) linear infinite; }
.pq .pq-wl11 { animation: pq-wl11 var(--pql) linear infinite; }
.pq .pq-wl12 { animation: pq-wl12 var(--pql) linear infinite; }
.pq .pq-wt10 { animation: pq-wt10 var(--pql) linear infinite; }
.pq .pq-wt11 { animation: pq-wt11 var(--pql) linear infinite; }
.pq .pq-card.pq-card2 { animation: pq-card2 var(--pql) linear infinite; }
.pq .pq-txt2::before { animation: pq-bar2 var(--pql) linear infinite; }
.pq .pq-wl20 { animation: pq-wl20 var(--pql) linear infinite; }
.pq .pq-wl21 { animation: pq-wl21 var(--pql) linear infinite; }
.pq .pq-wl22 { animation: pq-wl22 var(--pql) linear infinite; }
.pq .pq-wt20 { animation: pq-wt20 var(--pql) linear infinite; }
.pq .pq-wt21 { animation: pq-wt21 var(--pql) linear infinite; }
.pq .pq-card.pq-card3 { animation: pq-card3 var(--pql) linear infinite; }
.pq .pq-txt3::before { animation: pq-bar3 var(--pql) linear infinite; }
.pq .pq-wl30 { animation: pq-wl30 var(--pql) linear infinite; }
.pq .pq-wl31 { animation: pq-wl31 var(--pql) linear infinite; }
.pq .pq-wl32 { animation: pq-wl32 var(--pql) linear infinite; }
.pq .pq-wt30 { animation: pq-wt30 var(--pql) linear infinite; }
.pq .pq-wt31 { animation: pq-wt31 var(--pql) linear infinite; }
.pq .pq-card3c { animation: pq-card3c var(--pql) linear infinite; }
.pq .pq-panel { animation: pq-panel var(--pql) linear infinite; }
.pq .pq-badge { animation: pq-badge var(--pql) linear infinite; }
.pq .pq-badge svg * { animation: pq-bdraw var(--pql) linear infinite; }
.pq .pq-c1 { animation: pq-c1 var(--pql) linear infinite; }
.pq .pq-c2 { animation: pq-c2 var(--pql) linear infinite; }
.pq .pq-sub { animation: pq-sub var(--pql) linear infinite; }
.pq .pq-cta { animation: pq-cta var(--pql) linear infinite; }
.pq .pq-ctab { animation: pq-press var(--pql) linear infinite; }
.pq .pq-ring { animation: pq-ring var(--pql) linear infinite; }
.pq .pq-arw { animation: pq-arw var(--pql) linear infinite; }
@keyframes pq-a1 { 0.0% { transform: translateY(180%) rotate(4deg); } 1.099% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 5.275% { transform: none; } 14.505% { transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 16.044% { transform: translateY(-180%) rotate(-3deg); } 100.0% { transform: translateY(-180%) rotate(-3deg); } }
@keyframes pq-a2 { 0.0% { transform: translateY(180%) rotate(4deg); } 1.626% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 5.802% { transform: none; } 14.681% { transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 16.22% { transform: translateY(-180%) rotate(-3deg); } 100.0% { transform: translateY(-180%) rotate(-3deg); } }
@keyframes pq-a3 { 0.0% { transform: translateY(180%) rotate(4deg); } 2.154% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 6.33% { transform: none; } 14.857% { transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 16.396% { transform: translateY(-180%) rotate(-3deg); } 100.0% { transform: translateY(-180%) rotate(-3deg); } }
@keyframes pq-tb1 { 0.0% { transform: translateY(180%) rotate(4deg); } 1.099% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 5.275% { transform: none; } 14.505% { transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 16.044% { transform: translateY(-180%) rotate(-3deg); } 100.0% { transform: translateY(-180%) rotate(-3deg); } }
@keyframes pq-tb2 { 0.0% { transform: translateY(180%) rotate(4deg); } 1.626% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 5.802% { transform: none; } 14.681% { transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 16.22% { transform: translateY(-180%) rotate(-3deg); } 100.0% { transform: translateY(-180%) rotate(-3deg); } }
@keyframes pq-price { 0.0% { opacity: 0; transform: translateY(8px); } 3.956% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16,1,.3,1); } 7.033% { opacity: 1; transform: none; } 14.505% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 15.604% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: translateY(8px); } }
@keyframes pq-tico { 0.0% { opacity: 0; transform: scale(.7); } 0.22% { opacity: 0; transform: scale(.7); animation-timing-function: cubic-bezier(.34,1.56,.64,1); } 1.978% { opacity: 1; transform: none; } 14.505% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 15.604% { opacity: 0; transform: translateY(-6px); } 100.0% { opacity: 0; transform: scale(.7); } }
@keyframes pq-arr0 { 0.0% { transform: translateY(105%); } 1.099% { transform: translateY(105%); animation-timing-function: cubic-bezier(.34,1.56,.64,1); } 3.736% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(105%); } }
@keyframes pq-arr1 { 0.0% { transform: translateY(105%); } 1.626% { transform: translateY(105%); animation-timing-function: cubic-bezier(.34,1.56,.64,1); } 4.264% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(105%); } }
@keyframes pq-arr2 { 0.0% { transform: translateY(105%); } 2.154% { transform: translateY(105%); animation-timing-function: cubic-bezier(.34,1.56,.64,1); } 4.791% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(105%); } }
@keyframes pq-hlab { 0.0% { opacity: 0; transform: translateY(8px); } 16.484% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16,1,.3,1); } 19.56% { opacity: 1; transform: none; } 31.868% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 32.747% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: translateY(8px); } }
@keyframes pq-h1 { 0.0% { transform: translateY(180%) rotate(4deg); } 16.923% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 21.099% { transform: none; } 31.868% { transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 33.187% { transform: translateY(-180%) rotate(-3deg); } 100.0% { transform: translateY(-180%) rotate(-3deg); } }
@keyframes pq-h2 { 0.0% { transform: translateY(180%) rotate(4deg); } 17.363% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 21.538% { transform: none; } 32.0% { transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 33.319% { transform: translateY(-180%) rotate(-3deg); } 100.0% { transform: translateY(-180%) rotate(-3deg); } }
@keyframes pq-strip { 0.0% { opacity: 0; transform: translateY(8px); } 18.242% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16,1,.3,1); } 21.319% { opacity: 1; transform: none; } 31.868% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 32.747% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: translateY(8px); } }
@keyframes pq-st0 { 0.0% { background-color: #f0f0f2; color: #8e8e93; } 20.22% { background-color: #f0f0f2; color: #8e8e93; animation-timing-function: cubic-bezier(.16,1,.3,1); } 21.758% { background-color: var(--lime); color: var(--deep); } 99.912% { background-color: var(--lime); color: var(--deep); } 100.0% { background-color: #f0f0f2; color: #8e8e93; } }
@keyframes pq-st1 { 0.0% { background-color: #f0f0f2; color: #8e8e93; } 21.099% { background-color: #f0f0f2; color: #8e8e93; animation-timing-function: cubic-bezier(.16,1,.3,1); } 22.637% { background-color: var(--lime); color: var(--deep); } 99.912% { background-color: var(--lime); color: var(--deep); } 100.0% { background-color: #f0f0f2; color: #8e8e93; } }
@keyframes pq-st2 { 0.0% { background-color: #f0f0f2; color: #8e8e93; } 21.978% { background-color: #f0f0f2; color: #8e8e93; animation-timing-function: cubic-bezier(.16,1,.3,1); } 23.516% { background-color: var(--lime); color: var(--deep); } 99.912% { background-color: var(--lime); color: var(--deep); } 100.0% { background-color: #f0f0f2; color: #8e8e93; } }
@keyframes pq-st3 { 0.0% { background-color: #f0f0f2; color: #8e8e93; } 22.857% { background-color: #f0f0f2; color: #8e8e93; animation-timing-function: cubic-bezier(.16,1,.3,1); } 24.396% { background-color: var(--lime); color: var(--deep); } 99.912% { background-color: var(--lime); color: var(--deep); } 100.0% { background-color: #f0f0f2; color: #8e8e93; } }
@keyframes pq-fmt { 0.0% { opacity: 0; transform: translateY(8px); } 21.758% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16,1,.3,1); } 24.835% { opacity: 1; transform: none; } 31.868% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 32.747% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: translateY(8px); } }
@keyframes pq-eye { 0.0% { opacity: 0; transform: translateY(8px); } 15.385% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16,1,.3,1); } 18.022% { opacity: 1; transform: none; } 74.505% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 75.604% { opacity: 0; transform: translateY(8px); } 100.0% { opacity: 0; transform: translateY(8px); } }
@keyframes pq-cardT { 0.0% { opacity: 1; transform: translateY(calc(var(--pq-lift) * -1)); } 14.505% { opacity: 1; transform: translateY(calc(var(--pq-lift) * -1)); animation-timing-function: cubic-bezier(.65,0,.35,1); } 17.143% { opacity: 1; transform: translateY(0px) scale(1.00); } 33.275% { opacity: 1; transform: translateY(0px) scale(1.00); } 33.319% { opacity: 0; transform: translateY(0px) scale(1.00); } 99.604% { opacity: 0; transform: translateY(calc(var(--pq-lift) * -1)); } 99.648% { opacity: 1; transform: translateY(calc(var(--pq-lift) * -1)); } 100.0% { opacity: 1; transform: translateY(calc(var(--pq-lift) * -1)); } }
@keyframes pq-card0 { 0.0% { opacity: 0; transform: none; } 33.143% { opacity: 0; transform: none; } 33.187% { opacity: 1; transform: translateY(0px) scale(1.00); } 43.516% { opacity: 1; transform: translateY(0px) scale(1.00); animation-timing-function: cubic-bezier(.16,1,.3,1); } 46.154% { opacity: 1; transform: translateY(-7px) scale(0.95); } 53.846% { opacity: 1; transform: translateY(-7px) scale(0.95); animation-timing-function: cubic-bezier(.16,1,.3,1); } 56.484% { opacity: 1; transform: translateY(-14px) scale(0.90); } 64.176% { opacity: 1; transform: translateY(-14px) scale(0.90); animation-timing-function: cubic-bezier(.16,1,.3,1); } 66.813% { opacity: 1; transform: translateY(-21px) scale(0.85); } 74.505% { opacity: 1; transform: translateY(-21px) scale(0.85); animation-timing-function: cubic-bezier(.65,0,.35,1); } 75.604% { opacity: 1; transform: none; } 75.648% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: none; } }
@keyframes pq-bar0 { 0.0% { transform: scaleY(0); } 33.407% { transform: scaleY(0); animation-timing-function: cubic-bezier(.16,1,.3,1); } 35.165% { transform: none; } 99.912% { transform: none; } 100.0% { transform: scaleY(0); } }
@keyframes pq-wl00 { 0.0% { transform: translateY(180%) rotate(4deg); } 34.418% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 37.275% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wl01 { 0.0% { transform: translateY(180%) rotate(4deg); } 34.769% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 37.626% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wl02 { 0.0% { transform: translateY(180%) rotate(4deg); } 35.121% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 37.978% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wt00 { 0.0% { transform: translateY(180%) rotate(4deg); } 34.418% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 37.275% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wt01 { 0.0% { transform: translateY(180%) rotate(4deg); } 34.857% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 37.714% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-card1 { 0.0% { opacity: 0; transform: translateY(36px) scale(.98); } 43.516% { opacity: 0; transform: translateY(36px) scale(.98); animation-timing-function: cubic-bezier(.16,1,.3,1); } 45.934% { opacity: 1; transform: translateY(0px) scale(1.00); } 53.846% { opacity: 1; transform: translateY(0px) scale(1.00); animation-timing-function: cubic-bezier(.16,1,.3,1); } 56.484% { opacity: 1; transform: translateY(-7px) scale(0.95); } 64.176% { opacity: 1; transform: translateY(-7px) scale(0.95); animation-timing-function: cubic-bezier(.16,1,.3,1); } 66.813% { opacity: 1; transform: translateY(-14px) scale(0.90); } 74.505% { opacity: 1; transform: translateY(-14px) scale(0.90); animation-timing-function: cubic-bezier(.65,0,.35,1); } 75.604% { opacity: 1; transform: none; } 75.648% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: translateY(36px) scale(.98); } }
@keyframes pq-bar1 { 0.0% { transform: scaleY(0); } 43.736% { transform: scaleY(0); animation-timing-function: cubic-bezier(.16,1,.3,1); } 45.495% { transform: none; } 99.912% { transform: none; } 100.0% { transform: scaleY(0); } }
@keyframes pq-wl10 { 0.0% { transform: translateY(180%) rotate(4deg); } 44.747% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 47.604% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wl11 { 0.0% { transform: translateY(180%) rotate(4deg); } 45.099% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 47.956% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wl12 { 0.0% { transform: translateY(180%) rotate(4deg); } 45.451% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 48.308% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wt10 { 0.0% { transform: translateY(180%) rotate(4deg); } 44.747% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 47.604% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wt11 { 0.0% { transform: translateY(180%) rotate(4deg); } 45.187% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 48.044% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-card2 { 0.0% { opacity: 0; transform: translateY(36px) scale(.98); } 53.846% { opacity: 0; transform: translateY(36px) scale(.98); animation-timing-function: cubic-bezier(.16,1,.3,1); } 56.264% { opacity: 1; transform: translateY(0px) scale(1.00); } 64.176% { opacity: 1; transform: translateY(0px) scale(1.00); animation-timing-function: cubic-bezier(.16,1,.3,1); } 66.813% { opacity: 1; transform: translateY(-7px) scale(0.95); } 74.505% { opacity: 1; transform: translateY(-7px) scale(0.95); animation-timing-function: cubic-bezier(.65,0,.35,1); } 75.604% { opacity: 1; transform: none; } 75.648% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: translateY(36px) scale(.98); } }
@keyframes pq-bar2 { 0.0% { transform: scaleY(0); } 54.066% { transform: scaleY(0); animation-timing-function: cubic-bezier(.16,1,.3,1); } 55.824% { transform: none; } 99.912% { transform: none; } 100.0% { transform: scaleY(0); } }
@keyframes pq-wl20 { 0.0% { transform: translateY(180%) rotate(4deg); } 55.077% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 57.934% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wl21 { 0.0% { transform: translateY(180%) rotate(4deg); } 55.429% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 58.286% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wl22 { 0.0% { transform: translateY(180%) rotate(4deg); } 55.78% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 58.637% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wt20 { 0.0% { transform: translateY(180%) rotate(4deg); } 55.077% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 57.934% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wt21 { 0.0% { transform: translateY(180%) rotate(4deg); } 55.516% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 58.374% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-card3 { 0.0% { opacity: 0; transform: translateY(36px) scale(.98); } 64.176% { opacity: 0; transform: translateY(36px) scale(.98); animation-timing-function: cubic-bezier(.16,1,.3,1); } 66.593% { opacity: 1; transform: translateY(0px) scale(1.00); } 75.516% { opacity: 1; transform: translateY(0px) scale(1.00); } 75.56% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: translateY(36px) scale(.98); } }
@keyframes pq-bar3 { 0.0% { transform: scaleY(0); } 64.396% { transform: scaleY(0); animation-timing-function: cubic-bezier(.16,1,.3,1); } 66.154% { transform: none; } 99.912% { transform: none; } 100.0% { transform: scaleY(0); } }
@keyframes pq-wl30 { 0.0% { transform: translateY(180%) rotate(4deg); } 65.407% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 68.264% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wl31 { 0.0% { transform: translateY(180%) rotate(4deg); } 65.758% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 68.615% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wl32 { 0.0% { transform: translateY(180%) rotate(4deg); } 66.11% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 68.967% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wt30 { 0.0% { transform: translateY(180%) rotate(4deg); } 65.407% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 68.264% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-wt31 { 0.0% { transform: translateY(180%) rotate(4deg); } 65.846% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 68.703% { transform: none; } 99.912% { transform: none; } 100.0% { transform: translateY(180%) rotate(4deg); } }
@keyframes pq-card3c { 0.0% { opacity: 1; } 74.505% { opacity: 1; animation-timing-function: cubic-bezier(.32,0,.67,0); } 75.165% { opacity: 0; } 99.912% { opacity: 0; } 100.0% { opacity: 1; } }
@keyframes pq-panel { 0.0% { clip-path: inset(var(--pq-top) var(--pq-side) var(--pq-bot) var(--pq-side) round 14px); opacity: 0; } 75.341% { clip-path: inset(var(--pq-top) var(--pq-side) var(--pq-bot) var(--pq-side) round 14px); opacity: 0; } 75.385% { clip-path: inset(var(--pq-top) var(--pq-side) var(--pq-bot) var(--pq-side) round 14px); opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); } 78.022% { clip-path: inset(14px var(--pq-end-side) 14px var(--pq-end-side) round 18px); opacity: 1; } 97.802% { clip-path: inset(14px var(--pq-end-side) 14px var(--pq-end-side) round 18px); opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); } 99.56% { clip-path: inset(calc(var(--pq-top) - var(--pq-lift)) var(--pq-side) calc(var(--pq-bot) + var(--pq-lift)) var(--pq-side) round 14px); opacity: 1; } 99.736% { clip-path: inset(calc(var(--pq-top) - var(--pq-lift)) var(--pq-side) calc(var(--pq-bot) + var(--pq-lift)) var(--pq-side) round 14px); opacity: 1; } 99.78% { clip-path: inset(calc(var(--pq-top) - var(--pq-lift)) var(--pq-side) calc(var(--pq-bot) + var(--pq-lift)) var(--pq-side) round 14px); opacity: 0; } 100.0% { clip-path: inset(var(--pq-top) var(--pq-side) var(--pq-bot) var(--pq-side) round 14px); opacity: 0; } }
@keyframes pq-badge { 0.0% { opacity: 0; transform: scale(.6); } 76.703% { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.34,1.56,.64,1); } 78.681% { opacity: 1; transform: none; } 96.923% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 98.022% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: scale(.6); } }
@keyframes pq-bdraw { 0.0% { stroke-dashoffset: 1; } 77.363% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); } 80.44% { stroke-dashoffset: 0; } 99.912% { stroke-dashoffset: 0; } 100.0% { stroke-dashoffset: 1; } }
@keyframes pq-c1 { 0.0% { transform: translateY(180%) rotate(4deg); } 77.582% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 81.758% { transform: none; } 96.923% { transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 98.242% { transform: translateY(-180%) rotate(-3deg); } 100.0% { transform: translateY(-180%) rotate(-3deg); } }
@keyframes pq-c2 { 0.0% { transform: translateY(180%) rotate(4deg); } 78.11% { transform: translateY(180%) rotate(4deg); animation-timing-function: cubic-bezier(.16,1,.3,1); } 82.286% { transform: none; } 96.923% { transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 98.242% { transform: translateY(-180%) rotate(-3deg); } 100.0% { transform: translateY(-180%) rotate(-3deg); } }
@keyframes pq-sub { 0.0% { opacity: 0; transform: translateY(8px); } 79.121% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16,1,.3,1); } 82.198% { opacity: 1; transform: none; } 96.923% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 98.022% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: translateY(8px); } }
@keyframes pq-cta { 0.0% { opacity: 0; transform: translateY(14px); } 80.659% { opacity: 0; transform: translateY(14px); animation-timing-function: cubic-bezier(.16,1,.3,1); } 84.176% { opacity: 1; transform: none; } 97.143% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.32,0,.67,0); } 98.242% { opacity: 0; transform: none; } 100.0% { opacity: 0; transform: translateY(14px); } }
@keyframes pq-press { 0.0% { transform: none; background-color: #000; } 89.89% { transform: none; background-color: #000; animation-timing-function: cubic-bezier(.4,0,1,1); } 90.418% { transform: scale(.95); background-color: #2b2b2b; animation-timing-function: cubic-bezier(.34,1.56,.64,1); } 91.868% { transform: none; background-color: #000; } 100.0% { transform: none; background-color: #000; } }
@keyframes pq-ring { 0.0% { opacity: 0; transform: scale(1); } 90.33% { opacity: 0; transform: scale(1); } 90.418% { opacity: .45; transform: scale(1); animation-timing-function: cubic-bezier(.16,1,.3,1); } 93.407% { opacity: 0; transform: scale(1.08, 1.35); } 100.0% { opacity: 0; transform: scale(1); } }
@keyframes pq-arw { 0.0% { transform: none; } 90.33% { transform: none; animation-timing-function: cubic-bezier(.16,1,.3,1); } 91.648% { transform: translate(3px, -3px); } 93.846% { transform: translate(3px, -3px); animation-timing-function: cubic-bezier(.65,0,.35,1); } 95.604% { transform: none; } 100.0% { transform: none; } }

/* Story Photo 2, reduced motion: the finished end card on the still photo */
@media (prefers-reduced-motion: reduce) {
  .pq *, .pq::before { animation: none !important; }
  .pq-eye, .pq-deck { display: none; }
  .pq-panel { opacity: 1; clip-path: inset(14px var(--pq-end-side) 14px var(--pq-end-side) round 18px); }
  .pq-badge, .pq-sub, .pq-cta { opacity: 1; }
  .pq-badge svg * { stroke-dashoffset: 0; }
  .pq-w { transform: none; }
}
/* ================= end Story Photo 2 ================= */