/* The live example screens inside the iPhone on the page for creators.
   Everything is sized in cqw, a share of the screen's own width, so a screen looks the same at any phone size.
   Resting states are the finished screen; the "not yet" states apply only with JavaScript (.js),
   so without it, or with reduced motion, every screen simply shows complete. creators.js adds
   is-playing to a screen when it scrolls into view and is-on to each part at its moment. */

.scr {
  position: absolute; left: 4.5%; top: 1.8%; width: 91%; height: 96.4%;
  border-radius: 13% / 6.4%; overflow: hidden; container-type: inline-size;
  background: #101010; color: #fff; font-family: var(--font-sans); line-height: 1.25; text-align: left;
}
.scr__in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3.4cqw; padding: 20cqw 6cqw 8cqw; font-size: 4.1cqw; }
:where(.scr) svg, :where(.scr) span, :where(.scr) img { display: block; }
/* the screens with little on them sit in the middle of the glass instead of hugging the top */
.scr--apply .scr__in, .scr--idea .scr__in, .scr--care .scr__in, .scr--checkout .scr__in, .scr--store .scr__in { justify-content: center; gap: 4.4cqw; padding-top: 14cqw; }

/* status bar, either side of the island */
.m-status { position: absolute; top: 5.1cqw; left: 9cqw; right: 8cqw; display: flex; justify-content: space-between; align-items: center; font-size: 4.2cqw; font-weight: 600; }
.m-status__icons { display: flex; align-items: center; gap: 1.6cqw; }
.m-status__icons svg { height: 3cqw; width: auto; fill: currentColor; }

