/* Second screen "So läuft es ab": a letter leaves its envelope and unfolds, a phone scans the code, the site goes online.
   The desk is a size container: everything on it is measured in cqw, so it scales as one picture.
   States are cumulative classes on .desk: s0 letter out and open, s1 scanned and opened, s2 online. */

:root { --t-h2: clamp(2.1rem, min(3.6vw, 6.6svh), 3.9rem); }

.flow {
  position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center; gap: clamp(24px, 4vw, 72px);
  padding: calc(var(--hdr) + 8px) calc(var(--gutter) + max(0px, (100% - 1480px) / 2)) 32px;   /* full width like the hero, content within 1480 */
  overflow-x: clip;   /* the phone waits off to the right before it comes in */
}
.flow-copy { order: 2; max-width: 560px; }
.h2 { margin: 0; font: 500 var(--t-h2)/1.02 var(--font); letter-spacing: -.03em; }
.h2 span { color: var(--dim); }
.flow-lead { margin: 22px 0 0; max-width: 32em; font-size: var(--t-lead); line-height: 1.6; color: var(--muted); }

/* the three steps: each one replays its part of the picture */
.steps { list-style: none; margin: 34px 0 0; padding: 0; border-left: 1px solid var(--line); }
.step {
  position: relative; display: grid; gap: 4px; width: 100%; padding: 13px 0 13px 24px; text-align: left;
  color: var(--muted); transition: color .3s;
}
.step:hover { color: var(--fg); }
.st-k { font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); transition: color .3s; }
.step b { font-size: 18px; font-weight: 500; line-height: 1.25; }
.st-t { font-size: 14.5px; line-height: 1.5; color: var(--dim); transition: color .3s; }
.st-bar { position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--terra-lit); transform: scaleY(0); transform-origin: top; }
.step.on { color: var(--fg); }
.step.on .st-k { color: var(--terra-lit); }
.step.on .st-t { color: var(--muted); }
.step.on .st-bar { transform: scaleY(1); transition: transform .5s var(--expo); }
.flow.auto .step.on .st-bar { transform: scaleY(0); animation: stbar var(--dur, 3.4s) linear forwards; transition: none; }
.flow.auto .step.on.last .st-bar { animation: none; transform: scaleY(1); }
@keyframes stbar { to { transform: scaleY(1); } }

/* ---------- the desk ---------- */
.desk { order: 1; position: relative; width: 100%; max-width: calc((100svh - var(--hdr) - 90px) / .86); justify-self: center; container-type: inline-size; }
.desk-stage { position: relative; height: 90cqw; }
.desk-cap { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.desk-cap .tag { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--terra-lit); border: 1px solid rgba(210, 102, 74, .45); padding: 5px 7px; border-radius: 2px; }

