/* Landing: the sentence is the layout. A consignor's item photo sits inside the headline where a word
   would be; every later section is a short statement with its proof beside it.
   Light only on purpose (warm paper ground, black ink, flat pastel fields), so tokens are set on the
   body and win over the dark tokens base.css gives the app pages. */
body.landing {
    color-scheme: light;
    --bg: #f4f3ef;
    --surface: #ffffff;
    --step: #efebe2;
    --ink: #121212;
    --muted: #5b574f;
    --line: #dcd7cc;
    --rose: #f3d2e4;
    --sky: #cfe2f2;
    --lime: #def0a6;
    --tag: #f2c12e;
    --tag-ink: #121212;
    --ok: #1d7f54;
    --on-ok: #ffffff;
    --ok-soft: #dcefe4;
    --warn: #b93c27;
    --warn-soft: #f8e1dc;
    --info-soft: #fbf0c9;

    --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --body: var(--sans);
    --display: var(--serif);

    /* Five sizes: poster, large heading, statement, body, small. */
    --t-xl: clamp(64px, 9.4vw, 152px);
    --t-l: clamp(44px, 5.8vw, 92px);
    --t-m: clamp(24px, 2.5vw, 36px);
    --t-b: 18px;
    --t-s: 15px;

    --m: clamp(16px, 3.4vw, 48px);
    /* Side gutter that also keeps content within 1360px on wide screens. */
    --side: max(var(--m), calc((100vw - 1360px) / 2));
    --gap: clamp(96px, 10vw, 160px);
    --ease: cubic-bezier(.2, .7, .2, 1);

    background: var(--bg);
    color: var(--ink);
    font: 400 var(--t-b)/1.55 var(--sans);
    padding: 0;
}
.landing a { color: inherit; }
.landing img { height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.landing h1, .landing h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1; text-wrap: balance; }
.h-l { font-size: var(--t-l); }
.h-s { font-size: var(--t-m); line-height: 1.15; }

/* One button shape for the page: full pill. */
.landing .btn { border-radius: 999px; min-height: 48px; padding: 0 22px; font: 600 16px/1 var(--sans); border: 0; background: var(--step); color: var(--ink); transition: transform .18s var(--ease), background-color .18s; }
.landing .btn:hover { background: #e4dfd3; }
.landing .btn:active { transform: scale(.97); }
.landing .btn.primary { background: var(--ink); color: #fff; }
.landing .btn.primary:hover { background: #2e2e2e; filter: none; }
.landing .btn.ok { background: var(--ok); color: var(--on-ok); }
.landing .btn.ghost { background: var(--step); color: var(--ink); }
.big-cta { min-height: 56px !important; padding: 0 28px !important; font-size: 17px !important; }
.text-link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: opacity .18s; }
.text-link:hover { opacity: .65; }

/* Bar */
.bar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: max(18px, env(safe-area-inset-top, 0px)) max(var(--m), env(safe-area-inset-right, 0px)) 18px max(var(--m), env(safe-area-inset-left, 0px)); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 19px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; }
.logo-tag { width: 26px; height: 17px; background: var(--tag); position: relative; clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%); border-radius: 3px; display: inline-block; }
.logo-tag::after { content: ""; position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--bg); }
.logo-tag.sm { width: 20px; height: 13px; vertical-align: -1px; margin-right: 8px; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; font-size: var(--t-s); font-weight: 500; }
.nav a:not(.btn) { text-decoration: none; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .nav a:not(.btn) { display: none; } }

main { display: grid; gap: var(--gap); padding-bottom: var(--gap); }
main > section { padding-inline: max(var(--side), env(safe-area-inset-left, 0px)) max(var(--side), env(safe-area-inset-right, 0px)); }

