/* ---- ioskit.css ---- */
/* ios-kit.css: iPhone replica kit + flow player. Every class is prefixed ik-. */
:where(:root) {
  --ink: #1c1a14; --ink-soft: #6b6555; --paper: #fff8e7; --card: #fffdf6; --line: rgba(28,26,20,.14);
  --accent: #ffd21a; --accent-ink: #1c1a14;
}
.ik-phone, .ik-phone *, .ik-player, .ik-player * { box-sizing: border-box; }
.ik-phone, .ik-screen {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: 0;
}

/* ---------- phone frame ---------- */
.ik-phone { position: relative; width: var(--ik-phone-w, 300px); aspect-ratio: 414 / 868; flex: none; }
.ik-phone-in { position: absolute; left: 0; top: 0; width: 414px; height: 868px; transform-origin: 0 0; }
.ik-bezel { position: absolute; inset: 0; border-radius: 55px; background: #0c0c0e;
  box-shadow: inset 0 0 0 2.5px #4a4a50, inset 0 0 0 4px #17171a, 0 22px 44px rgba(20,16,6,.28), 0 2px 6px rgba(20,16,6,.2); }
.ik-glass { position: absolute; left: 12px; top: 12px; width: 390px; height: 844px; border-radius: 44px; overflow: hidden; background: #fff; isolation: isolate; }
.ik-island { position: absolute; left: 135px; top: 11px; width: 120px; height: 35px; border-radius: 20px; background: #000; z-index: 90; }
.ik-taps { position: absolute; inset: 0; z-index: 95; pointer-events: none; }
.ik-thumb-ph .ik-bezel { box-shadow: inset 0 0 0 2.5px #4a4a50, inset 0 0 0 4px #17171a, 0 10px 22px rgba(20,16,6,.22); }

/* ---------- screen base ---------- */
.ik-screen { position: absolute; left: 0; top: 0; width: 390px; height: 844px; overflow: hidden; background: #fff; color: #000; }
.ik-noanim, .ik-noanim * { transition: none !important; animation: none !important; }
.ik-status { position: absolute; left: 0; right: 0; top: 0; height: 47px; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 0; color: #000; }
.ik-status.ik-dark { color: #fff; }
.ik-time { width: 128px; text-align: center; font-size: 16px; font-weight: 600; padding-top: 4px; }
.ik-sb-r { width: 128px; display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 4px; }
.ik-home { position: absolute; left: 128px; bottom: 8px; width: 134px; height: 5px; border-radius: 3px; background: #000; z-index: 80; }
.ik-home.ik-dark { background: #fff; }
.ik-blue { color: #007aff; }
.ik-b { font-weight: 600; }

/* ---------- notification banner / notes ---------- */
.ik-banner, .ik-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 22px; background: rgba(246,246,248,.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 6px 22px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.06); color: #000; }
.ik-banner { position: absolute; left: 10px; right: 10px; top: 54px; z-index: 85; transform: translateY(-160%); opacity: 0; transition: transform .5s cubic-bezier(.2,.9,.25,1.05), opacity .3s; }
.ik-banner.ik-on { transform: none; opacity: 1; }
.ik-n-ic { flex: none; width: 38px; height: 38px; border-radius: 9px; overflow: hidden; }
.ik-n-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ik-n-tx { flex: 1; min-width: 0; }
.ik-n-hd { display: flex; justify-content: space-between; font-size: 12.5px; color: #6c6c70; line-height: 15px; text-transform: uppercase; letter-spacing: .02em; }
.ik-n-ti { font-size: 15px; font-weight: 600; line-height: 19px; margin-top: 1px; }
.ik-n-bd { font-size: 15px; line-height: 19px; color: #1c1c1e; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Safari ---------- */
.ik-page { position: absolute; left: 0; right: 0; top: 47px; bottom: 0; overflow: hidden; }
.ik-page-img { position: absolute; left: 0; top: 0; display: block; max-width: none; will-change: transform; }
.ik-page-strip { position: absolute; left: 0; right: 0; top: 0; height: 47px; z-index: 30; }
.ik-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 31; pointer-events: none; background: linear-gradient(to top, rgba(255,255,255,.96) 0%, rgba(255,255,255,.8) 40%, rgba(255,255,255,0) 100%); transition: opacity .25s; }
.ik-sbar { position: absolute; left: 14px; right: 14px; bottom: 34px; height: 48px; display: flex; gap: 8px; z-index: 50; transition: opacity .2s, transform .3s; }
.ik-pill { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 16px; border-radius: 24px;
  background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 4px 18px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.1), inset 0 .5px 0 rgba(255,255,255,.9); color: #1c1c1e; }
.ik-aa { font-size: 19px; font-weight: 500; letter-spacing: -.5px; width: 28px; }
.ik-aa small { font-size: 12px; }
.ik-url { display: flex; align-items: center; gap: 5px; font-size: 16.5px; font-weight: 400; }
.ik-url svg { opacity: .7; }
.ik-rl { display: flex; width: 28px; justify-content: flex-end; }
.ik-dotbtn { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 4px 18px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.1), inset 0 .5px 0 rgba(255,255,255,.9); color: #1c1c1e; }
.ik-has-kb .ik-sbar, .ik-has-kb .ik-fade { opacity: 0; pointer-events: none; }
.ik-typing { position: absolute; z-index: 20; background: #fff; color: #1c1a14; white-space: nowrap; overflow: hidden; font-family: inherit; display: flex; align-items: center; }
.ik-typing span { white-space: pre; }
.ik-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; background: #007aff; border-radius: 1px; animation: ik-blink 1s steps(1) infinite; flex: none; }
@keyframes ik-blink { 50% { opacity: 0; } }

.ik-kb { position: absolute; left: 0; right: 0; bottom: 0; height: 336px; z-index: 60; background: #d1d3d9; transform: translateY(100%); transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.ik-kb.ik-up { transform: none; }
.ik-kb-acc { height: 44px; background: rgba(245,245,247,.97); display: flex; align-items: center; padding: 0 16px; gap: 6px; border-bottom: .5px solid rgba(0,0,0,.12); color: #8e8e93; }
.ik-kb-ab { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: #8e8e93; }
.ik-kb-ab2 { color: #8e8e93; }
.ik-kb-done { margin-left: auto; color: #007aff; font-size: 17px; font-weight: 600; }
.ik-kb-pred { height: 40px; display: flex; background: #d1d3d9; padding: 0 0; align-items: center; }
.ik-kb-pred span { flex: 1; text-align: center; font-size: 16px; color: #1c1c1e; position: relative; }
.ik-kb-pred span + span::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: .5px; background: rgba(0,0,0,.25); }
.ik-kb-keys { padding: 8px 3px 0; background: #d1d3d9; }
.ik-kb-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.ik-kb-row:nth-child(4) { margin-bottom: 0; }
.ik-key { flex: 1; height: 42px; border-radius: 5px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.35); font-style: normal; font-size: 22px; display: flex; align-items: center; justify-content: center; color: #000; max-width: 36px; }
.ik-kb-r2 { padding: 0 20px; }
.ik-kb-r2 .ik-key { max-width: none; }
.ik-kb-r3 { padding: 0; justify-content: space-between; }
.ik-kb-mid { display: flex; gap: 6px; flex: 1; margin: 0 14px; }
.ik-kb-mid .ik-key { max-width: none; }
.ik-key-mod { background: #aeb3be; max-width: none; flex: none; width: 44px; font-size: 16px; }
.ik-kb-r4 .ik-key-123 { width: 84px; }
.ik-kb-r4 .ik-key-space { background: #fff; font-size: 16px; max-width: none; flex: 1; }
.ik-kb-r4 .ik-key-ret { width: 98px; }
.ik-kb-bot { display: flex; justify-content: space-between; padding: 6px 22px 0; color: #1c1c1e; }

.ik-menu { position: absolute; z-index: 70; width: 252px; padding: 4px 0; border-radius: 16px; background: rgba(247,247,249,.86);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: 0 10px 40px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.08);
  transform-origin: top left; transform: scale(.82); opacity: 0; transition: transform .28s cubic-bezier(.2,.9,.3,1.15), opacity .18s; }
.ik-menu.ik-on { transform: none; opacity: 1; }
.ik-mi { height: 46px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; font-size: 17px; color: #000; }
.ik-mi + .ik-mi { border-top: .5px solid rgba(0,0,0,.14); }
.ik-mi svg { color: #1c1c1e; }

/* ---------- Camera ---------- */
.ik-cam { background: #000; }
.ik-cam-top { position: absolute; left: 0; right: 0; top: 47px; height: 71px; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; color: #fff; transition: opacity .2s; }
.ik-cam-top .ik-ctc { opacity: .9; }
.ik-vf { position: absolute; left: 0; top: 118px; width: 390px; height: 520px; overflow: hidden; background: #4a2c14; }
.ik-vf-bg { position: absolute; inset: -30px; filter: blur(14px) saturate(1.15);
  background:
    radial-gradient(120% 60% at 50% 100%, #6b4423 0%, #3b2412 55%, transparent 100%),
    radial-gradient(70% 50% at 20% 20%, #f2b45a 0%, transparent 70%),
    radial-gradient(60% 45% at 85% 12%, #ffd89a 0%, transparent 70%),
    linear-gradient(170deg, #9b6a36 0%, #5a3519 55%, #2e1a0c 100%); }
.ik-vf-bg i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,226,160,.85), rgba(255,200,110,.25) 70%, transparent 72%); opacity: .75; }
.ik-subj { position: absolute; transform-origin: 50% 50%; }
.ik-poster { position: absolute; inset: 0; background: #fff; border-radius: 3px; overflow: hidden; box-shadow: 0 18px 30px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.4); animation: ik-sway 5s ease-in-out infinite; }
.ik-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes ik-sway { 50% { transform: translate(1px, -1.5px); } }
.ik-mini { position: absolute; left: 0; top: 0; border-radius: 30px; background: #111; box-shadow: inset 0 0 0 1.5px #55555c, 0 22px 34px rgba(0,0,0,.5); }
.ik-mini-in { position: absolute; inset: 6px; border-radius: 25px; background: #f2f2f7; overflow: hidden; }
.ik-mini-isl { position: absolute; left: 50%; top: 7px; width: 54px; height: 15px; margin-left: -27px; background: #000; border-radius: 9px; }
.ik-mini-bar { position: absolute; left: 0; right: 0; top: 24px; height: 18px; display: flex; justify-content: space-between; padding: 0 12px; font-size: 10px; color: #007aff; align-items: center; }
.ik-mini-dots { width: 15px; height: 15px; border-radius: 50%; background: rgba(120,120,128,.14); display: flex; align-items: center; justify-content: center; transform: scale(.55); }
.ik-mini-pass { position: absolute; }
.ik-brk { position: absolute; z-index: 6; opacity: 0; transform-origin: 50% 50%; transition: opacity .2s, scale .32s cubic-bezier(.2,.9,.3,1.25); scale: 1.4; pointer-events: none; }
.ik-brk.ik-on { opacity: 1; scale: 1; }
.ik-brk i { position: absolute; width: 22px; height: 22px; border: 3.5px solid #ffd60a; filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 3px rgba(0,0,0,.45)); }
.ik-brk i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 9px; }
.ik-brk i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 9px; }
.ik-brk i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 9px; }
.ik-brk i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 9px; }
.ik-linkchip { position: absolute; z-index: 7; transform: translate(-50%, 8px) scale(.85); opacity: 0; transform-origin: 50% 0; transition: opacity .22s, transform .34s cubic-bezier(.2,.9,.3,1.3);
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px 0 11px; border-radius: 18px; background: #ffd60a; color: #000; font-size: 15.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.ik-linkchip.ik-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ik-modes { position: absolute; left: 0; right: 0; top: 650px; height: 24px; color: rgba(255,255,255,.82); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; transition: opacity .2s; }
.ik-modes span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.ik-modes .ik-m-on { color: #ffd60a; }
.ik-shutter-row { position: absolute; left: 0; right: 0; top: 696px; height: 84px; transition: opacity .2s; }
.ik-shutter { position: absolute; left: 159px; top: 6px; width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; }
.ik-shutter i { width: 58px; height: 58px; border-radius: 50%; background: #fff; }
.ik-thumb { position: absolute; left: 38px; top: 16px; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #6b4423, #c18a4a); box-shadow: 0 0 0 1.5px rgba(255,255,255,.3); }
.ik-flipbtn { position: absolute; right: 38px; top: 16px; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; color: #fff; }
.ik-selfie .ik-vf { background: #222; }
.ik-vf-selfie img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.ik-flashov { position: absolute; inset: 0; background: #fff; opacity: 0; }
.ik-flashov.ik-go { animation: ik-flash .5s ease-out forwards; }
.ik-flashov.ik-instant { animation: none; opacity: 0; }
@keyframes ik-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.ik-retake { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: #000; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; padding: 40px 28px 0; color: #fff; font-size: 17px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ik-retake b { font-weight: 600; }
.ik-shot .ik-retake { opacity: 1; }
.ik-shot .ik-modes, .ik-shot .ik-shutter-row, .ik-shot .ik-cam-top { opacity: 0; }
.ik-shot .ik-home { z-index: 99; }

/* ---------- Pass ---------- */
.ik-pass { position: relative; width: 375px; border-radius: 12px; overflow: hidden; background: var(--pb, #ffd21a); color: var(--pf, #1c1a14);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 28px rgba(0,0,0,.2); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; }
.ik-p-top { position: relative; height: 50px; display: flex; align-items: center; padding: 0 14px 0 12px; gap: 6px; }
.ik-p-logo { width: 58px; height: 50px; object-fit: contain; flex: none; display: block; }
.ik-p-wide .ik-p-logo { width: 160px; object-position: left center; }
.ik-p-wide .ik-p-venue { display: none; }
.ik-p-venue { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-p-hdr { flex: none; text-align: right; display: flex; flex-direction: column; justify-content: center; height: 50px; transition: opacity .22s; }
.ik-p-hdr b { font-size: 10px; letter-spacing: .05em; font-weight: 600; color: var(--pl, #695000); line-height: 12px; }
.ik-p-hdr span { font-size: 20px; line-height: 24px; }
.ik-p-strip { position: relative; height: 144px; background: rgba(255,255,255,.3); }
.ik-p-strip img { display: block; width: 375px; height: 144px; }
.ik-p-strip .ik-p-ov { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .45s ease; }
.ik-p-fields { height: 56px; padding: 10px 16px 0; display: flex; justify-content: space-between; transition: opacity .22s; }
.ik-p-f { display: flex; flex-direction: column; min-width: 0; }
.ik-p-f b { font-size: 10px; letter-spacing: .05em; font-weight: 600; text-transform: uppercase; color: var(--pl, #695000); line-height: 12px; }
.ik-p-f span { font-size: 20px; line-height: 26px; white-space: nowrap; }
.ik-p-c { text-align: center; align-items: center; }
.ik-p-r { text-align: right; align-items: flex-end; }
.ik-p-qrsec { display: flex; flex-direction: column; align-items: center; padding: 14px 0 18px; transition: opacity .22s; }
.ik-p-qrsec.ik-p-noqr { padding: 14px 0; }
.ik-p-qr { width: 150px; height: 150px; padding: 10px; background: #fff; border-radius: 8px; }
.ik-p-qr img { display: block; width: 130px; height: 130px; }
.ik-p-cap { margin: 10px 0 0; font-size: 13px; line-height: 17px; text-align: center; white-space: pre-line; color: var(--pf, #1c1a14); }
.ik-p-noqr .ik-p-cap { margin: 0; }

/* ---------- Wallet sheet + Wallet ---------- */
.ik-under { position: absolute; inset: 0; isolation: isolate; z-index: 1; }
.ik-dim { position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 20; opacity: 0; transition: opacity .35s; }
.ik-sheet-up .ik-dim { opacity: 1; }
.ik-sheet { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; z-index: 25; background: #f2f2f7; border-radius: 14px 14px 0 0; transform: translateY(100%); transition: transform .5s cubic-bezier(.2,.85,.2,1); box-shadow: 0 -2px 20px rgba(0,0,0,.18); }
.ik-sheet-up .ik-sheet { transform: none; }
.ik-sheet-nav { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 17px; }
.ik-sheet-pass { position: absolute; left: 35px; top: 74px; }
.ik-sheet-home { display: none; }

.ik-wallet { background: linear-gradient(#f2f2f7 0%, #fff 70%); }
.ik-w-bar { position: absolute; left: 0; right: 0; top: 56px; height: 44px; padding: 0 18px 0 20px; display: flex; align-items: center; justify-content: space-between; font-size: 17px; z-index: 5; }
.ik-w-more { width: 36px; height: 36px; border-radius: 50%; background: rgba(120,120,128,.14); display: flex; align-items: center; justify-content: center; color: #1c1c1e; }
.ik-w-pass { position: absolute; left: 16px; top: 116px; }
.ik-w-back { position: absolute; left: 16px; right: 16px; top: 116px; }
.ik-w-bt { font-size: 28px; font-weight: 700; margin: 0 4px 14px; letter-spacing: -.3px; }
.ik-w-group { background: #fff; border-radius: 20px; padding: 2px 0; box-shadow: 0 0 0 .5px rgba(0,0,0,.05); }
.ik-w-row { padding: 12px 18px; }
.ik-w-row + .ik-w-row { border-top: .5px solid rgba(60,60,67,.2); }
.ik-w-row small { display: block; font-size: 13px; color: #8a8a8e; line-height: 17px; }
.ik-w-row span { display: block; font-size: 17px; line-height: 22px; white-space: pre-line; color: #000; }

/* ---------- Lock ---------- */
.ik-lock { background: radial-gradient(90% 55% at 20% 12%, #ffe9a8 0%, transparent 60%), radial-gradient(80% 50% at 90% 70%, #d9822b 0%, transparent 70%), linear-gradient(165deg, #f6c25b 0%, #eaa03a 45%, #b9651f 100%); }
.ik-l-lock { position: absolute; left: 0; right: 0; top: 60px; text-align: center; color: rgba(255,255,255,.9); }
.ik-l-lock svg { width: 13px; height: 16px; }
.ik-l-date { position: absolute; left: 0; right: 0; top: 84px; text-align: center; color: rgba(255,255,255,.9); font-size: 20px; font-weight: 500; text-shadow: 0 1px 8px rgba(120,60,0,.2); }
.ik-l-time { position: absolute; left: 0; right: 0; top: 104px; text-align: center; color: #fff; font-size: 100px; line-height: 110px; font-weight: 300; letter-spacing: -1px; font-family: "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif; text-shadow: 0 2px 16px rgba(120,60,0,.22); }
.ik-l-stack { position: absolute; left: 16px; right: 16px; top: 318px; display: flex; flex-direction: column; gap: 8px; }
.ik-note { transition: opacity .4s, transform .55s cubic-bezier(.2,.9,.25,1.05); opacity: 0; transform: translateY(46px) scale(.97); }
.ik-note.ik-on { opacity: 1; transform: none; }
.ik-l-sug { position: absolute; left: 16px; right: 16px; top: 650px; height: 64px; border-radius: 22px; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 10px;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 6px 22px rgba(0,0,0,.12), 0 0 0 .5px rgba(255,255,255,.4); color: #000; }
.ik-l-sug-logo { width: 48px; height: 42px; border-radius: 9px; background: var(--pb, #ffd21a); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.ik-l-sug-logo img { height: 36px; width: auto; }
.ik-l-sug-tx { flex: 1; display: flex; flex-direction: column; }
.ik-l-sug-tx b { font-size: 16px; font-weight: 600; line-height: 20px; }
.ik-l-sug-tx span { font-size: 13px; color: #55555a; line-height: 16px; }
.ik-l-sug-ic { width: 28px; height: 28px; }
.ik-l-btn { position: absolute; top: 742px; width: 52px; height: 52px; border-radius: 50%; background: rgba(40,30,20,.34); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; color: #fff; }
.ik-l-left { left: 46px; }
.ik-l-right { right: 46px; }

.ik-blank { background: #e7e7ec; }
.ik-blank-l { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); text-align: center; font-size: 17px; font-weight: 500; color: #8a8a90; }

/* ---------- Player ---------- */
.ik-player { container: ikp / inline-size; display: block; width: 100%; max-width: 1100px; margin: 0 auto; color: var(--ink); outline: none; border-radius: 16px; }
.ik-player:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.ik-stage { display: flex; justify-content: center; align-items: flex-start; gap: 28px; padding: 6px 0 4px; }
.ik-ph { display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: .4; transform: scale(.94); transform-origin: 50% 0; transition: opacity .45s ease, transform .45s ease; }
.ik-ph.ik-focus { opacity: 1; transform: none; }
.ik-ph-label { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.ik-player .ik-phone { width: min(var(--ik-phone-w, 300px), calc((100cqw - 28px * (var(--ik-n) - 1)) / var(--ik-n))); }
.ik-caption { margin: 18px auto 0; max-width: 640px; text-align: center; font-size: 19px; line-height: 1.45; min-height: calc(19px * 1.45 * 3); color: var(--ink); text-wrap: balance; }
.ik-cap-in { animation: ik-capin .4s ease; }
@keyframes ik-capin { from { opacity: 0; transform: translateY(4px); } }
.ik-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ik-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.ik-chip:hover { border-color: var(--ink-soft); }
.ik-chip:focus-visible, .ik-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ik-chip-n { width: 24px; height: 24px; border-radius: 50%; background: var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.ik-chip.ik-cur { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ik-chip.ik-cur .ik-chip-n { background: rgba(0,0,0,.16); }
.ik-chip.ik-past .ik-chip-n { background: var(--ink); color: var(--card); font-size: 0; }
.ik-chip.ik-past .ik-chip-n::after { content: "\2713"; font-size: 13px; }
.ik-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px auto 0; max-width: 560px; flex-wrap: wrap; }
.ik-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ik-btn:hover { border-color: var(--ink-soft); }
.ik-btn-play { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ik-prog { flex: 1 1 140px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin: 0 8px; min-width: 100px; }
.ik-prog i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.ik-count { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* taps */
.ik-tap { position: absolute; width: 0; height: 0; opacity: 0; }
.ik-tap i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(54,54,60,.55); border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.3); }
.ik-tap i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.2); opacity: 0; }
.ik-tap.ik-go { animation: ik-tap-vis 1s ease both; }
.ik-tap.ik-go i { animation: ik-tap-press .9s cubic-bezier(.3,.7,.3,1) both; }
.ik-tap.ik-go i::after { animation: ik-tap-rip .9s ease-out .15s both; }
@keyframes ik-tap-vis { 0% { opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ik-tap-press { 0% { transform: scale(1.25); } 25% { transform: scale(.85); } 55% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes ik-tap-rip { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }

@container ikp (max-width: 719px) {
  .ik-ph { display: none; }
  .ik-ph.ik-focus { display: flex; animation: ik-capin .35s ease; }
  .ik-ph-label { order: -1; padding: 4px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); letter-spacing: .06em; }
  .ik-player .ik-phone { width: min(var(--ik-phone-w, 300px), 78cqw); }
  .ik-caption { font-size: 17px; min-height: calc(17px * 1.45 * 4); }
  .ik-chip-t { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ik-phone *, .ik-player *, .ik-screen * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .ik-poster { animation: none !important; }
}

/* ---- page.css ---- */
/* Homepage layout and sections (pages/home.tsx). Every class is prefixed hm-.
   The page sits inside .site-main (1180px container, gutter var(--site-gutter), see the marketing site block in app.css), so
   Hero and Steps fill that width. Sections are spaced by --hm-gap: about 120px on desktop, 72px on phones. */
.hm { --hm-gap: clamp(72px, 10vw, 120px); min-width: 0; padding-bottom: calc(var(--hm-gap) - 40px); }
.hm-hero, .hm-how { min-width: 0; }
.hm-how, .hm-sec { margin-top: var(--hm-gap); }
.hm-sec { scroll-margin-top: 16px; }

/* ---------- section heads: eyebrow + big h2 with a crayon underline or butter highlight (same sizes as the How it works head) ---------- */
.hm-head { max-width: 46rem; margin: 0 0 64px; }
.hm-eyebrow { margin: 0 0 14px; font: 700 12px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.hm-head h2, .hm-faq-side h2, .hm-final h2 { margin: 0; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.hm-hl { white-space: nowrap; background: linear-gradient(transparent 56%, var(--butter) 56%, var(--butter) 90%, transparent 90%); margin: 0 -0.08em; padding: 0 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 719.98px) { .hm-head { margin-bottom: 44px; } }

/* ---------- stats strip: four cells on one paper card, dashed dividers (2 x 2 on phones) ---------- */
.hm-stats { margin-top: clamp(40px, 6vw, 72px); }
.hm .hm-stats-card { padding: 0; border-radius: var(--r-xl); }
.hm-stats-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; min-width: 0; padding: 30px 18px 28px; text-align: center; }
.hm-stat + .hm-stat { border-left: 1.5px dashed var(--rule); }
.hm-num { display: block; font-size: clamp(42px, 5vw, 58px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hm-num small { font-size: 0.5em; font-weight: 800; letter-spacing: 0; }
.hm-lbl { max-width: 15em; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink-soft); text-wrap: balance; }
@media (max-width: 719.98px) {
  .hm-stats-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-stat { padding: 24px 12px 22px; }
  .hm-stat:nth-child(3) { border-left: 0; }
  .hm-stat:nth-child(n + 3) { border-top: 1.5px dashed var(--rule); }
}

/* ---------- features: nine paper cards, each held up by washi tape or a paper pin ---------- */
.hm-fgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 26px; }
.hm .hm-fgrid .hm-fcard { margin: 0; padding: 32px 26px 28px; display: flex; flex-direction: column; gap: 6px; border-radius: var(--r-lg); transition: transform 0.2s var(--ease-land); }
.hm-fcard:nth-child(odd) { transform: rotate(-0.6deg); }
.hm-fcard:nth-child(even) { transform: rotate(0.6deg); }
@media (hover: hover) { .hm-fcard:hover { transform: translateY(-4px) rotate(0deg); } }
.hm-ficon { align-self: flex-start; width: auto; height: 52px; margin-bottom: 6px; transform: rotate(-4deg); }
.hm-fcard:nth-child(even) .hm-ficon { transform: rotate(3deg); }
.hm-fsub { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.hm .hm-fcard h3 { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.hm-ftext { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 959.98px) { .hm-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 959.98px) { .hm-fcard:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 13px); } } /* the ninth card sits centred under the pairs */
@media (max-width: 599.98px) { .hm-fgrid { grid-template-columns: minmax(0, 1fr); gap: 34px; } }
/* the tape and the pins (decorative <span>s inside each card; the tape recipe is the one the How it works panels use) */
.hm-deco { position: absolute; z-index: 3; pointer-events: none; }
.hm-tape, .hm-corner { width: 94px; height: 28px; filter: drop-shadow(0 1px 1.5px rgba(42, 36, 22, 0.24)); }
.hm-tape { top: -14px; left: 50%; margin-left: -47px; transform: rotate(-2.4deg); }
.hm-fcard:nth-child(even) .hm-tape { transform: rotate(1.8deg); }
.hm-corner { top: -5px; right: -16px; transform: rotate(38deg); }
.hm-tape i, .hm-corner i { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.36) 0 5px, rgba(255, 255, 255, 0) 5px 11px), var(--tape, rgba(255, 224, 120, 0.9)); clip-path: polygon(0 0, 100% 0, 98.4% 14%, 100% 28%, 98.4% 42%, 100% 56%, 98.4% 70%, 100% 84%, 98.4% 100%, 0 100%, 1.6% 86%, 0 72%, 1.6% 58%, 0 44%, 1.6% 30%, 0 16%); }
@media (max-width: 599.98px) { .hm-corner { right: -6px; } }
.hm-t-sun { --tape: rgba(255, 201, 40, 0.84); }
.hm-t-rose { --tape: rgba(240, 178, 160, 0.88); }
.hm-t-mint { --tape: rgba(172, 214, 178, 0.9); }
.hm-pin { top: -11px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 253, 246, 0.6) 0 24%, transparent 26%), var(--sun); box-shadow: inset 0 0 0 4px rgba(255, 253, 246, 0.28), 0 1px 0 rgba(42, 36, 22, 0.12), 0 5px 8px rgba(42, 36, 22, 0.26); }
.hm-pin-honey { background-color: var(--honey); }
.hm-pin-go { background-color: var(--go); }

/* ---------- questions: heading + puzzled bear beside a paper card of accordions ---------- */
.hm-faq-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 36px clamp(40px, 6vw, 80px); align-items: start; }
.hm-faq-side { display: flex; flex-direction: column; gap: 28px; }
.hm-faq-bear { width: min(230px, 100%); height: auto; transform: rotate(-3deg); }
.hm .hm-faq-card { padding: 6px 30px; border-radius: var(--r-lg); }
.hm-q { border-top: 1.5px dashed var(--rule); }
.hm-q:first-child { border-top: 0; }
.hm-q summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 66px; padding: 12px 8px; margin: 0 -8px; border-radius: 14px; font-size: 18px; font-weight: 700; line-height: 1.3; list-style: none; cursor: pointer; }
.hm-q summary::-webkit-details-marker { display: none; }
.hm-q summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 12px 2.4px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2.4px 12px no-repeat, var(--butter); transition: transform 0.2s ease, background-color 0.2s ease; }
.hm-q[open] summary::after { transform: rotate(45deg); background-color: var(--sun); }
.hm-q summary:hover::after { background-color: var(--sun); }
.hm-q p { margin: 0 0 20px; max-width: 62ch; font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 899.98px) {
  .hm-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-faq-side { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .hm-faq-bear { width: 118px; flex: none; }
}
@media (max-width: 599.98px) { .hm .hm-faq-card { padding: 4px 20px; } .hm-q summary { font-size: 17px; } }

/* ---------- final call to action: a stacked paper card, the cafe door art rising above it ---------- */
.hm-final { margin-top: calc(var(--hm-gap) + 24px); }
.hm .hm-final-card { padding: clamp(28px, 5vw, 56px); border-radius: var(--r-xl); }
.hm-final-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px clamp(24px, 4vw, 56px); align-items: center; }
.hm-final-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.hm-final h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.02; }
.hm-final-copy p { margin: 0; max-width: 40ch; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }
.hm-final-copy .note-wrap { margin: 4px 0 -4px; }
.hm-final-art { align-self: start; justify-self: end; width: calc(100% + 36px); max-width: 580px; height: auto; margin: -100px -36px 0 0; }
@media (max-width: 959.98px) {
  .hm-final-in { grid-template-columns: minmax(0, 1fr); }
  .hm-final-art { order: -1; justify-self: center; width: min(78%, 330px); margin: -96px 0 8px; }
}
@media (max-width: 479.98px) { .hm-final-copy .row .btn { width: 100%; } }

/* ---- hero.css ---- */
/* Animated hero (ui/home/Hero.tsx + hero.js). Every class is prefixed hh-. ALL CSS on the page is global.
   Stage geometry is pure CSS so the server-rendered first paint and the live phones (built by hero.js) share the same
   boxes. The file has three parts: the shared look (top), the desktop and tablet geometry (min-width: 720px) and the
   phone layout (max-width: 719.98px: one phone at a time). cq units resolve against .hh-stagewrap (container-type:
   inline-size), which is as wide as the stage.
   Desktop variables (all on .hh-stage): --hh-hb the tallest the stage may be (viewport height minus the page above and
   below it), --hh-sh its real height (no taller than its phones need), --hh-pw the phone width at scale 1 (sized so the
   FOCUSED phone, scaled --hh-sf, just fits: its top sits --hh-pad under the stage's top edge, its feet stand --hh-feet
   above the bottom edge), --hh-lip the height of the counter's front, which is drawn over the phones' feet. */

.hh {
  position: relative;
  text-align: center;
  padding: 4px 0 6px;
}

/* ---------- headline + sticker ---------- */
.hh-h1 {
  margin: 0 auto;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
}
.hh-l1, .hh-l2 { display: block; }
.hh-l2 { margin-top: 0.05em; }
.hh-sticker {
  position: relative;
  display: inline-block;
  padding: 0.03em 0.3em 0.11em;
  color: var(--ink);
  transform: rotate(-2deg);
  transform-origin: 50% 60%;
  isolation: isolate;
}
.hh-paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: 0.28em;
  background: var(--sun);
  box-shadow: 0 1px 0 rgba(42, 36, 22, 0.1), 0 0.12em 0.26em rgba(42, 36, 22, 0.2), 0 0.5em 0.9em rgba(42, 36, 22, 0.1);
}
.hh-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/static/img/paper.jpg") center / cover;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.hh-paper::after { /* one gentle shine across the sticker on load */
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 34%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
  transform: translateX(-140%) skewX(-14deg);
  animation: hh-shine 1.3s 0.8s cubic-bezier(0.3, 0.6, 0.3, 1) 1 both;
}
@keyframes hh-shine { to { transform: translateX(420%) skewX(-14deg); } }
.hh-spark { /* top right of the sticker, outside its edge so it never sits on the first line's letters */
  position: absolute;
  top: 0.16em;
  right: -0.66em;
  width: 0.54em;
  height: auto;
  transform: rotate(8deg);
  pointer-events: none;
}

/* ---------- the stage ---------- */
.hh-stagewrap {
  position: relative;
  margin: 28px auto 0;
  width: 100%;
  container-type: inline-size; /* cq units in the stage and everything inside it resolve against this box */
}
.hh-stage {
  --hh-art: calc(100cqw / 2.348);               /* the backdrop's height at this width (art is 1600 x 682) */
  --hh-k: tan(atan2(var(--hh-pw), 414px));      /* phone width / 414: scales the static phones like the kit's script does */
  --ik-phone-w: var(--hh-pw);
  position: relative;
  height: var(--hh-sh);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow);
  background:
    radial-gradient(72% 95% at 50% 42%, rgba(255, 252, 238, 0.95) 0%, rgba(255, 252, 238, 0) 100%),
    linear-gradient(180deg, #fff0b6 0%, #ffe48a 100%);
}
@supports not (width: 1cqw) { .hh-stage { --hh-art: calc(min(100vw - 48px, 1100px) / 2.348); } } /* no container units: size from the viewport (close enough) */
.hh-stage::before { /* paper grain under everything else */
  content: "";
  position: absolute;
  inset: 0;
  background: url("/static/img/paper.jpg") center / cover;
  mix-blend-mode: multiply;
  opacity: 0.38;
  pointer-events: none;
}
.hh-art {
  position: absolute;
  left: 0;
  right: 0;
  background: url("/static/img/home/art-hero-cafe.webp") no-repeat;
  pointer-events: none;
}
/* the backdrop in two pieces (lamps + bunting pinned to the top, plant + counter + machine pinned to the bottom), so any stage shape works */
.hh-art-top { top: 0; height: calc(var(--hh-art) * 0.33); background-position: center top; background-size: auto var(--hh-art); }
.hh-art-bot { bottom: 0; height: calc(var(--hh-artb, var(--hh-art)) * 0.68); background-position: center bottom; background-size: auto var(--hh-artb, var(--hh-art)); }
.hh-art-front { display: none; } /* desktop only: the counter's front edge over the phones' feet (see the desktop block) */

/* washi tape on the top corners */
.hh-tape {
  position: absolute;
  z-index: 8;
  top: -9px;
  width: 92px;
  height: 27px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 7px, rgba(255, 255, 255, 0) 7px 14px),
    rgba(255, 219, 108, 0.9);
  box-shadow: 0 1px 2px rgba(42, 36, 22, 0.16), inset 0 0 0 1px rgba(160, 112, 0, 0.14);
  clip-path: polygon(0 0, 100% 0, 97% 12%, 100% 25%, 97% 37%, 100% 50%, 97% 62%, 100% 75%, 97% 87%, 100% 100%, 0 100%, 3% 87%, 0 75%, 3% 62%, 0 50%, 3% 37%, 0 25%, 3% 12%);
}
.hh-tape-l { left: -24px; transform: rotate(-37deg); }
.hh-tape-r { right: -24px; transform: rotate(37deg); }

/* ---------- phones ---------- */
.hh-row {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 2.5cqw; /* nudged left of centre: the coffee machine and cups are on the right */
  top: 0;
  bottom: var(--hh-stand);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--hh-gap);
  will-change: opacity, transform;
}
.hh-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: var(--hh-pw);
  flex: none;
}
.hh-lab {
  display: block;
  padding: 7px 12px 6px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 700 13px/1 var(--font);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transform: rotate(-1.5deg);
}
.hh-slot[data-id="sam"] .hh-lab { transform: rotate(1deg); }
.hh-slot[data-id="ctr"] .hh-lab { transform: rotate(-1deg); }
.hh-phwrap { position: relative; width: var(--hh-pw); aspect-ratio: 414 / 868; }
.hh-phwrap::before { /* the phones that don't matter fade under a wash of the stage colour, so nothing shows through them */
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 13.3% / 6.34%;
  background: #ffeeb2;
  opacity: 0.56;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.hh-slot.hh-on > .hh-phwrap::before, .hh-stage.hh-sum .hh-slot > .hh-phwrap::before { opacity: 0; }
.hh-phwrap::after { /* soft contact shadow on the counter */
  content: "";
  position: absolute;
  z-index: -1;
  left: 6%;
  right: 6%;
  bottom: -2.5%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(42, 36, 22, 0.34), rgba(42, 36, 22, 0) 70%);
}
.hh-phwrap > .ik-phone { position: absolute; left: 0; top: 0; width: 100%; }
.hh-sph .ik-phone-in { transform: scale(var(--hh-k)); }
@supports not (width: calc(tan(atan2(1px, 1px)) * 1px)) { .hh-sph .ik-phone-in { transform: scale(0.4); } }
/* the live phones scale by the same exact factor as the static ones (the kit measures clientWidth, which rounds to whole px) */
@supports (width: calc(tan(atan2(1px, 1px)) * 1px)) { .hh-lph .ik-phone-in { transform: scale(var(--hh-k)) !important; } }
.hh-lph { opacity: 0; transition: opacity 0.45s ease; }
.hh-stage.hh-ready .hh-lph { opacity: 1; }
.hh-stage.hh-ready .hh-sph { opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s 0.45s; }
.hh-stage .ik-phone .ik-bezel { box-shadow: inset 0 0 0 2.5px #4a4a50, inset 0 0 0 4px #17171a, 0 14px 26px rgba(20, 16, 6, 0.26), 0 2px 5px rgba(20, 16, 6, 0.2); }

/* a frozen debug frame (/?hh=<ms>) must not depend on transitions running (a hidden headless tab may never tick them) */
.hh-stage.hh-instant .hh-sph, .hh-stage.hh-instant .hh-lph, .hh-stage.hh-instant .hh-slot, .hh-stage.hh-instant .hh-lab,
.hh-stage.hh-instant .hh-phwrap::before, .hh-stage.hh-instant .hh-cap { transition: none !important; }

/* ---------- taps: dot + white ring that presses and ripples (driven per frame by hero.js) ---------- */
.hh-tap { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.hh-tap i {
  position: absolute;
  left: -32px;
  top: -32px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(54, 54, 60, 0.58);
  border: 3.5px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.3), 0 5px 14px rgba(0, 0, 0, 0.36);
}
.hh-tap b {
  position: absolute;
  left: -36px;
  top: -36px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
  opacity: 0;
}
/* a banner the kit never dismisses: hero.js adds this after a few seconds */
.hh-stage .ik-banner.hh-gone { transform: translateY(-160%); opacity: 0; }

/* ---------- captions + play/pause ---------- */
.hh-caps { position: absolute; z-index: 6; left: 0; right: 0; bottom: 14px; height: 44px; pointer-events: none; }
.hh-cap {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin: 0;
  padding: 10px 20px 11px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 700 16px/1.2 var(--font);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.16s ease; /* the old caption leaves quickly ... */
}
.hh-cap.hh-cap-on { opacity: 1; transition: opacity 0.32s ease 0.1s; } /* ... as the new one comes in */
.hh-stage.hh-sum .hh-caps { visibility: hidden; }
.hh-pp {
  position: absolute;
  z-index: 7;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.hh-pp[hidden] { display: none; }
.hh-pp:hover { border-color: var(--ink-soft); }
.hh-pp:active { transform: scale(0.94); }
.hh-pp:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- finale: the real invite tree (cardpage.tsx treeSvg), the counter chip, Mia's card ---------- */
.hh-fin {
  --hh-tree: calc(100cqw - 6px);
  --vb: 312; /* hero.js sets the real viewBox width on .hh-tree */
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hh-tree {
  --u: calc(var(--hh-tree) / var(--vb)); /* one tree unit in px */
  position: absolute;
  left: 50%;
  top: 14px;
  width: var(--hh-tree);
  height: var(--hh-tree);
  margin-left: calc(var(--hh-tree) / -2);
}
.hh-tree svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hh-rib { /* sunflower ribbon under Mia's face, the title she has reached */
  position: absolute;
  left: 50%;
  top: calc(50% + var(--u) * 31);
  height: calc(var(--u) * 15);
  min-width: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 11);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%) rotate(-1.2deg);
  background: var(--sun);
  color: var(--ink);
  font: 800 calc(var(--u) * 8.4) / 1 var(--font);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  filter: drop-shadow(0 calc(var(--u) * 1.2) calc(var(--u) * 1.6) rgba(42, 36, 22, 0.28));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--u) * 4) 50%, 100% 100%, 0 100%, calc(var(--u) * 4) 50%);
}
.hh-count {
  position: absolute;
  left: 6cqw;
  top: 34px;
  transform: rotate(-2deg);
  width: max-content;
  min-width: 190px;
  padding: 14px 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
}
.hh-count::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url("/static/img/paper.jpg") center / cover; mix-blend-mode: multiply; opacity: 0.4; }
.hh-count { isolation: isolate; }
.hh-n { display: block; font: 800 58px/0.95 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; transform-origin: 50% 70%; }
.hh-nl { display: block; margin-top: 4px; font: 700 18px/1.15 var(--font); }
.hh-count small { display: block; margin-top: 6px; font: 600 15px/1.15 var(--hand); color: var(--note); white-space: nowrap; }
.hh-card {
  position: absolute;
  left: calc(50% + var(--hh-tree) / 2 + 26px); /* right beside the tree, whatever size it is (above the coffee machine and cups) */
  top: 30px;
  transform: rotate(2.5deg);
  line-height: 0;
}
.hh-card .ik-pass { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 12px 26px rgba(42, 36, 22, 0.24); }
@container (max-width: 819px) { /* no room beside the tree: the chip sits in the corner, Mia's card goes */
  .hh-card { display: none; }
  .hh-count { left: 14px; top: 14px; transform: rotate(-2deg); transform-origin: 0 0; width: auto; min-width: 128px; padding: 9px 14px 10px; border-radius: 18px; }
  .hh-n { font-size: 38px; }
  .hh-nl { font-size: 15px; margin-top: 2px; }
  .hh-count small { font-size: 13px; margin-top: 3px; }
}

/* ---------- lede, buttons, notes ---------- */
.hh-lede {
  max-width: 760px;
  margin: clamp(14px, 2.4svh, 26px) auto 0;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}
.hh-mk {
  color: inherit;
  padding: 0 0.1em;
  margin: 0 -0.05em;
  background: linear-gradient(transparent 40%, var(--butter) 40%, var(--butter) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hh-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; margin-top: clamp(14px, 2.4svh, 26px); }
.hh-ctas .btn { min-height: 56px; padding: 0 24px; font-size: 17px; }
.hh-ctas .btn:not(.btn-primary) { background: var(--paper); box-shadow: var(--shadow-sm); }
.hh-note {
  margin: 16px 0 0;
  font: 600 21px/1.2 var(--hand);
  color: var(--note);
  transform: rotate(-2deg);
}
.hh-quiet { max-width: 34rem; margin: 10px auto 0; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }

/* ---------- desktop and tablet (720px and up): three phones on the counter, the focused one steps forward ---------- */
@media (min-width: 720px) {
  .hh {
    /* the tallest the stage may be: what is left of the viewport under the page header, the headline, the lede and the
       buttons (at 1440x900 the primary button then ends just above the fold). On shorter screens it stays at 450px and
       the buttons may sit below the fold: the sticky header has "Get started". */
    --hh-hb: clamp(450px, calc(100vh - 407px), 640px);
    padding-top: 0;
  }
  @supports (height: 100svh) { .hh { --hh-hb: clamp(450px, calc(100svh - 407px), 640px); } }

  .hh-stagewrap { width: min(100%, 1100px); margin-top: 20px; margin-top: clamp(14px, 2.3svh, 22px); }
  .hh-stage {
    --hh-sf: 1.15;      /* the focused phone */
    --hh-su: 0.92;      /* the others: behind it, dimmed by a wash */
    --hh-s2: 1.04;      /* two focused at once, and all three in the static summary frame */
    --hh-wf: 0.62;      /* share of the stage width the phones may use (the plant is on the left, the machine on the right) */
    --hh-lip: calc(var(--hh-art) * 0.088);        /* the counter's front: drawn over the phones' feet */
    --hh-pad: 16px;                               /* room above the focused phone for its label */
    --hh-k2: calc(var(--hh-sf) * 2.0966 - 0.062); /* focused phone height, minus the strip hidden behind the counter, per px of phone width */
    --hh-pwmax: calc(100cqw * var(--hh-wf) / 3.15);
    --hh-sh: min(var(--hh-hb), calc(var(--hh-lip) + var(--hh-pad) + var(--hh-pwmax) * var(--hh-k2)));
    --hh-pw: calc((var(--hh-sh) - var(--hh-lip) - var(--hh-pad)) / var(--hh-k2));
    --hh-feet: calc(var(--hh-lip) - var(--hh-pw) * 0.062); /* the phones' bottom edge: a little behind the counter's edge */
  }
  @container (max-width: 859px) { .hh-stage { --hh-wf: 0.8; } } /* a narrow stage (tablet portrait): the phones may use more of it */

  /* the counter's front edge drawn over the phones' feet, so the phones stand just behind it (their home-indicator strip hides) */
  .hh-art-front { display: block; z-index: 2; bottom: 0; height: var(--hh-lip); background-position: center bottom; background-size: auto var(--hh-art); }

  .hh-row { right: 2.5cqw; bottom: var(--hh-feet); gap: calc(var(--hh-pw) * 0.06); }
  .hh-slot {
    --s: var(--hh-su);
    position: relative;
    z-index: 1;
    gap: 0;
    transform: scale(var(--s));
    transform-origin: 50% 100%; /* the feet stay put, the phone grows upwards */
    transition: transform 0.4s ease;
  }
  .hh-slot.hh-on { --s: var(--hh-sf); z-index: 2; }
  .hh-stage.hh-two .hh-slot.hh-on { --s: var(--hh-s2); }
  .hh-stage.hh-sum .hh-slot { --s: var(--hh-s2); }
  .hh-phwrap::before { opacity: 0.5; }

  /* labels ride on their phone's top edge at a constant size (the slot's scale is cancelled out) */
  .hh-lab {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: calc(100% - 9px);
    padding: 6px 12px 5px;
    opacity: 0.8;
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(-1.5deg) scale(calc(1 / var(--s)));
    transition: transform 0.4s ease, opacity 0.4s ease;
  }
  .hh-slot[data-id="sam"] .hh-lab { transform: translateX(-50%) rotate(1deg) scale(calc(1 / var(--s))); }
  .hh-slot[data-id="ctr"] .hh-lab { transform: translateX(-50%) rotate(-1deg) scale(calc(1 / var(--s))); }
  .hh-slot.hh-on > .hh-lab, .hh-stage.hh-sum .hh-slot > .hh-lab { opacity: 1; }

  /* the caption pill sits centred on the counter's front and never reaches up over a phone: its height follows the strip's */
  .hh-stage { --hh-caph: clamp(24px, calc(var(--hh-lip) - 3px), 33px); }
  .hh-caps { bottom: calc((var(--hh-lip) - var(--hh-caph)) / 2); height: var(--hh-caph); }
  .hh-cap {
    display: flex;
    align-items: center;
    height: var(--hh-caph);
    padding: 0 calc(var(--hh-caph) * 0.55);
    font-size: clamp(13px, calc(var(--hh-caph) * 0.45), 15px);
    line-height: 1;
  }

  /* finale: the tree fills the stage above the counter. Mia's card sits right beside it; the count chip is in the top-left corner */
  .hh-fin { --hh-tree: min(calc(var(--hh-sh) - var(--hh-lip) - 26px), calc(100cqw - 460px), calc(100cqw * 0.88 - 480px)); } /* the last term keeps the big chip clear of the tree */
  @container (min-width: 820px) and (max-width: 999px) { /* narrower stage: the compact chip, so the tree can stay big (the card is still shown) */
    .hh-fin { --hh-tree: min(calc(var(--hh-sh) - var(--hh-lip) - 26px), calc(100cqw - 420px)); }
    .hh-count { left: 14px; top: 14px; width: auto; min-width: 128px; padding: 9px 14px 10px; border-radius: 18px; transform-origin: 0 0; }
    .hh-n { font-size: 38px; }
    .hh-nl { font-size: 15px; margin-top: 2px; }
    .hh-count small { font-size: 13px; margin-top: 3px; }
  }
  @container (max-width: 819px) { .hh-fin { --hh-tree: min(calc(var(--hh-sh) - var(--hh-lip) - 26px), calc(100cqw - 40px)); } }

  .hh-lede { margin-top: 14px; margin-top: clamp(10px, 1.5svh, 15px); }
  .hh-ctas { margin-top: 14px; margin-top: clamp(10px, 1.5svh, 15px); }

  /* browsers without container units or queries (before 2023): the same layout from viewport units, without the narrow-stage tweaks.
     Last in this block so it wins over every rule above that uses cqw. */
  @supports not (width: 1cqw) {
    .hh-stage { --hh-pwmax: calc(min(100vw - 48px, 1100px) * var(--hh-wf) / 3.15); }
    .hh-row { right: 27px; }
    .hh-count { left: 66px; }
    .hh-fin { --hh-tree: min(calc(var(--hh-sh) - var(--hh-lip) - 26px), 420px); }
  }
}

/* ---------- phones (under 720px): one phone at a time, label above, caption below ---------- */
@media (max-width: 719.98px) {
  .hh-h1 { font-size: clamp(30px, 10vw, 36px); }
  .hh-lede { font-size: 18px; }
  .hh-stage {
    --hh-stand: 74px;
    --hh-artb: calc(var(--hh-stand) / 0.125); /* the counter band, enlarged so its top surface sits at the phone feet */
    --hh-pw: min(270px, 72vw);
    --hh-sh: calc(var(--hh-pw) * 2.0966 + 128px);
  }
  .hh-art-top { height: calc(var(--hh-art) * 0.5); background-size: auto calc(var(--hh-art) * 1.4); }
  .hh-row { display: block; right: 0; }
  .hh-slot { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; opacity: 0; transform: none; transform-origin: 50% 100%; pointer-events: none; transition: opacity 0.4s ease; }
  .hh-slot.hh-on { opacity: 1; }
  .hh-stage.hh-sum .hh-slot { opacity: 0; }
  .hh-stage.hh-sum .hh-slot[data-id="mia"] { opacity: 1; }
  .hh-cap { white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 28px); font-size: 15px; padding: 9px 16px 10px; }
  .hh-caps { bottom: 10px; height: 60px; display: flex; align-items: flex-end; justify-content: center; }
  .hh-pp { right: 10px; bottom: auto; top: 10px; }
  .hh-fin { --hh-tree: calc(100cqw - 6px); }
  .hh-tree { top: calc(50% + 24px - var(--hh-tree) / 2); }
  .hh-count { left: 0; right: 0; top: 18px; margin: 0 auto; width: max-content; transform: rotate(-2deg); transform-origin: 50% 0; }
  .hh-tape { width: 74px; height: 23px; }
  .hh-tape-l { left: -9px; }
  .hh-tape-r { right: -9px; }
}

@media (max-width: 380px) {
  .hh-lab { font-size: 12px; padding: 6px 10px 5px; }
  .hh-count { padding: 7px 12px 8px; }
  .hh-n { font-size: 32px; }
  .hh-nl { font-size: 13.5px; }
  .hh-count small { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hh-paper::after { animation: none; display: none; }
}

/* ---- steps.css ---- */
/* How it works (ui/home/Steps.tsx + steps.js). Every class is prefixed hs-.
   Each visual is a paper panel measured in container units: .hs-vis is an inline-size container, so 1cqw is 1% of the
   panel width and the whole composition scales as one picture (the panel is 100cqw x 80cqw on desktop). */

.hs { margin: 0; scroll-margin-top: 72px; } /* the page spaces its sections (page.css --hm-gap) */
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }

/* ---------- head ---------- */
.hs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 32px; margin: 0 0 64px; }
.hs-head-txt { max-width: 46rem; min-width: 0; }
/* one pause / play control for every picture (WCAG 2.2.2; also the Play button for reduced motion); steps.js shows it */
.hs-pp { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 8px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink);
  font: 700 15px/1 var(--font); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .12s ease; }
.hs-pp[hidden] { display: none; }
.hs-pp:hover { border-color: var(--ink-soft); }
.hs-pp:active { transform: scale(.98); }
.hs-pp-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--butter); }
.hs-pp-ic svg { width: 16px; height: 16px; }
.hs-eyebrow { margin: 0 0 14px; font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.hs-head h2 { margin: 0; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.hs-sub { margin: 20px 0 0; font-size: 19px; line-height: 1.45; color: var(--ink-soft); }

/* ---------- rows ---------- */
.hs-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 96px; }
.hs-row { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; gap: 0 clamp(32px, 5vw, 72px); }
.hs-row:nth-child(even) { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
.hs-row:nth-child(even) .hs-copy { order: 2; }
.hs-copy { min-width: 0; max-width: 31rem; }
.hs-chip { display: inline-block; margin: 0 0 18px; padding: 7px 13px 6px; border-radius: 9px; background: var(--butter); color: var(--ink);
  font: 800 14px/1 var(--font); letter-spacing: .03em; box-shadow: 0 2px 0 #e0be55, 0 6px 12px rgba(42, 36, 22, .08); transform: rotate(-2.2deg); transform-origin: 0 50%; }
.hs-row:nth-child(even) .hs-chip { transform: rotate(1.8deg); }
.hs-copy h3 { margin: 0 0 14px; font-size: clamp(27px, 3vw, 40px); line-height: 1.07; letter-spacing: -.02em; text-wrap: balance; }
.hs-copy p { margin: 0; max-width: 30em; font-size: 18px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }

/* ---------- the paper panel ---------- */
.hs-vis { container: hsv / inline-size; position: relative; min-width: 0; }
.hs-panel { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-xl); box-shadow: var(--shadow); }
.hs-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; isolation: isolate; background: var(--hs-paper, var(--butter)); }
.hs-clip::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("/static/img/paper.jpg") center / cover; mix-blend-mode: multiply; opacity: .4; pointer-events: none; }
.hs-v2 .hs-clip, .hs-v4 .hs-clip, .hs-v6 .hs-clip { --hs-paper: var(--butter-soft); }

/* a strip of washi tape holds the panel up */
.hs-tape { position: absolute; z-index: 5; left: 50%; top: -2.3cqw; width: 19cqw; height: 5.4cqw; transform: translateX(-50%) rotate(-2.4deg); filter: drop-shadow(0 1px 1.5px rgba(42, 36, 22, .24)); pointer-events: none; }
.hs-tape i { display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .36) 0 .7cqw, rgba(255, 255, 255, 0) .7cqw 1.5cqw), var(--hs-tape, rgba(255, 201, 40, .84));
  clip-path: polygon(0 0, 100% 0, 98.4% 14%, 100% 28%, 98.4% 42%, 100% 56%, 98.4% 70%, 100% 84%, 98.4% 100%, 0 100%, 1.6% 86%, 0 72%, 1.6% 58%, 0 44%, 1.6% 30%, 0 16%); }
.hs-tape-sun { --hs-tape: rgba(255, 201, 40, .84); }
.hs-tape-rose { --hs-tape: rgba(240, 178, 160, .88); }
.hs-tape-mint { --hs-tape: rgba(172, 214, 178, .9); }
.hs-tape-butter { --hs-tape: rgba(255, 224, 120, .9); }

/* ---------- art and phones (positions are per visual, in cqw) ---------- */
.hs-art { position: absolute; z-index: 2; pointer-events: none; }
.hs-art-img { display: block; width: 100%; height: auto; }

.hs-ph { position: absolute; z-index: 3; width: var(--hs-pw, 32cqw); container-type: inline-size; }
.hs-ph .ik-phone { width: 100%; }
/* the kit scales its frame from JS (ResizeObserver, whole pixels); the same scale from CSS, to the exact width, means the
   server-rendered first frame needs no JS and the kit's frame lands on the very same pixels */
@supports (transform: scale(tan(atan2(100cqw, 414px)))) {
  .hs-ph .ik-phone-in { transform: scale(tan(atan2(100cqw, 414px))) !important; }
}
.hs-ph .ik-glass > .ik-screen { isolation: isolate; }
.hs-ph .ik-typing { font-family: var(--font); font-weight: 600; }
.hs-ph .ik-bezel { box-shadow: inset 0 0 0 2.5px #4a4a50, inset 0 0 0 4px #17171a, 0 22px 40px rgba(20, 16, 6, .3), 0 3px 8px rgba(20, 16, 6, .22); }
.hs-tap { position: absolute; width: 0; height: 0; opacity: 0; }
.hs-tap i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(54, 54, 60, .55); border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .3); }
.hs-tap b { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); opacity: 0; }

/* crayon sparks beside the bears */
.hs-doodle { position: absolute; z-index: 2; width: 7cqw; height: auto; pointer-events: none; }
.hs-spark-v2 { left: 38cqw; top: 22cqw; transform: rotate(14deg); }
.hs-spark-v4 { left: 24cqw; top: 27cqw; transform: rotate(20deg); }
.hs-spark-v6 { left: 41cqw; top: 21cqw; transform: rotate(8deg); }

/* 1. Set up: browser window, the bear at its laptop in the corner */
.hs-v1 .hs-win { left: 2cqw; top: 6.5cqw; width: 86cqw; }
.hs-art-setup { right: -1cqw; bottom: -1.5cqw; width: 25cqw; }

/* 2. Poster: the counter along the bottom, the real poster on its empty middle (the barista may hide behind it), the phone rising at the right, fully inside the panel */
.hs-counter { position: absolute; z-index: 1; left: -14cqw; width: 110cqw; bottom: -.5cqw; pointer-events: none; }
.hs-poster { position: absolute; z-index: 2; left: 38cqw; bottom: 18.5cqw; width: 25cqw; transform: rotate(-2deg); transform-origin: 50% 100%; background: #fff; border-radius: .3cqw; overflow: hidden;
  box-shadow: 0 .8cqw 1.6cqw rgba(42, 36, 22, .3), 0 .1cqw .3cqw rgba(42, 36, 22, .34); }
.hs-poster img { display: block; width: 100%; height: auto; }
.hs-v2 .hs-ph-a { --hs-pw: 33cqw; right: 2.5cqw; bottom: -18cqw; }

/* 3. Share: Sam's phone, the selfie bear beside it */
.hs-v3 .hs-ph-a { --hs-pw: 34cqw; left: 7cqw; bottom: 3cqw; }
.hs-art-selfie { right: 2cqw; bottom: 0; width: 40cqw; }

/* 4. Counter: the barista bear, the staff phone */
.hs-v4 .hs-ph-a { --hs-pw: 34cqw; right: 6cqw; bottom: 3cqw; }
.hs-art-barista { left: 2cqw; bottom: 0; width: 40cqw; }

/* 5. Reward: the lock screen, the celebrating bear */
.hs-v5 .hs-ph-a { --hs-pw: 38cqw; left: 8cqw; bottom: -15cqw; }
.hs-art-celebrate { right: 2cqw; bottom: 2cqw; width: 42cqw; }

/* 6. Titles: the podium along the bottom, the phone rising at the right */
.hs-art-podium { left: -5cqw; bottom: -1cqw; width: 74cqw; }
.hs-v6 .hs-ph-a { --hs-pw: 35cqw; right: 0; bottom: -18cqw; }

/* 7. Dashboard: browser window, the owner bear and the invite tree */
.hs-v7 .hs-win { left: 3cqw; top: 8cqw; width: 94cqw; }
.hs-art-tree { left: -1.5cqw; bottom: -1cqw; width: 31cqw; } /* over the dashboard's side menu, never over the tree */

/* ---------- the CSS browser window (steps 1 and 7) ---------- */
.hs-win { position: absolute; z-index: 1; border-radius: 1.5cqw; overflow: hidden; background: #fff; border: 1px solid rgba(42, 36, 22, .14);
  box-shadow: 0 1px 0 rgba(42, 36, 22, .08), 0 1.4cqw 3.4cqw rgba(42, 36, 22, .2); }
.hs-win-bar { display: flex; align-items: center; gap: 1.6cqw; height: 4.4cqw; padding: 0 1.8cqw; background: var(--sheet); border-bottom: 1px solid rgba(42, 36, 22, .12); }
.hs-dots { display: flex; gap: .8cqw; flex: none; }
.hs-dots i { width: 1.15cqw; height: 1.15cqw; border-radius: 50%; background: #e9a08c; }
.hs-dots i:nth-child(2) { background: #f1c768; }
.hs-dots i:nth-child(3) { background: #9fcb98; }
.hs-url { display: flex; align-items: center; justify-content: center; gap: .7cqw; flex: 0 1 56%; height: 2.8cqw; margin: 0 auto; padding: 0 1.4cqw; border-radius: 1.4cqw; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(42, 36, 22, .08);
  font: 600 1.5cqw/1 var(--font); color: var(--ink-soft); white-space: nowrap; overflow: hidden; }
.hs-url svg { width: 1.05cqw; height: auto; flex: none; opacity: .7; }
.hs-win-view { position: relative; container-type: inline-size; aspect-ratio: var(--hs-ar, 1.6); overflow: hidden; background: var(--cream); }
/* the crop of a captured page (Steps.tsx sets --dx0 --dvw --y0 --pw, and --nx0 --nvw --nx1 --nvw1 for a narrow panel); the layout picks one */
.hs-pg { position: absolute; inset: 0; --x0: var(--dx0); --vw: var(--dvw); --x1: var(--x0); --vw1: var(--vw); } /* --x1 / --vw1 = where steps.js moves the window to (the same, unless a layout says otherwise) */
.hs-doc { position: absolute; left: calc(var(--x0) / var(--vw) * -100%); top: calc(var(--y0) / var(--vw) * -100cqw); width: calc(var(--pw) / var(--vw) * 100%); }
.hs-pg-img { display: block; width: 100%; max-width: none; height: auto; }
.hs-pg[data-k="check"], .hs-pg[data-k="tree"] { opacity: 0; }
.hs-curtain { position: absolute; background: #fef8e4; } /* the card paper, to hide the suggestions until they appear */
.hs-type { position: absolute; display: flex; align-items: center; background: #fff; color: var(--ink); font-family: var(--font); font-weight: 600; white-space: nowrap; overflow: hidden; }
.hs-type span { white-space: pre; }
.hs-caret { display: inline-block; flex: none; width: .16cqw; height: 1.15em; margin-left: .1cqw; background: var(--ink); animation: hs-blink 1s steps(1) infinite; }
@keyframes hs-blink { 50% { opacity: 0; } }
.hs-hover { position: absolute; border: 0 solid var(--ink); background: #fff6d6; mix-blend-mode: multiply; opacity: 0; } /* .af-hit:hover */
.hs-press { position: absolute; background: rgba(255, 255, 255, .2); opacity: 0; }
.hs-cur { position: absolute; z-index: 5; left: 0; top: 0; width: max(13px, 3cqw); aspect-ratio: 1; margin: calc(max(13px, 3cqw) * -.108) 0 0 calc(max(13px, 3cqw) * -.208); opacity: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); pointer-events: none; }
.hs-click { position: absolute; z-index: 4; left: 0; top: 0; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; border-radius: 50%; border: .3cqw solid var(--ink); opacity: 0; pointer-events: none; }

/* ---------- a narrow panel (a phone): taller, art and phones bigger, windows zoomed in so the page reads ---------- */
@container hsv (max-width: 600px) {
  .hs-panel { aspect-ratio: 100 / 108; }
  .hs-tape { top: -3cqw; width: 26cqw; height: 7cqw; }
  .hs-pg { --x0: var(--nx0, var(--dx0)); --vw: var(--nvw, var(--dvw)); --x1: var(--nx1, var(--x0)); --vw1: var(--nvw1, var(--vw)); } /* a narrow crop where a page has one */
  /* the window sits inside the panel: its card (find) / the whole live preview (check, first) / the whole form card (check, once
     steps.js has moved the window down to Go live) fit edge to edge, and it is tall enough for all three suggestions; the bear
     stands under its corner */
  .hs-v1 .hs-win { left: 2cqw; top: 7cqw; width: 96cqw; }
  .hs-v1 .hs-win-view { --hs-ar: 1.27 !important; }
  .hs-art-setup { right: 0; bottom: -2.5cqw; width: 22cqw; } /* stands under the window's corner, off the page it shows */
  /* the counter is scaled so the barista fits whole; its coffee machine and plant (the right third, above the ledge) are cut away,
     because the phone, which stays fully inside the panel, no longer hides them, while the counter itself runs on to the edge */
  .hs-counter { left: -22cqw; width: 124cqw; bottom: -1cqw; clip-path: polygon(0 0, 66% 0, 66% 66.5%, 100% 66.5%, 100% 100%, 0 100%); }
  .hs-poster { left: 30cqw; bottom: 20cqw; width: 25.5cqw; }
  .hs-v2 .hs-ph-a { --hs-pw: 42cqw; right: 2cqw; bottom: -22cqw; }
  .hs-v3 .hs-ph-a { --hs-pw: 46cqw; left: 6cqw; bottom: 2.5cqw; }
  .hs-art-selfie { right: -5cqw; bottom: 0; width: 46cqw; }
  .hs-v4 .hs-ph-a { --hs-pw: 46cqw; right: 6cqw; bottom: 2.5cqw; }
  .hs-art-barista { left: -6cqw; bottom: 0; width: 44cqw; }
  .hs-v5 .hs-ph-a { --hs-pw: 50cqw; left: 3cqw; bottom: -14cqw; }
  .hs-art-celebrate { right: -4cqw; bottom: 4cqw; width: 44cqw; }
  .hs-art-podium { left: -24cqw; bottom: -1cqw; width: 82cqw; }
  .hs-v6 .hs-ph-a { --hs-pw: 50cqw; right: 3cqw; bottom: -22cqw; }
  /* the dashboard window is shorter here, so the owner bear and the tree sit under it, not over the page */
  .hs-v7 .hs-win { left: -22cqw; top: 8cqw; width: 142cqw; }
  .hs-v7 .hs-win-bar { padding-left: 25cqw; }
  .hs-v7 .hs-win-view { --hs-ar: 1.95 !important; }
  .hs-art-tree { left: -3cqw; bottom: -1cqw; width: 41cqw; }
  .hs-doodle { width: 9cqw; }
  .hs-spark-v4 { left: 21cqw; top: 41cqw; }
  .hs-spark-v6 { left: 31cqw; top: 40cqw; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-caret { animation: none; }
}

/* ---------- narrower screens ---------- */
@media (max-width: 860px) {
  .hs-head { margin-bottom: 44px; }
  .hs-rows { gap: 72px; }
  .hs-row, .hs-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hs-row:nth-child(even) .hs-copy { order: 0; }
  .hs-copy { max-width: none; }
  .hs-copy h3 { font-size: clamp(26px, 6.4vw, 34px); }
  .hs-copy p { font-size: 17px; }
}