/* the table: dark oak with a warm pool of light, fading out at the edges */
.desk-stage::before {
  content: ''; position: absolute; left: -9%; right: -9%; top: -7%; bottom: -6%; pointer-events: none; border-radius: 3cqw;
  background:
    radial-gradient(60% 55% at 42% 46%, rgba(255, 206, 150, .13), transparent 72%),
    repeating-linear-gradient(91deg, rgba(255, 235, 210, .022) 0 .25cqw, transparent .25cqw 1.5cqw),
    repeating-linear-gradient(89.4deg, rgba(0, 0, 0, .18) 0 .5cqw, transparent .5cqw 4.2cqw),
    linear-gradient(180deg, #1d1712, #16110d);
  -webkit-mask-image: radial-gradient(70% 66% at 48% 50%, #000 52%, transparent 100%);
          mask-image: radial-gradient(70% 66% at 48% 50%, #000 52%, transparent 100%);
}

/* ---------- the envelope and the letter ----------
   The real ones: a C6/5 envelope (229 × 114 mm) printed by envelopes.mjs, and the v2 letter (letter.mjs) on
   A4, DIN 5008 form B, folded at 105 and 210 mm. Here the letter is three panels with the same page in each;
   the top and bottom panels lie folded over the middle one and open like paper does. */
.scene {
  position: absolute; inset: 0; pointer-events: none;   /* a picture: its moved boxes must never cover the steps */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the envelope, front up: sender, stamp and postmark, the visitor's business as the recipient */
.env, .env-flap { position: absolute; left: 3.3cqw; top: 36.7cqw; width: 65.4cqw; height: 32.6cqw; transform: rotate(-3deg); translate: 0 0; rotate: 0deg; }
.env {
  z-index: 2; container-type: inline-size; border-radius: .3cqw;
  background: var(--grain), linear-gradient(166deg, #f9f7f1 0%, #efebe2 60%, #e6e1d6 100%);
  box-shadow: 0 .25cqw .5cqw rgba(0, 0, 0, .35), 0 2cqw 4.4cqw rgba(0, 0, 0, .5);
}
.env::before {   /* the seams of the back shine through a little */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(to top right, transparent calc(50% - .1cqi), rgba(90, 80, 60, .07) 50%, transparent calc(50% + .1cqi)) 0 100% / 50% 62% no-repeat,
    linear-gradient(to top left, transparent calc(50% - .1cqi), rgba(90, 80, 60, .07) 50%, transparent calc(50% + .1cqi)) 100% 100% / 50% 62% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 6%);
}
.env-from { position: absolute; left: 5.2cqi; top: 4.4cqi; font: 400 1.2cqi/1.45 var(--font); color: #2e2e33; }
.env-from b { font-weight: 650; letter-spacing: .12em; }
.env-to { position: absolute; left: 46.3cqi; top: 20.5cqi; max-width: 48cqi; font: 400 1.78cqi/1.4 var(--font); color: #111114; overflow-wrap: anywhere; }
.env-stamp { position: absolute; right: 3.6cqi; top: 3.6cqi; width: 9.4cqi; height: 11.1cqi; filter: drop-shadow(0 .1cqi .15cqi rgba(0, 0, 0, .25)); }
.env-pm { position: absolute; right: 7.4cqi; top: 5.4cqi; width: 21cqi; height: 9.2cqi; opacity: .62; mix-blend-mode: multiply; transform: rotate(-4deg); }
/* the flap on the back: it opens above the top edge and shows the grey security print inside */
.env-flap { z-index: 0; perspective: 60cqw; }
.ef {
  position: absolute; left: 2%; right: 2%; bottom: 100%; height: 30%;
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); border-radius: .4cqw .4cqw 0 0;
  background: repeating-linear-gradient(45deg, rgba(70, 80, 100, .16) 0 .22cqw, transparent .22cqw .55cqw), linear-gradient(180deg, #ddd9cf, #ece8df);
  transform-origin: 50% 100%; transform: rotateX(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

/* the letter: .letter carries the way from the envelope to the table, .l-body the slide out of the envelope */
.letter { position: absolute; left: 3cqw; top: 2.5cqw; width: 60cqw; height: 84.85cqw; z-index: 1; transform: translate(2.9cqw, 6.1cqw) rotate(-3deg); }
.l-body { position: absolute; inset: 0; perspective: 150cqw; perspective-origin: 50% 50%; translate: 0 0; }
.lsh { position: absolute; left: 0; width: 100%; box-shadow: 0 .2cqw .45cqw rgba(0, 0, 0, .32), 0 1.5cqw 3.2cqw rgba(0, 0, 0, .44); }
.lsh-t { top: 0; height: 35.355%; opacity: 0; }
.lsh-m { top: 35.355%; height: 35.355%; }
.lsh-b { top: 70.71%; height: 29.29%; opacity: 0; }
.pan { position: absolute; left: 0; width: 100%; transform-style: preserve-3d; }
.pan-t { top: 0; height: 35.355%; z-index: 3; transform-origin: 50% 100%; transform: rotateX(-180deg); }
.pan-m { top: 35.355%; height: 35.355%; z-index: 1; }
.pan-b { top: 70.71%; height: 29.29%; z-index: 2; transform-origin: 50% 0; transform: rotateX(180deg); }
.pf, .pb { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pf { background: var(--grain), linear-gradient(174deg, #fcfbf8, #f4f2ec); }
.pb { transform: rotateX(180deg); background: var(--grain), linear-gradient(180deg, #e9e7e0, #f1efe9 70%, #e4e1d9); }
.pf::before, .pf::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pf::before { background: #2a241c; opacity: 0; }                      /* the turning panel catches less light */
.pan-t .pf::before, .pan-b .pf::before { opacity: .38; }
/* the creases stay in the paper once it lies flat */
.pan-t .pf::after { background: linear-gradient(180deg, transparent 93%, rgba(70, 58, 40, .045) 99.4%, rgba(255, 255, 255, .4) 100%); }
.pan-m .pf::after { background: linear-gradient(180deg, rgba(70, 58, 40, .06) 0, transparent 2.5%, transparent 95%, rgba(70, 58, 40, .04) 99.4%, rgba(255, 255, 255, .35) 100%); }
.pan-b .pf::after { background: linear-gradient(180deg, rgba(70, 58, 40, .06) 0, transparent 3.5%, transparent 100%); }
.sheet { position: relative; width: 100%; aspect-ratio: 1 / 1.41421; container-type: inline-size; color: #141416; }
.pan-m .sheet { margin-top: -50%; }       /* margins in % follow the width: 50 % of 210 mm = 105 mm */
.pan-b .sheet { margin-top: -100%; }

/* the page itself: inside .sheet, 1cqi = 2.1 mm of A4 */
.sh { padding: 7.1cqi 9.52cqi 0 11.88cqi; font: 400 1.814cqi/1.395 var(--font); }
.sh p { margin: 0; }
.fm { position: absolute; left: 1.8cqi; width: 2.8cqi; height: .1cqi; background: #8d8d93; }
.fm-1 { top: 50cqi; } .fm-2 { top: 70.7cqi; } .fm-3 { top: 100cqi; }
.l-top { display: flex; justify-content: space-between; align-items: flex-start; height: 12cqi; }
.l-brand { display: grid; justify-items: start; }
.l-logo { display: inline-flex; align-items: baseline; font: 700 3.55cqi/1 var(--font); letter-spacing: .13em; }
.l-logo i { width: .26em; height: .26em; margin-left: .1em; border-radius: 50%; background: #a8452f; }
.l-tag { margin-top: 2.1cqi; font: 400 1.27cqi/1 var(--mono); color: #4a4a50; }
.l-contact { margin-top: .3cqi !important; font: 400 1.32cqi/1.55 var(--mono); color: #34343a; text-align: right; }
.l-right { float: right; width: 22cqi; margin-left: 2.6cqi; }
.l-phone { display: block; width: 100%; aspect-ratio: .482; padding: .85cqi; border-radius: 3.6cqi; background: #121214; }
.l-screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 2.8cqi; background: #2a2a2c; filter: grayscale(1) contrast(1.04); }
.l-screen .app { pointer-events: none; }
.l-code { display: flex; align-items: center; gap: 1.1cqi; margin-top: 1.8cqi; }
.l-qr { flex: none; width: 12.6cqi; height: 12.6cqi; cursor: help; pointer-events: auto; }   /* a little larger than on paper: it has to scan off a screen */
.l-cap { font: 700 1.28cqi/1.28 var(--font); }
.l-url { display: block; margin-top: 1cqi; font: 400 1.08cqi/1.2 var(--mono); color: #4a4a50; overflow-wrap: anywhere; }
.l-sender { width: 40.4cqi; margin-top: 2.3cqi !important; padding-bottom: .7cqi; border-bottom: .1cqi solid #7c7c82; font-size: 1.02cqi; line-height: 1.2; color: #38383d; white-space: nowrap; overflow: hidden; }
.l-to { margin-top: 2.4cqi !important; overflow-wrap: anywhere; }
.l-subj { margin-top: 10.4cqi !important; font-size: 1.86cqi; line-height: 1.37; font-weight: 700; overflow-wrap: anywhere; }
.l-p { margin-top: .85cqi !important; }
.l-hi { margin-top: 1.1cqi !important; }
.l-sign { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 1.5cqi; }
.l-name p + p { margin-top: 5.1cqi !important; }   /* room for the hand signature, as on the printed letter */
.l-qr2 { display: flex; align-items: center; gap: 1.3cqi; margin-top: .4cqi; }
.l-qr2 .qr { flex: none; width: 8cqi; height: 8cqi; }
.l-qr2 > span:last-child { display: grid; gap: .5cqi; font-size: 1.25cqi; line-height: 1.2; }
.l-qr2 i { font: normal 400 1.05cqi/1 var(--mono); color: #4a4a50; }
.l-bottom { position: absolute; left: 11.88cqi; right: 9.52cqi; bottom: 4.6cqi; }
.l-dsgvo { font-size: 1cqi; line-height: 1.5; color: #55555b; }
.l-foot { display: flex; justify-content: space-between; gap: 2cqi; margin-top: 1.5cqi !important; padding-top: 1.3cqi; border-top: .1cqi solid #c4c4c8; font: 400 1.08cqi/1 var(--mono); color: #55555b; white-space: nowrap; }
.l-foot span:first-child { overflow: hidden; }
.qr { display: block; }
.qr svg { display: block; width: 100%; height: 100%; }
/* a rubber stamp: uneven ink, the text shows through it */
.stamp {
  /* lands in the empty band between the P.S. and the privacy note, so it covers no printed text */
  position: absolute; left: 31cqi; top: 110cqi; z-index: 1; display: grid; place-items: center; padding: 1.3cqi 2.6cqi 1.1cqi;
  border: .6cqi solid #b0442e; border-radius: 1.2cqi; color: #b0442e; text-transform: uppercase; text-align: center;
  font: 800 5.4cqi/1 var(--font); letter-spacing: .08em; mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.6 2.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 14cqi 14cqi;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.6 2.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 14cqi 14cqi;
  opacity: 0; transform: rotate(-7deg) scale(1.7);
}
.stamp small { display: block; margin-top: .8cqi; font: 800 2.3cqi/1 var(--font); letter-spacing: .2em; }

/* the phone that scans the code */
.dphone {
  --ph: 70cqw;
  position: absolute; right: 1cqw; top: 8cqw; z-index: 6;
  opacity: 0; transform: translate(22cqw, 10cqw) rotate(10deg);
}
.dphone .phone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 calc(var(--ph) * .006) #050506, 0 3cqw 6cqw -1cqw rgba(0, 0, 0, .75); }
.dphone .screen { background: #0b0b0c; }
/* every part here is scoped to .dphone: a plain .tap is the hero's touch mode */
.dphone .cam, .dphone .banner, .dphone .d-tap, .dphone .d-apps, .dphone .urlbar { position: absolute; }
.cam { inset: 0; z-index: 1; display: grid; grid-template-rows: 1fr auto; background: radial-gradient(120% 80% at 50% 45%, #ebe6db, #b9b2a4 70%, #4b4740); }
.cam-view { position: relative; align-self: center; justify-self: center; width: 52%; aspect-ratio: 1; transform: perspective(40cqw) rotateX(14deg) rotate(-4deg) scale(.92); }
.cam-view .qr { position: absolute; inset: 9%; filter: blur(.25cqw); }
.br { position: absolute; width: 22%; height: 22%; border: .7cqw solid #ffd60a; opacity: 0; transform: scale(1.5); }
.br-1 { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 2cqw; }
.br-2 { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 2cqw; }
.br-3 { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 2cqw; }
.br-4 { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 2cqw; }
.cam-bar { display: grid; justify-items: center; gap: 1.2cqw; padding: 2cqw 0 3.4cqw; background: rgba(0, 0, 0, .82); }
.cam-bar i { width: 8cqw; height: 8cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5cqw #0b0b0c, 0 0 0 .9cqw #fff; }
.cam-bar b { order: -1; font: 600 1.25cqw/1 var(--font); letter-spacing: .12em; color: #ffd60a; }
.banner {
  left: 4%; right: 4%; top: 7.5%; z-index: 3; display: flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw 2cqw;
  border-radius: 2.6cqw; background: rgba(250, 250, 250, .92); color: #111; font: 500 1.55cqw/1.25 var(--font);
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .25); opacity: 0; transform: translateY(-40%) scale(.96);
}
.banner svg { flex: none; width: 4.4cqw; height: 4.4cqw; fill: none; stroke: #0a84ff; stroke-width: 1.8; }
.banner b { font-weight: 600; }
.d-tap { left: 50%; top: 11%; z-index: 4; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: 0; transform: scale(.3); }
.d-apps { left: 0; right: 0; top: 0; bottom: 0; z-index: 2; overflow: hidden; opacity: 0; }
.urlbar {
  left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 1.6cqw; padding: 1.6cqw 2.4cqw 3cqw;
  background: #f6f6f6; color: #111; font: 500 1.6cqw/1 var(--font); opacity: 0;   /* opaque: the page below the first screen must not show through */
}
.u-aa { font-size: 1.4cqw; font-weight: 600; }
.u-url { flex: 1; display: flex; align-items: center; justify-content: center; gap: .8cqw; height: 4.6cqw; border-radius: 1.4cqw; background: #e4e4e6; white-space: nowrap; overflow: hidden; }
.u-url svg { flex: none; width: 1.7cqw; height: 1.7cqw; fill: none; stroke: currentColor; stroke-width: 1.6; }
.u-url b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.u-live { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #b9b9bd; }
.d-apps .app { pointer-events: auto; overflow: visible; }   /* the page goes on below the first screen; .d-apps clips it */
.d-apps .app .sb::before { content: ''; position: absolute; inset: 0 0 -38px; z-index: -1; background: var(--mo-bg); opacity: 0; }   /* a sticky bar once the page scrolls */

/* ---------- choreography ---------- */
/* s0: the flap opens, the folded letter slides out, the envelope goes, the letter comes to the middle and
   opens: first the top panel, then the bottom one. Transitions only: a jump never replays them. */
.desk.s0 .ef { transform: rotateX(0deg); transition: transform .5s cubic-bezier(.3, 0, .2, 1) .1s; }
.desk.s0 .l-body { translate: 0 -24cqw; transition: translate .85s cubic-bezier(.35, 0, .2, 1) .5s; }
.desk.s0 .env, .desk.s0 .env-flap {
  translate: -50cqw 16cqw; rotate: -13deg; opacity: 0;
  transition: translate 1s cubic-bezier(.5, 0, .3, 1) 1.25s, rotate 1s cubic-bezier(.5, 0, .3, 1) 1.25s, opacity .5s ease 1.5s;
}
.desk.s0 .letter { transform: translate(0, 24cqw) rotate(0deg);   /* square to the screen: the code stays sharp enough to scan */ transition: transform .9s cubic-bezier(.3, 0, .2, 1) 1.4s; }
.desk.s0 .pan-t { transform: rotateX(0deg); transition: transform .75s cubic-bezier(.4, .05, .2, 1) 2.25s; }
.desk.s0 .pan-b { transform: rotateX(0deg); transition: transform .7s cubic-bezier(.4, .05, .2, 1) 2.8s; }
.desk.s0 .pan-t .pf::before { opacity: 0; transition: opacity .75s ease 2.25s; }
.desk.s0 .pan-b .pf::before { opacity: 0; transition: opacity .7s ease 2.8s; }
.desk.s0 .lsh-t { opacity: 1; transition: opacity .35s ease 2.75s; }
.desk.s0 .lsh-b { opacity: 1; transition: opacity .35s ease 3.25s; }

/* s1: the phone glides over the code on the letter, finds it, offers the link, then moves aside and opens the site */
.desk.s1 .dphone { animation: scan 3s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes scan {
  0% { opacity: 0; transform: translate(22cqw, 10cqw) rotate(10deg); }
  12% { opacity: 1; }
  30%, 66% { opacity: 1; transform: translate(-34cqw, 3cqw) rotate(-3deg) scale(1.03); }
  100% { opacity: 1; transform: translate(0, 0) rotate(3deg); }
}
.desk.s1 .br { opacity: 1; transform: none; transition: opacity .2s ease .95s, transform .5s var(--expo) .95s; }
.desk.s1 .banner { animation: banner 1.3s var(--expo) 1.25s both; }
@keyframes banner { 0% { opacity: 0; transform: translateY(-40%) scale(.96); } 30%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-20%); } }
.desk.s1 .d-tap { animation: dtap .55s ease-out 1.8s both; }
@keyframes dtap { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.desk.s1 .cam { opacity: 0; transition: opacity .4s ease 2.15s; }
.desk.s1 .d-apps, .desk.s1 .urlbar { opacity: 1; transition: opacity .4s ease 2.15s; }

/* s1, after the site opens: a thumb scrolls down to the prices, on to the end, and flicks back to the top.
   The page moves in screen pixels (--sc is the app's scale), the status bar and menu stay where they are. */
.desk.s1 .d-apps .app { animation: browse 4.2s cubic-bezier(.55, 0, .25, 1) 1s both; }
.desk.s1 .d-apps .app .sb, .desk.s1 .d-apps .app .menu { animation: browse-fix 4.2s cubic-bezier(.55, 0, .25, 1) 1s both, browse-ink 4.2s ease 1s both; }
.desk.s1 .d-apps .app .sb::before { animation: browse-bar 4.2s ease 1s both; }
@keyframes browse {
  0% { translate: 0 0; }
  14%, 30% { translate: 0 calc(var(--y1, 0) * var(--sc, 1) * -1px); }
  44%, 58% { translate: 0 calc(var(--y2, 0) * var(--sc, 1) * -1px); }
  70%, 82% { translate: 0 calc(var(--y3, 0) * var(--sc, 1) * -1px); }
  100% { translate: 0 0; }
}
@keyframes browse-fix {
  0% { translate: 0 0; }
  14%, 30% { translate: 0 calc(var(--y1, 0) * 1px); }
  44%, 58% { translate: 0 calc(var(--y2, 0) * 1px); }
  70%, 82% { translate: 0 calc(var(--y3, 0) * 1px); }
  100% { translate: 0 0; }
}
@keyframes browse-bar { 0%, 4% { opacity: 0; } 12%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes browse-ink { 12%, 90% { color: var(--mo-fg); } }   /* the time and the menu take the page's ink on the sticky bar */

/* s2: own domain, the stamp lands on the letter */
.desk.s2 .u-live { background: #34c759; box-shadow: 0 0 0 0 rgba(52, 199, 89, .5); animation: live 1.8s ease-out .5s 3; }
@keyframes live { to { box-shadow: 0 0 0 1.4cqw rgba(52, 199, 89, 0); } }
.desk.s2 .u-url b { animation: urlflip .6s var(--expo) both; }
@keyframes urlflip { 0% { opacity: 0; transform: translateY(60%); } 100% { opacity: 1; transform: none; } }
.desk.s2 .stamp { opacity: .9; transform: rotate(-7deg) scale(1); transition: opacity .12s ease .7s, transform .35s cubic-bezier(.3, 1.6, .5, 1) .7s; }
.desk.s2 .banner, .desk.s2 .d-tap { animation: none; opacity: 0; }
.desk.s2 .d-apps .app, .desk.s2 .d-apps .app .sb, .desk.s2 .d-apps .app .menu, .desk.s2 .d-apps .app .sb::before { animation: none; }
.desk.s2 .dphone { animation: none; opacity: 1; transform: translate(0, -1cqw) rotate(2deg); transition: transform .8s var(--expo); }

/* a jump shows the earlier states at once */
.desk.jump, .desk.jump *, .desk.jump *::before, .desk.jump *::after { transition: none !important; }

/* ---------- reveal of the copy ---------- */
.js .sv { opacity: 0; transform: translateY(18px); }
.flow.seen .sv { opacity: 1; transform: none; transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--expo) var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  .js .sv { opacity: 1; transform: none; }
  .desk *, .desk, .desk *::before, .desk *::after { transition: none !important; animation: none !important; }
  .desk.s1 .dphone { opacity: 1; transform: translate(0, -1cqw) rotate(2deg); }
  .desk.s1 .banner, .desk.s1 .d-tap { opacity: 0; }
}

/* ---------- smaller screens ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .flow-lead { display: none; }
  .steps { margin-top: 26px; }
  .step { padding-block: 10px; }
}
@media (max-width: 900px) {
  .flow { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; min-height: 0; padding-top: calc(var(--hdr) + 22px); padding-bottom: 28px; }
  .flow-copy { display: contents; }
  .flow .eyebrow { order: 1; margin-bottom: 14px; font-size: 10.5px; letter-spacing: .14em; }
  .h2 { order: 2; font-size: clamp(1.9rem, 8.4vw, 3rem); }
  .flow-lead, .desk-cap { display: none; }
  .desk { order: 3; max-width: 560px; margin-top: 14px; }
  .steps { order: 4; margin-top: 10px; }
  .step { padding: 9px 0 9px 18px; }
  .step b { font-size: 16px; }
  .st-t { display: none; font-size: 13.5px; }
  .step.on .st-t { display: block; }
}