/* type */
.m-h { font-size: 7.4cqw; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.m-h--s { font-size: 6.2cqw; }
.m-h--c { text-align: center; }
.m-sub { color: #9a9a9a; font-size: 3.9cqw; }
.m-h + .m-sub { margin-top: -2.2cqw; }
.m-over { font-size: 3.1cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8d8d8d; }
.m-fine { font-size: 3.2cqw; color: #8d8d8d; }
.m-fine--c { text-align: center; }

/* cards, fields, buttons */
.m-card { display: flex; flex-direction: column; gap: 2cqw; padding: 4.2cqw; border-radius: 4cqw; background: #1b1b1b; }
.m-field { display: flex; flex-direction: column; gap: 1.2cqw; padding: 3.4cqw 4cqw; border-radius: 3.6cqw; background: #1b1b1b; }
.m-field__l { font-size: 3.6cqw; font-weight: 600; }
.m-field__v { min-height: 1.25em; color: #bdbdbd; }
.m-input { flex: 1; min-height: 1.25em; padding: 2.8cqw 3.2cqw; border-radius: 2.6cqw; background: #2a2a2a; color: #cfcfcf; font-size: 3.8cqw; box-sizing: content-box; }
[data-type].is-typing::after {
  content: ""; display: inline-block; width: 0.5cqw; height: 1em; margin-left: 0.5cqw; vertical-align: -0.15em;
  background: #fa4616; animation: m-caret 0.7s steps(1) infinite;
}
.m-checkrow { display: flex; align-items: center; gap: 3cqw; font-size: 3.9cqw; font-weight: 600; }

.m-tick {
  display: grid; place-items: center; flex: none; width: 5.6cqw; height: 5.6cqw;
  border: 0.5cqw solid #fa4616; border-radius: 1.4cqw; background: #fa4616;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.m-tick svg { width: 72%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; transition: stroke-dashoffset 0.35s ease 0.1s; }
.m-tick--round { border-radius: 50%; }
.m-tick--s { width: 4.4cqw; height: 4.4cqw; }
.m-tick--green { background: #2fbf71; border-color: #2fbf71; }
.m-tick.is-on { animation: m-pop 0.45s var(--ease-out); }
.js .m-tick:not(.is-on) { background: transparent; border-color: #5a5a5a; }
.js .m-tick:not(.is-on) svg { stroke-dashoffset: 14; }

.m-btn { position: relative; overflow: hidden; padding: 3.8cqw; border-radius: 3.6cqw; background: #2fbf71; text-align: center; font-size: 4.6cqw; font-weight: 700; transition: background-color 0.35s ease; }
.m-btn--pulse, .js .m-btn:not(.is-on) { background: #fa4616; }
.m-btn--grey, .js .m-btn--grey:not(.is-on) { background: #2a2a2a; }
.m-btn__a { opacity: 0; transform: translateY(-60%); transition: opacity 0.25s ease, transform 0.4s var(--ease-out); }
.m-btn__b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; transition: opacity 0.3s ease, transform 0.4s var(--ease-out); }
.m-btn__b svg { width: 5cqw; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.m-btn--pulse .m-btn__a, .m-btn--grey .m-btn__a, .js .m-btn:not(.is-on) .m-btn__a { opacity: 1; transform: none; }
.js .m-btn:not(.is-on) .m-btn__b { opacity: 0; transform: translateY(60%); }
.m-btn--pulse.is-on { animation: m-pulse 1.8s ease-in-out infinite; }

/* step 2: questions become an idea */
.m-bubble { align-self: flex-start; padding: 3cqw 4.2cqw; border-radius: 5cqw; background: #2a2a2a; font-size: 3.9cqw; }
.m-arrow { align-self: center; width: 7cqw; color: #fa4616; }
.m-arrow svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.m-idea { display: flex; flex-direction: column; gap: 1.4cqw; padding: 4.5cqw; border: 0.6cqw solid #fa4616; border-radius: 4.5cqw; background: #1b1b1b; transition: border-color 0.6s ease; }
.js .m-idea:not(.is-on) { border-color: #3a3a3a; }
.m-idea__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; }
.m-idea__row .m-h { margin-bottom: 1.2cqw; }
.m-idea__price { flex: none; padding: 1.4cqw 3cqw; border-radius: 2.4cqw; background: #fa4616; font-size: 4.6cqw; font-weight: 700; }

/* step 3: the product page, cover on top, price and Join under it */
.m-hero { position: relative; flex: none; }
.m-cover { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4cqw; }
.m-badge {
  position: absolute; left: 2.6cqw; top: 2.6cqw; display: flex; align-items: center; gap: 1.6cqw; padding: 1.6cqw 3cqw 1.6cqw 1.8cqw;
  border-radius: 6cqw; background: #101010; font-size: 3.2cqw; font-weight: 700; transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
}
.js .m-badge:not(.is-on) { opacity: 0; transform: translateY(-2cqw) scale(0.9); }
.m-pricerow { display: flex; align-items: baseline; gap: 2.4cqw; }

/* step 4: the store */
.m-owner { display: flex; align-items: center; gap: 3cqw; }
.m-avatar { display: grid; place-items: center; flex: none; width: 11cqw; height: 11cqw; border-radius: 50%; background: #fa4616; font-size: 4.2cqw; font-weight: 700; }
.m-owner__n { font-size: 4.6cqw; font-weight: 700; }
.m-price { font-size: 6cqw; font-weight: 700; }
.m-item { flex-direction: row; align-items: center; gap: 3.4cqw; padding: 3cqw; transition: opacity 0.35s ease, transform 0.5s var(--ease-out); }
.js .m-item:not(.is-on) { opacity: 0; transform: translateY(5cqw); }
.m-item__b { flex: 1; min-width: 0; }
.m-item__t { font-size: 4.2cqw; font-weight: 700; }
.m-item__p { flex: none; padding: 1.6cqw 2.8cqw; border-radius: 2.4cqw; background: #2a2a2a; font-size: 3.8cqw; font-weight: 700; }
.m-perk { position: relative; padding-left: 5.4cqw; color: #b5b5b5; font-size: 3.6cqw; }
.m-perk::before { content: ""; position: absolute; left: 0.6cqw; top: 50%; width: 1.8cqw; height: 1.8cqw; margin-top: -0.9cqw; border-radius: 50%; background: #fa4616; }

/* step 5: checkout */
.m-line { flex-direction: row; align-items: center; gap: 3cqw; font-weight: 600; }
.m-line__t { flex: 1; }
.m-thumb { flex: none; width: 9cqw; height: 9cqw; border-radius: 2cqw; object-fit: cover; }
.m-thumb--l { width: 19cqw; height: 19cqw; border-radius: 3cqw; }
.m-total { font-size: 5.6cqw; font-weight: 700; }
.m-pay { gap: 2.4cqw; }
.m-pay__row { display: flex; gap: 2.4cqw; }

/* step 6: sales arriving on the lock screen */
.scr--sales { background: radial-gradient(120% 60% at 72% 56%, #c2410c 0%, #7c2d12 34%, #171717 72%); }
.m-lock { margin-top: 6cqw; text-align: center; }
.m-lock__date { font-size: 4.6cqw; font-weight: 500; }
.m-lock__time { font-size: 22cqw; font-weight: 200; line-height: 1; }
.m-notes { display: flex; flex-direction: column; gap: 2.4cqw; margin-top: auto; }
.m-note { display: flex; align-items: center; gap: 2.6cqw; padding: 3.2cqw; border-radius: 4.6cqw; background: rgba(42, 42, 42, 0.9); transition: opacity 0.4s ease, transform 0.6s var(--ease-out); }
.js .m-note:not(.is-on) { opacity: 0; transform: translateY(-8cqw) scale(0.94); }
.m-note__icon { flex: none; width: 8.4cqw; height: 8.4cqw; border-radius: 2.2cqw; background: #fa4616; }
.m-note__b { flex: 1; min-width: 0; }
.m-note__t { font-size: 3.7cqw; font-weight: 700; }
.m-note__x { font-size: 3cqw; color: #d6d6d6; }
.m-note__ago { align-self: flex-start; font-size: 2.8cqw; color: #b5b5b5; }

/* step 6: the balance */
.m-balance__row { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.m-amount { font-size: 9cqw; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.m-amount--c { text-align: center; font-size: 12cqw; }
.m-chip { padding: 1.8cqw 3cqw; border-radius: 2.4cqw; background: #fa4616; font-size: 3.2cqw; font-weight: 700; }
.m-up { display: flex; align-items: center; gap: 1.6cqw; color: #2fbf71; font-size: 3.3cqw; font-weight: 600; transition: opacity 0.4s ease, transform 0.5s var(--ease-out); }
.js .m-up:not(.is-on) { opacity: 0; transform: translateY(1.5cqw); }
.m-bars { display: flex; align-items: flex-end; gap: 2.4cqw; height: 26cqw; }
.m-bar { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; gap: 1.4cqw; height: 100%; }
.m-bar i { display: block; width: 100%; border-radius: 1cqw; background: #fa4616; transform-origin: bottom; transition: transform 0.7s var(--ease-out); }
.m-bar b { font-size: 2.6cqw; font-weight: 600; color: #b5b5b5; }
.js .m-bar:not(.is-on) i { transform: scaleY(0); }
.m-bar--0 i { height: 38%; } .m-bar--1 i { height: 22%; } .m-bar--2 i { height: 52%; } .m-bar--3 i { height: 48%; }
.m-bar--4 i { height: 84%; } .m-bar--5 i { height: 44%; } .m-bar--6 i { height: 66%; }
.m-sale { display: flex; align-items: center; gap: 2.6cqw; font-size: 3.4cqw; font-weight: 600; transition: opacity 0.4s ease, transform 0.5s var(--ease-out); }
.js .m-sale:not(.is-on) { opacity: 0; transform: translateX(-4cqw); }
.m-sale i { display: block; flex: none; width: 3cqw; height: 3cqw; border-radius: 50%; background: #8d8d8d; }
.m-sale span { flex: 1; }
.m-sale b { font-weight: 700; }

/* step 7: the payout lands */
.m-success { position: relative; display: grid; place-items: center; align-self: center; width: 30cqw; height: 30cqw; margin-top: 8cqw; }
.m-success__dot { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #2fbf71; transition: transform 0.6s cubic-bezier(0.2, 1.5, 0.4, 1); }
.m-success__dot svg { width: 52%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s ease 0.35s; }
.m-success__ring { position: absolute; inset: 0; border: 0.8cqw solid #2fbf71; border-radius: 50%; opacity: 0; }
.m-success.is-on .m-success__ring { animation: m-ring 1.2s ease-out 0.3s 1; }
.js .m-success:not(.is-on) .m-success__dot { transform: scale(0); }
.js .m-success:not(.is-on) .m-success__dot svg { stroke-dashoffset: 14; }
.m-rows { gap: 0; padding-block: 1.4cqw; }
.m-rowline { display: flex; justify-content: space-between; gap: 3cqw; padding: 2.8cqw 0; border-bottom: 0.3cqw solid #2c2c2c; font-size: 3.8cqw; }
.m-rowline:last-child { border-bottom: 0; }
.m-rowline span { color: #9a9a9a; }
.m-rowline b { font-weight: 700; }
.m-btn--grey { margin-top: auto; }

/* step 8: looked after */
.m-task { flex-direction: row; align-items: center; gap: 3cqw; }
.m-task__t { flex: 1; font-size: 4cqw; font-weight: 700; }
.m-task__d { color: #9a9a9a; font-size: 3.3cqw; transition: opacity 0.4s ease 0.2s; }
.js .m-task__d:not(.is-on) { opacity: 0; }
.m-part__t { font-size: 4.8cqw; font-weight: 700; }

/* ---------- Arriving: the screen settles in at once, quickly; the one or two moves that matter come after ---------- */
.a[data-i="0"] { --i: 0; } .a[data-i="1"] { --i: 1; } .a[data-i="2"] { --i: 2; } .a[data-i="3"] { --i: 3; }
.a[data-i="4"] { --i: 4; } .a[data-i="5"] { --i: 5; } .a[data-i="6"] { --i: 6; } .a[data-i="7"] { --i: 7; } .a[data-i="8"] { --i: 8; }
.js .scr:not(.is-playing) .a { opacity: 0; }
.js .scr.is-playing .a { animation: m-in 0.4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 0.05s); }

@keyframes m-in { from { opacity: 0; transform: translateY(3cqw); } to { opacity: 1; transform: none; } }
@keyframes m-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes m-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.035); } }
@keyframes m-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes m-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .scr .a { opacity: 1; animation: none; }
  .m-btn--pulse.is-on, .m-tick.is-on, .m-success.is-on .m-success__ring { animation: none; }
}