/* Hero: centered promise and website box; the inbox below shows what the product does. */
.hero { display: grid; justify-items: center; text-align: center; gap: 22px; padding-top: clamp(40px, 8vh, 96px); }
.hero-h { font-size: clamp(46px, 6.2vw, 96px); line-height: .98; letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
.hero-sub { font-size: clamp(18px, 1.6vw, 22px); color: var(--muted); max-width: 46ch; text-wrap: balance; }
.hero .site-form { margin-top: 10px; justify-items: center; }
.hero .site-field { width: 100%; box-shadow: 0 0 0 1px var(--line); }
.hero .site-field:focus-within { box-shadow: 0 0 0 2px var(--ink); }

/* Hero inbox: rows arrive, one is accepted, one gets an offer. Rests in its finished state. */
.hero-demo { width: min(980px, 100%); margin-top: clamp(28px, 4vw, 48px); padding: clamp(14px, 2.4vw, 28px); border-radius: 22px; background: var(--sky); text-align: left; }
.hd-win { position: relative; overflow: hidden; border-radius: 14px; background: var(--surface); padding: 20px 20px 84px; }
.hd-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 0 4px 14px; }
.hd-h { font: 400 34px/1 var(--serif); }
.hd-link { font-size: 14px; color: var(--muted); background: var(--step); border-radius: 999px; padding: 6px 14px; }
.hd-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.hd-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto minmax(0, 250px); gap: 18px; align-items: center; padding: 12px 4px; max-height: 100px; overflow: hidden; }
.hd-row + .hd-row { box-shadow: inset 0 1px 0 var(--step); }
.hd-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: #c4c9cc; }
.hd-what { display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.hd-what b { font: 600 17px/1.25 var(--sans); color: var(--ink); }
.hd-ask { font: 600 17px/1 var(--sans); font-variant-numeric: tabular-nums; }
.hd-state { display: grid; justify-items: end; }
.hd-state > * { grid-area: 1 / 1; }
.hd-acts { display: flex; gap: 6px; }
.hd-acts i { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--step); font: 600 13.5px/1 var(--sans); font-style: normal; }
.hd-acts i.ok { background: var(--ok); color: #fff; }
.hd-acts .tap { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: rgba(255, 255, 255, .6); opacity: 0; }
.hd-state .pill { height: 30px; padding: 0 14px; font-size: 13.5px; }
.a-out { opacity: 0; visibility: hidden; }
.hd-toast { position: absolute; left: 20px; right: 20px; bottom: 18px; padding: 13px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14.5px; line-height: 1.4; }
.hd-toast b { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
    .hero-demo.play .r1 { animation: row-in .55s var(--ease) .3s both; }
    .hero-demo.play .r2 { animation: row-in .55s var(--ease) 1.1s both; }
    .hero-demo.play .r3 { animation: row-in .55s var(--ease) 1.9s both; }
    .hero-demo.play .r1 .tap { animation: tap .7s var(--ease) 3s both; }
    .hero-demo.play .r1 .a-out { animation: acts-out .25s 3.35s both; }
    .hero-demo.play .r1 .p-in { animation: pop-in .4s var(--ease) 3.35s both; }
    .hero-demo.play .r2 .tap { animation: tap .7s var(--ease) 4.6s both; }
    .hero-demo.play .r2 .a-out { animation: acts-out .25s 4.95s both; }
    .hero-demo.play .r2 .p-in { animation: pop-in .4s var(--ease) 4.95s both; }
    .hero-demo.play .hd-toast { animation: toast 4s var(--ease) 5.3s both; }
    @keyframes row-in { from { max-height: 0; padding-block: 0; opacity: 0; transform: translateY(-12px); } }
    @keyframes acts-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
    @keyframes pop-in { from { opacity: 0; transform: scale(.85); } }
    @keyframes toast { 0% { opacity: 0; transform: translateY(16px); } 12%, 100% { opacity: 1; transform: none; } }
}

/* Intro: the statement on the left, the thread of photos people text you on the right. */
/* Hero: a shop types its website and goes straight to a page built from it. */
.site-form { display: grid; gap: 10px; width: min(560px, 100%); }
.site-form label { font: 600 15px/1.3 var(--sans); }
.site-field { display: flex; gap: 6px; background: var(--surface); border-radius: 999px; padding: 6px; transition: box-shadow .18s; }
.site-field:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.landing .site-field input { flex: 1 1 auto; min-width: 0; min-height: 48px; border: 0; border-radius: 999px; background: transparent; padding: 0 8px 0 18px; font: 400 18px/1 var(--sans); color: var(--ink); }
.landing .site-field input:focus { outline: none; }
.site-field .btn { flex: none; }
.site-err { color: var(--warn); font-size: var(--t-s); font-weight: 500; }
.site-alt { font-size: var(--t-s); color: var(--muted); text-wrap: balance; }
.site-alt .text-link { color: var(--ink); font-weight: 500; }

.intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(28px, 5vw, 80px); align-items: start; }
.intro-copy { display: grid; gap: 28px; }
.statement { font-family: var(--serif); font-size: var(--t-m); line-height: 1.18; max-width: 26ch; }
.thread { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: var(--step); border-radius: 14px; padding: clamp(18px, 3vw, 36px); }
.msg { margin: 0; display: grid; gap: 8px; justify-items: start; }
.msg img { border-radius: 16px; object-fit: cover; background: #c4c9cc; }
.m1 img { width: min(62%, 220px); aspect-ratio: 4 / 5; }
.m2 { grid-column: 1 / -1; }
.m2 img { width: min(60%, 280px); aspect-ratio: 16 / 11; }
.m3 { grid-row: 1; grid-column: 2; align-self: end; }
.m3 img { width: min(50%, 150px); aspect-ratio: 3 / 5; }
.bubble { max-width: 32ch; background: #ffffff; color: #121212; font: 400 17px/1.35 var(--sans); padding: 10px 14px; border-radius: 18px 18px 18px 4px; }

/* How: four steps, each a small screen in its own color; they play in order and the track fills. */
.how { display: grid; gap: 40px; --hw-p: 1; }
.hw-track { position: relative; height: 4px; border-radius: 4px; background: var(--step); margin-bottom: -16px; }
.hw-track span { position: absolute; inset: 0; border-radius: 4px; background: var(--ink); transform-origin: left; transform: scaleX(var(--hw-p)); transition: transform .6s var(--ease); }
.hw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: hw; }
.hw-step { display: grid; gap: 12px; align-content: start; counter-increment: hw; }
.hw-step > * { transition: opacity .4s var(--ease); }
.hw-step.is-next > * { opacity: .4; }
.hw-t { display: flex; align-items: center; gap: 10px; font: 600 19px/1.25 var(--sans); }
.hw-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--step); font-size: 14px; transition: background-color .3s, color .3s; }
.hw-n::before { content: counter(hw); }
.hw-step.is-on .hw-n { background: var(--ink); color: #fff; }
.hw-step.is-done .hw-n { background: var(--ok); color: #fff; }
.hw-step.is-done .hw-n::before { content: "✓"; }
.hw-step p { font-size: 16px; color: var(--muted); max-width: 30ch; }

.mini { height: 250px; border-radius: 14px; padding: 20px; display: grid; place-items: center; overflow: hidden; }
.m-send { background: var(--rose); }
.m-inbox { background: var(--sky); }
.m-tap { background: var(--lime); }
.m-text { background: var(--tag); }
.mn-card { width: min(100%, 230px); display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--surface); font-size: 13px; box-shadow: 0 16px 30px -18px rgba(18, 18, 18, .35); }
.mn-ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mn-ph img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #c4c9cc; }
.mn-ph img:nth-child(1) { object-position: 50% 70%; }
.mn-ph img:nth-child(2) { object-position: 50% 15%; }
.mn-ph img:nth-child(3) { object-position: 50% 95%; }
.mn-field { padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.mn-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.mn-btn { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 36px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; }
.mn-h { font: 400 22px/1 var(--serif); }
.mn-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; }
.mn-row img, .mn-row > i { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; background: var(--step); }
.mn-row span { display: grid; font-size: 11.5px; color: var(--muted); }
.mn-row b { font-size: 13px; color: var(--ink); font-weight: 600; }
.mn-new { background: var(--bg); box-shadow: 0 0 0 2px var(--tag); }
.mn-ghost span { height: 10px; width: 70%; border-radius: 5px; background: var(--step); }
.mn-row .pill { height: 22px; padding: 0 8px; font-size: 11px; }
.mini .mn-big { width: 100%; height: 96px; object-fit: cover; border-radius: 9px; background: #c4c9cc; }
.mn-title { font-weight: 600; font-size: 13.5px; }
.mn-state { display: grid; }
.mn-state > * { grid-area: 1 / 1; }
.mn-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; visibility: hidden; }
.mn-acts i { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 32px; border-radius: 999px; background: var(--step); font: 600 11.5px/1 var(--sans); font-style: normal; }
.mn-acts i.ok { background: var(--ok); color: #fff; }
.mn-res { justify-self: start; height: 32px; padding: 0 14px; font-size: 12.5px; }
.mn-from { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.mn-from .d-av { width: 28px; height: 28px; font-size: 13px; }
.m-text .typing { display: none; }
.mini .mn-msg { max-width: none; }
.mini .tap { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: rgba(255, 255, 255, .6); opacity: 0; }

/* Stacked on phones: each step plays as it scrolls in, nothing is dimmed. */
@media (max-width: 640px) {
    .hw-step.is-next > * { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
    .is-on .mn-ph img:nth-child(1) { animation: pop-in .35s var(--ease) .2s both; }
    .is-on .mn-ph img:nth-child(2) { animation: pop-in .35s var(--ease) .45s both; }
    .is-on .mn-ph img:nth-child(3) { animation: pop-in .35s var(--ease) .7s both; }
    .is-on .mn-price { animation: fade-in .3s 1s both; }
    .is-on .mn-btn .tap { animation: tap .7s var(--ease) 1.5s both; }
    .is-on .mn-new { animation: row-in .5s var(--ease) .3s both; }
    .is-on .mn-acts { animation: acts-out .25s 1.1s both; }
    .is-on .mn-acts .tap { animation: tap .7s var(--ease) .6s both; }
    .is-on .mn-res { animation: pop-in .4s var(--ease) 1.1s both; }
    .is-on .m-text .typing { display: inline-flex; animation: typing-short 1.1s linear both; }
    .is-on .mn-msg { animation: rise-in .4s var(--ease) 1.1s both; }
    @keyframes typing-short { 0%, 90% { opacity: 1; max-height: 40px; padding-block: 12px; } 100% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -8px; } }
}

/* Phones: one frame for the Try demo and the app preview. Sizes inside are fixed px, like a real screen. */
.handset { position: relative; width: 300px; max-width: 100%; aspect-ratio: 300 / 615; background: #121212; border-radius: 48px; padding: 10px; box-shadow: 0 40px 80px -40px rgba(18, 18, 18, .5); }
.dev-screen { position: relative; height: 100%; overflow: hidden; border-radius: 38px; background: var(--surface); color: var(--ink); font: 400 14px/1.35 var(--sans); display: flex; flex-direction: column; }
.dev-bar { flex: none; position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 26px 0 32px; font: 600 14px/1 var(--sans); transition: color .3s; }
.dev-island { position: absolute; left: 50%; top: 11px; width: 88px; height: 26px; margin-left: -44px; border-radius: 999px; background: #121212; }
.dev-bat { width: 24px; height: 11px; border-radius: 3px; background: currentColor; opacity: .85; }
.landing .pill { font: 600 12px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.handset .pill { height: 24px; padding: 0 9px; }
.logo-tag.xs { width: 18px; height: 12px; clip-path: polygon(5px 0, 100% 0, 100% 100%, 5px 100%, 0 50%); border-radius: 2px; }
.logo-tag.xs::after { left: 5px; width: 4px; height: 4px; margin-top: -2px; background: #fff; }
.bub { max-width: 84%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.35; }
.bub.out { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.bub.in { align-self: flex-start; background: #e9e9eb; color: #121212; border-bottom-left-radius: 5px; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; animation: typing 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
.d-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tag); color: #121212; font: 600 17px/1 var(--sans); }

/* Try: Dana's phone, the trip between them, the shop's phone. */
/* Shops: one card per kind of shop; on phones the row scrolls sideways. */
.shops { display: grid; gap: 48px; }
.shop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.shop { display: flex; flex-direction: column; gap: 12px; min-height: 360px; padding: 28px 26px 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.shop svg { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 44px; }
.shop h3 { margin: 0; font: 600 22px/1.2 var(--sans); }
.shop p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.shop .shop-note { margin-top: auto; padding: 12px 14px; border-radius: 14px; background: var(--step); font-size: 14px; line-height: 1.45; color: var(--ink); }
.js .shop:nth-child(2) { transition-delay: 80ms; }
.js .shop:nth-child(3) { transition-delay: 160ms; }
.js .shop:nth-child(4) { transition-delay: 240ms; }
@media (max-width: 1180px) { .shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop { min-height: 300px; } }
@media (max-width: 640px) {
    .shop-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--m)); padding: 0 var(--m) 4px; scroll-padding-inline: var(--m); scrollbar-width: none; }
    .shop { min-height: 330px; scroll-snap-align: start; }
}

.try { display: grid; gap: 40px; }
.try-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px 48px; align-items: end; }
.try-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: ts; }
.try-steps li { counter-increment: ts; display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: 999px; background: var(--step); color: var(--muted); font: 600 16px/1.2 var(--sans); transition: background-color .3s, color .3s; }
.ts-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); font-size: 14px; transition: background-color .3s; }
.ts-n::before { content: counter(ts); }
.try-steps li.is-on { background: var(--ink); color: #fff; }
.try-steps li.is-on .ts-n { background: var(--tag); color: #121212; }
.try-steps li.is-done { color: var(--ink); }
.try-steps li.is-done .ts-n { background: var(--ok); color: #fff; }
.try-steps li.is-done .ts-n::before { content: "✓"; }
.try-switch { display: none; }
.duo { display: grid; grid-template-columns: 300px minmax(60px, 200px) 300px; justify-content: center; align-items: center; gap: 0 20px; background: var(--step); border-radius: 14px; padding: clamp(28px, 4vw, 56px) 24px; }
.side { margin: 0; display: grid; gap: 14px; justify-items: center; }
.side figcaption { font: 600 15px/1.2 var(--sans); color: var(--muted); }
.try-foot { min-height: 28px; }
.try-reset { font: 600 17px/1.3 var(--sans); background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; }

/* The trip: the item's photo travels to the shop, the reply travels back. */
.wire { position: relative; height: 6px; margin-top: -30px; background: radial-gradient(circle, #c9c2b3 2px, transparent 2.5px) 0 50% / 12px 6px repeat-x; }
.wire-dot, .wire-msg { position: absolute; top: 50%; left: 0; opacity: 0; }
.wire-dot { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff; background: #c4c9cc; }
.wire-dot img { width: 100%; height: 100%; object-fit: cover; }
.wire-msg { left: 100%; width: 44px; height: 32px; margin: -16px 0 0 -22px; border-radius: 16px 16px 16px 5px; background: #e9e9eb; box-shadow: 0 0 0 3px #fff; }
.fly-right .wire-dot { animation: fly-r .75s var(--ease) both; }
.fly-left .wire-msg { animation: fly-l .75s var(--ease) both; }
@keyframes fly-r { 0% { opacity: 0; left: 0; transform: scale(.5); } 15% { opacity: 1; transform: none; } 85% { opacity: 1; left: 100%; transform: none; } 100% { opacity: 0; left: 100%; transform: scale(.5); } }
@keyframes fly-l { 0% { opacity: 0; left: 100%; transform: scale(.5); } 15% { opacity: 1; transform: none; } 85% { opacity: 1; left: 0; transform: none; } 100% { opacity: 0; left: 0; transform: scale(.5); } }

/* Dana's phone: the shop's submission page, then the text thread. */
.d-url { flex: none; align-self: center; max-width: 86%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); background: var(--step); border-radius: 999px; padding: 4px 12px; margin-bottom: 6px; }
.d-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 18px; }
.d-shop { font: 600 19px/1.2 var(--sans); }
.d-photo { flex: none; height: 140px; border-radius: 12px; overflow: hidden; background: #c4c9cc; }
.d-photo img { width: 100%; height: 100%; object-fit: cover; }
.d-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 2px; }
.d-pick { padding: 0; border: 0; border-radius: 9px; overflow: hidden; aspect-ratio: 1; cursor: pointer; background: #c4c9cc; outline: 2.5px solid transparent; outline-offset: 2px; transition: outline-color .18s, transform .18s var(--ease); }
.d-pick:active { transform: scale(.94); }
.d-pick img { width: 100%; height: 100%; object-fit: cover; }
.d-pick[aria-pressed="true"] { outline-color: var(--ink); }
.d-field { display: grid; gap: 4px; font: 600 12px/1.2 var(--sans); color: var(--muted); }
.landing .d-field input { min-height: 40px; padding: 6px 12px; font: 400 16px/1.2 var(--sans); background: var(--bg); border: 0; border-radius: 10px; color: var(--ink); }
.d-stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 40px; background: var(--bg); border-radius: 10px; }
.d-stepper button { height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 500 22px/1 var(--sans); cursor: pointer; }
.d-stepper button:hover { background: var(--step); }
.d-stepper output { text-align: center; font: 600 16px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.d-send { margin-top: auto; min-height: 46px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px/1 var(--sans); cursor: pointer; transition: transform .18s var(--ease); }
.d-send:active { transform: scale(.97); }
.d-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.d-th-head, .ms-head { flex: none; display: grid; justify-items: center; gap: 4px; padding: 0 16px 12px; font-size: 13px; background: var(--bg); }
.d-th-list, .ms-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; overflow: hidden; }
.d-th-list .bub.out { display: grid; gap: 6px; padding: 5px 5px 9px; }
.d-th-list .bub.out img { width: 160px; height: 104px; object-fit: cover; border-radius: 14px; }
.d-th-list .bub.out span { padding: 0 8px; }
.d-wait { align-self: center; font-size: 12px; color: var(--muted); }

/* The shop's phone: the inbox. */
.s-push { position: absolute; z-index: 7; top: 48px; left: 8px; right: 8px; display: grid; gap: 2px; padding: 10px 14px 12px; border-radius: 18px; background: var(--bg); font-size: 13px; box-shadow: 0 14px 30px -12px rgba(18, 18, 18, .4); }
.s-push-app { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.s-push b { font-weight: 600; }
.s-app { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 2px 14px 16px; overflow: hidden; }
.s-h { font: 400 32px/1 var(--serif); }
.s-tabs { display: flex; gap: 5px; font-size: 12px; font-weight: 600; }
.s-tabs span { padding: 6px 9px; border-radius: 999px; background: var(--step); color: var(--muted); white-space: nowrap; }
.s-tabs span.on { background: var(--ink); color: #fff; }
.s-tabs b { font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.s-empty { padding: 22px 18px; border-radius: 14px; background: var(--bg); color: var(--muted); font-size: 13px; text-align: center; }
.s-item { display: grid; gap: 8px; padding: 8px; border-radius: 16px; background: var(--bg); box-shadow: 0 0 0 2px var(--tag); }
.s-photo { height: 116px; border-radius: 11px; overflow: hidden; background: #c4c9cc; }
.s-photo img { width: 100%; height: 100%; object-fit: cover; }
.s-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px; font-size: 15px; }
.s-top b { font-weight: 600; }
.s-meta { padding: 0 4px; font-size: 12px; color: var(--muted); }
.s-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.s-acts { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 5px; }
.s-btn { min-height: 40px; padding: 0 6px; border: 0; border-radius: 999px; background: var(--step); color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; transition: transform .18s var(--ease), background-color .18s; }
.s-btn:hover { background: #e4dfd3; }
.s-btn:active { transform: scale(.95); }
.s-btn.ok, .s-btn.ok:hover { background: var(--ok); color: #fff; }
.s-done { padding: 2px 4px; font-size: 13px; font-weight: 600; color: var(--ok); }
.s-old { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.s-old li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px; font-size: 12px; color: var(--muted); }
.s-old img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; background: #c4c9cc; }
.s-old b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* App: a sky band; the copy and scene list on the left, the phone playing on the right. */
.app { padding-inline: 0 !important; }
.app-in { background: var(--sky); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "copy stage" "scenes stage" "cta stage"; grid-template-rows: auto auto 1fr; gap: 36px clamp(28px, 5vw, 80px); align-items: start; padding: clamp(56px, 8vw, 112px) max(var(--side), env(safe-area-inset-right, 0px)) clamp(56px, 8vw, 112px) max(var(--side), env(safe-area-inset-left, 0px)); overflow: hidden; }
.app-copy { grid-area: copy; display: grid; gap: 24px; }
.app-copy h2 { max-width: 13ch; }
.app-lede { font-size: 20px; line-height: 1.5; max-width: 44ch; }
.app-soon { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: 999px; background: var(--surface); font: 600 15px/1 var(--sans); }
.soon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tag); animation: soon 1.8s ease-out infinite; }
.app-scenes { grid-area: scenes; list-style: none; margin: 0 0 0 -18px; padding: 0; display: grid; gap: 2px; max-width: 520px; }
.scene-btn { position: relative; width: 100%; display: grid; gap: 4px; padding: 14px 18px 20px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: background-color .25s, opacity .25s; }
.scene-btn b { font: 600 18px/1.25 var(--sans); }
.scene-btn span { font-size: 15px; line-height: 1.45; color: #34414c; }
.scene-btn[aria-pressed="false"] { opacity: .62; }
.scene-btn:hover { opacity: 1; }
.scene-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .6); }
.scene-bar { display: none; position: absolute; left: 18px; right: 18px; bottom: 9px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(18, 18, 18, .1); }
.run .scene-bar { display: block; }
.scene-bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; animation: bar 5.6s linear both; }
.app-cta { grid-area: cta; justify-self: start; }
.app-stage { grid-area: stage; position: relative; display: grid; place-items: center; min-height: 700px; }
.app-disc { position: absolute; width: min(580px, 100%); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.app-dev { width: 320px; }
.app-chip { position: absolute; z-index: 2; left: 50%; top: 40%; margin-left: -360px; max-width: 220px; padding: 12px 18px; border-radius: 14px; background: var(--surface); font: 600 15px/1.3 var(--sans); box-shadow: 0 18px 40px -18px rgba(18, 18, 18, .4); opacity: 0; transform: rotate(-3deg) translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.app-chip:nth-of-type(even) { left: auto; right: 50%; top: 14%; margin: 0 -360px 0 0; transform: rotate(3deg) translateY(10px); }
.app-chip.on { opacity: 1; transform: rotate(-3deg); }
.app-chip.on:nth-of-type(even) { transform: rotate(3deg); }
.app-story, .app-pin { display: contents; }
.app-ticks { display: none; }

/* Story: unless motion is reduced (script adds .story) the scene list and the phone pin to the screen,
   and the section is four stretches of scroll tall; each stretch plays one scene. */
.app-in.story { overflow: clip; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "copy" "story" "cta"; transition: background-color .5s var(--ease); }
.app-in.story[data-scene="1"] { background: var(--lime); }
.app-in.story[data-scene="2"] { background: var(--step); }
.app-in.story[data-scene="3"] { background: var(--rose); }
.story .app-story { display: block; grid-area: story; height: calc(100svh + 3 * 70svh); }
.story .app-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; padding-block: 18px; }
.story .app-pin > * { grid-area: auto; }
.story .app-ticks { display: flex; gap: 6px; }
.tk { display: flex; align-items: center; gap: 12px; }
.tk span { display: none; }
.app-ticks i { flex: none; width: 12px; height: 3px; border-radius: 3px; background: var(--ink); opacity: .25; transition: width .5s var(--ease), opacity .3s; }
.tk.on i { width: 36px; opacity: 1; }
.story .app-scenes { display: grid; margin: 0; }
.story .app-scenes li { grid-area: 1 / 1; }
.story .scene-btn { padding: 0; background: none; cursor: default; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.story .scene-btn b { font-size: 24px; }
.story .scene-btn[aria-pressed="false"] { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
.story .scene-bar { display: none; }
.story .app-stage { min-height: 0; padding: 0; align-self: stretch; }
.story .app-disc { display: none; }
.story .app-dev { width: clamp(236px, calc((100svh - 260px) * .4878), 300px); }
/* A shorter phone: the photo gives up the height, and room stays free under the item for the "Offer sent" toast. */
.story .ap-photo { flex: 1 1 0; height: auto; min-height: 0; }
.story .ap-acts { margin-top: 72px; }

/* Wide screens: the active step large on the left with the step list under it, the phone on the right. */
@media (min-width: 961px) {
    .story .app-copy { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(28px, 5vw, 80px); align-items: end; }
    .story .app-copy h2 { grid-row: span 2; }
    .story .app-pin { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(28px, 5vw, 80px); row-gap: 44px; padding-block: 40px; }
    .story .app-scenes { grid-column: 1; grid-row: 2; max-width: 30rem; }
    .story .scene-btn { gap: 18px; }
    .story .scene-btn b { font: 400 clamp(40px, 4vw, 60px)/1 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
    .story .scene-btn span { font-size: 20px; }
    .story .app-ticks { grid-column: 1; grid-row: 3; flex-direction: column; gap: 10px; }
    .story .tk { cursor: pointer; font: 500 16px/1.3 var(--sans); }
    .story .tk span { display: block; opacity: .4; transition: opacity .3s; }
    .story .tk.on span, .story .tk:hover span { opacity: 1; }
    .story .app-stage { grid-column: 2; grid-row: 1 / -1; }
    .story .app-disc { display: block; }
    .story .app-dev { width: min(320px, calc((100svh - 100px) * .4878)); }
}

/* App scenes. Each one rests in its finished state; .play runs it from the start. */
.sc { position: absolute; inset: 46px 0 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.sc.on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.dev-screen:has(.sc-cam.on) .dev-bar { color: #fff; }

.sc-lock { inset: 0; padding-top: 46px; background: var(--rose); }
.lk-date { margin-top: 18px; text-align: center; font: 600 15px/1 var(--sans); }
.lk-time { text-align: center; font: 400 86px/1 var(--serif); letter-spacing: -.02em; }
.lk-stack { margin-top: auto; padding: 0 10px 22px; display: flex; flex-direction: column; }
.nt { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 2px 10px; max-height: 120px; margin-top: 8px; padding: 11px 12px; overflow: hidden; border-radius: 18px; background: rgba(255, 255, 255, .82); font-size: 13px; }
.nt-app { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.nt-app em { margin-left: auto; font-style: normal; font-weight: 400; }
.nt-body { display: grid; }
.nt-body b { font-weight: 600; }
.nt img { width: 44px; height: 44px; align-self: center; object-fit: cover; border-radius: 8px; background: #c4c9cc; }
.sc-lock.play .n1 { animation: nt-in .55s var(--ease) .5s both; }
.sc-lock.play .n2 { animation: nt-in .55s var(--ease) 1.8s both; }
.sc-lock.play .n3 { animation: nt-in .55s var(--ease) 3.1s both; }

.sc-item { gap: 10px; padding: 4px 14px 16px; }
.ap-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; }
.ap-back::before { content: "‹"; margin-right: 4px; font-size: 24px; vertical-align: -2px; }
.pill-swap { display: grid; }
.pill-swap > * { grid-area: 1 / 1; justify-self: end; }
.p-old { opacity: 0; }
.ap-photo { position: relative; flex: none; height: 240px; overflow: hidden; border-radius: 16px; background: #c4c9cc; }
.ap-photo img { width: 100%; height: 100%; object-fit: cover; }
.ap-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; }
.ap-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.ap-dots i:first-child { background: #fff; }
.ap-body { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.ap-body > b { font: 600 20px/1.2 var(--sans); color: var(--ink); }
.ap-body span b { color: var(--ink); }
.ap-acts { margin-top: auto; display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 6px; }
.ap-btn { position: relative; display: grid; place-items: center; min-height: 44px; overflow: hidden; border-radius: 999px; background: var(--step); font: 600 13px/1 var(--sans); }
.ap-btn.ok { background: var(--ok); color: #fff; }
.ap-btn.offer { background: var(--ink); color: #fff; }
.tap { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: 0; }
.ap-toast { position: absolute; left: 12px; right: 12px; bottom: 72px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; }
.sc-item.play .ap-photo img { animation: drift 5.6s linear both; }
.sc-item.play .tap { animation: tap .7s var(--ease) 1.5s both; }
.sc-item.play .ap-btn.offer { animation: pressed .3s 1.7s both; }
.sc-item.play .p-old { animation: fade-out .3s 2s both; }
.sc-item.play .p-new { animation: fade-in .3s 2s both; }
.sc-item.play .ap-toast { animation: rise-in .45s var(--ease) 2.4s both; }

.sc-cam { inset: 0; background: #121212; color: #fff; }
.cam { position: relative; flex: 1; overflow: hidden; }
.cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-frame { position: absolute; inset: 20% 14% 22%; border: 2.5px solid rgba(255, 255, 255, .9); border-radius: 18px; }
.cam-scan { position: absolute; left: 14%; right: 14%; top: 20%; height: 3px; border-radius: 3px; background: var(--tag); box-shadow: 0 0 14px 2px rgba(242, 193, 46, .7); opacity: 0; }
.cam-sheet { position: relative; flex: none; display: grid; gap: 2px; margin-top: -22px; padding: 16px 18px 22px; border-radius: 22px 22px 0 0; background: var(--surface); color: var(--ink); }
.cs-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.cs-row span { color: var(--muted); }
.cs-row b { font-weight: 600; }
.cs-tag { justify-self: start; display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; padding: 8px 16px 8px 22px; border-radius: 4px; background: var(--tag); color: #121212; font-size: 13px; font-weight: 600; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
.sc-cam.play .cam img { animation: drift 5.6s linear both; }
.sc-cam.play .cam-frame { animation: lock-on .6s var(--ease) .2s both; }
.sc-cam.play .cam-scan { animation: scan 1.3s var(--ease) .6s both; }
.sc-cam.play .r1 b { animation: fade-in .3s 2s both; }
.sc-cam.play .r2 b { animation: fade-in .3s 2.3s both; }
.sc-cam.play .r3 b { animation: fade-in .3s 2.6s both; }
.sc-cam.play .cs-tag { animation: tag-out .6s var(--ease) 3.1s both; }

.sc-sold .m-t { display: none; }
.ms-day { align-self: center; margin: 6px 0; font-size: 11px; color: var(--muted); }
.sc-sold.play .m-b { animation: rise-in .4s var(--ease) .6s both; }
.sc-sold.play .m-c { animation: fade-in .4s 1.4s both; }
.sc-sold.play .m-t { display: inline-flex; animation: typing-life 3.3s linear both; }
.sc-sold.play .m-d { animation: rise-in .4s var(--ease) 3.3s both; }

@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-3px); opacity: .9; } }
@keyframes soon { from { box-shadow: 0 0 0 0 rgba(242, 193, 46, .8); } to { box-shadow: 0 0 0 10px rgba(242, 193, 46, 0); } }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nt-in { from { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; transform: translateY(-10px) scale(.96); } 60% { opacity: 1; } }
@keyframes drift { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes tap { from { opacity: .9; transform: scale(.2); } to { opacity: 0; transform: scale(1.7); } }
@keyframes pressed { from { background: var(--step); color: var(--ink); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes lock-on { from { opacity: 0; transform: scale(1.15); } }
@keyframes scan { 0% { opacity: 1; top: 20%; } 90% { opacity: 1; top: 77%; } 100% { opacity: 0; top: 78%; } }
@keyframes tag-out { from { opacity: 0; transform: translateX(-30px) rotate(-8deg); } }
@keyframes typing-life { 0%, 62% { max-height: 0; padding-block: 0; opacity: 0; } 63%, 97% { max-height: 40px; padding-block: 12px; opacity: 1; } 100% { max-height: 0; padding-block: 0; margin-top: -8px; opacity: 0; } }
@keyframes push-in { from { opacity: 0; transform: translateY(-24px) scale(.96); } }
@media (prefers-reduced-motion: no-preference) {
    .s-push:not([hidden]) { animation: push-in .5s var(--ease) both; }
    .s-item:not([hidden]), .bub.in:not([hidden]), .d-thread:not([hidden]) .bub.out { animation: rise-in .45s var(--ease) both; }
}

/* Next: heading on the left, the roadmap beside it. */
.next { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(28px, 5vw, 80px); align-items: start; }
.next h2 { max-width: 12ch; line-height: .98; }
.roadmap { display: grid; grid-template-columns: auto 1fr; gap: 0 24px; align-items: start; }
.rm-name { font-size: var(--t-s); color: var(--muted); padding-top: 4px; }
.roadmap table { border-collapse: collapse; width: 100%; font-size: 16px; }
.roadmap th, .roadmap td { border: 0; padding: 13px 0; vertical-align: top; text-align: left; }
.roadmap th { font: 400 16px/1.4 var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; width: 7.5em; white-space: normal; }
.roadmap td { padding-right: 16px; }
.roadmap .state { text-align: right; white-space: nowrap; padding-right: 0; color: var(--muted); }
.roadmap .state.dev { color: var(--ink); font-weight: 600; }
.roadmap tr.grp th, .roadmap tr.grp td { padding-top: 44px; }
.rm-note { grid-column: 2; padding-top: 20px; font-size: var(--t-s); color: var(--muted); }

/* Pricing: the offer is one sentence; the price is an object in the line. */
.pricing { padding-inline: 0 !important; }
.pricing-in { background: var(--lime); min-height: 80svh; display: grid; align-content: center; gap: 64px; padding: 96px max(var(--side), env(safe-area-inset-right, 0px)) 96px max(var(--side), env(safe-area-inset-left, 0px)); }
.price-line { font-size: clamp(56px, 8.4vw, 136px); line-height: .95; letter-spacing: -.035em; }
.price { display: inline-block; background: var(--tag); padding: 0 .15em; border-radius: .06em; line-height: .95; }
.price-foot { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px 48px; align-items: end; }
.price-foot p { font-size: 20px; max-width: 46ch; }
.price-foot .btn { justify-self: end; }

/* Join: statement and photo left, the form right. */
.join { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(28px, 5vw, 80px); align-items: start; }
.join-copy { display: grid; gap: 28px; position: sticky; top: 24px; }
.statement-s { font-family: var(--serif); font-size: var(--t-m); line-height: 1.2; max-width: 26ch; }
.join-form { background: var(--surface); border-radius: 14px; padding: clamp(18px, 3vw, 32px); display: grid; gap: 20px; }
.landing input, .landing select, .landing textarea { border-radius: 10px; font-family: var(--sans); }
.landing .type-input { font-family: var(--serif); border-radius: 0; }
.landing .f label, .landing legend { font: 600 15px/1.3 var(--sans); }
.q { font-family: var(--sans); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choices.row { grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 24px; }
.choices label, .check { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: var(--step); font-size: 16px; cursor: pointer; font-weight: 400 !important; }
.choices.row label { background: none; padding: 0; }
.choices label:has(input:checked), .check:has(input:checked) { background: var(--sky); }
.choices input, .check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--ink); flex: none; }
/* Join steps: a two-part progress line on top; only the current step shows (script hides the other). */
.j-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.j-progress li { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 3px solid var(--line); font: 600 14px/1.2 var(--sans); color: var(--muted); transition: border-color .3s, color .3s; }
.j-progress b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--step); font-size: 12.5px; }
.j-progress li.on, .j-progress li.done { border-color: var(--ink); color: var(--ink); }
.j-progress li.on b { background: var(--tag); color: var(--tag-ink); }
.j-progress li.done b { background: var(--ink); color: #fff; }
.j-step { display: grid; gap: 20px; }
.j-h { margin: 0; font: 400 var(--t-m)/1.1 var(--serif); outline: none; }
.j-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.j-foot p { margin: 0; }
.j-foot .btn.big { flex: 1 1 auto; width: auto; }
.j-back { order: -1; min-height: 48px; padding-inline: 24px; background: var(--step); color: var(--ink); }
.j-step legend .opt { font-weight: 400; }
[aria-invalid="true"] { border-color: var(--warn) !important; }
fieldset:has([aria-invalid="true"]) .q { color: var(--warn); }
.join-done { background: var(--surface); border-radius: 14px; padding: 32px; display: grid; gap: 14px; justify-items: start; }
.join-done h3 { font: 400 var(--t-m)/1.15 var(--serif); }
.tag-big { background: var(--tag); color: var(--tag-ink); padding: 10px 22px 10px 36px; border-radius: 6px; font: 600 20px var(--sans); transform: rotate(-4deg); clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }

/* FAQ: wide heading, questions indented. */
.faq { display: grid; gap: 80px; }
.qs { display: grid; gap: 12px; margin-left: 33.333%; }
.qs details { border-radius: 10px; transition: background-color .2s; }
.qs details[open] { background: var(--step); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; font-size: clamp(19px, 1.7vw, 24px); padding: 18px 24px; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.qs details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.qs details p { padding: 0 24px 22px; max-width: 52ch; font-size: 17px; }

/* Footer: the address is the headline. */
.foot { background: var(--tag); min-height: 64svh; display: grid; grid-template-rows: auto 1fr auto; gap: 48px; padding: 40px max(var(--m), env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(var(--m), env(safe-area-inset-left, 0px)); }
.foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px 24px; font-size: var(--t-s); }
.foot-top p:first-child { font-weight: 600; }
.foot-mail { align-self: end; display: flex; flex-wrap: wrap; font: 400 clamp(52px, 8.6vw, 148px)/.95 var(--serif); letter-spacing: -.035em; text-decoration: none; }
.foot-mail:hover span { text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .08em; }
.foot-meta { display: grid; grid-template-columns: auto 1fr auto; gap: 12px 32px; font-size: 14px; align-items: start; }
.credits { max-width: 90ch; }

/* Motion: a rise for the parts of each section. */
@media (prefers-reduced-motion: no-preference) {
    .js .rise { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
    .js .rise.is-in { opacity: 1; transform: none; }
    .js .roadmap tr:nth-child(2) { transition-delay: 80ms; }
    .js .roadmap tr:nth-child(3) { transition-delay: 160ms; }
    .js .roadmap tr:nth-child(4) { transition-delay: 240ms; }
    .msg img { transition: transform 1.2s var(--ease); }
    .msg:hover img { transform: scale(1.02); }
}
@media (max-width: 1180px) { .app-chip { display: none; } }

/* One phone at a time on narrow screens; the switch picks which. */
@media (max-width: 860px) {
    .try-switch { display: inline-flex; justify-self: start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--step); }
    .try-switch button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 15px/1 var(--sans); cursor: pointer; }
    .try-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
    .duo { grid-template-columns: minmax(0, 300px); padding: 24px 16px; }
    .wire, .side figcaption { display: none; }
    .duo[data-show="dana"] .side-shop, .duo[data-show="shop"] .side-dana { display: none; }
}

/* Tablet */
@media (max-width: 960px) {
    .price-foot, .try-head, .join, .intro { grid-template-columns: 1fr; }
    .app-in { grid-template-columns: 1fr; grid-template-areas: "copy" "stage" "scenes" "cta"; }
    .app-stage { min-height: 0; padding-block: 12px; }
    .app-scenes { margin-left: 0; max-width: none; }
    .price-foot .btn { justify-content: flex-start; justify-self: start; }
    .hw { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
    .join-copy, .intro-copy { position: static; }
    .next { grid-template-columns: 1fr; }
    .qs { margin-left: 0; }
}

/* Phone: its own composition. */
@media (max-width: 640px) {
    .hero { padding-top: 24px; gap: 18px; }
    .hero-h { font-size: 11vw; }
    .hd-win { padding: 14px 12px 96px; }
    .hd-h { font-size: 28px; }
    .hd-link { display: none; }
    .hd-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
    .hd-row img { width: 48px; height: 48px; }
    .hd-what { font-size: 12.5px; }
    .hd-what b { font-size: 15px; }
    .hd-state { grid-column: 2 / -1; justify-items: start; }
    .hd-row { max-height: 160px; }
    .hd-toast { left: 12px; right: 12px; font-size: 13.5px; }
    .hw { grid-template-columns: 1fr; }
    .hw-track { display: none; }
    .app-chip { display: none; }
    .app-disc { width: 120%; }
    .roadmap { grid-template-columns: 1fr; }
    .rm-name { display: none; }
    .rm-note { grid-column: 1; }
    .roadmap tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; }
    .roadmap th, .roadmap td { padding: 0 !important; width: auto; }
    .roadmap td:not(.state) { grid-column: 1 / -1; grid-row: 2; }
    .roadmap tr.grp { padding-top: 32px; }
    .price-line { font-size: 12.4vw; }
    .price-foot p { font-size: 17px; }
    .price-foot .btn { width: 100%; }
    .choices { grid-template-columns: 1fr; }
    .foot { min-height: 60svh; }
    .foot-top { grid-template-columns: 1fr; }
    .foot-mail { font-size: 12.4vw; flex-direction: column; }
    .foot-meta { grid-template-columns: 1fr; }
}