:root { --ink: #111; --paper: #fff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Figtree, sans-serif; }
main { width: min(100%, 410px); margin: auto; padding: max(20px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
.brand { color: var(--ink); font-size: 23px; font-weight: 800; letter-spacing: -1px; text-decoration: none; }
h1 { font-size: 36px; line-height: 1.05; letter-spacing: -1.8px; margin: 24px 0; max-width: 320px; }
.animation { display: flex; justify-content: center; }
.animation[hidden] { display: none; }
.install-demo { display: block; width: auto; max-width: 100%; height: min(58dvh, 560px); object-fit: contain; border-radius: 20px; background: #f6f6f8; }

.demo-frame { position: relative; width: min(100%, calc(min(58dvh, 560px) * 720 / 1566)); }
.demo-frame .install-demo { width: 100%; height: auto; }
.tap-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tap-overlay ellipse { fill: none; stroke: #ef2525; stroke-width: 8; }

#tap-number circle { fill: #ef2525; stroke: white; stroke-width: 4; }
#tap-number text { fill: white; font: 800 38px Figtree, sans-serif; }
h1 { margin-bottom: 10px; }
.reassurance { font-size: 14px; color: #666; margin: 0 0 22px; }
.safari-note { font-size: 12px; text-align: center; color: #666; line-height: 1.5; }
.privacy-choice { display: block; margin: 18px auto 0; padding: 10px; border: 0; background: none; text-decoration: underline; color: #666; font: 12px Figtree,sans-serif; cursor: pointer; }
.simple-step { display: flex; gap: 14px; padding: 22px 0; border-bottom: 1px solid #eee; }
.step-number { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #ef2525; color: white; font-weight: 700; }
.simple-step h2 { font-size: 19px; margin: 3px 0 8px; letter-spacing: -.4px; }
.simple-step p { font-size: 14px; line-height: 1.5; color: #666; margin: 0; }
.guided-step { background: #f6f6f8; border-radius: 16px; padding: 24px; min-height: 295px; }
.guided-step .simple-step { border: 0; padding-bottom: 0; }
.step-symbol { margin: 0 auto 10px; width: 72px; height: 72px; display: grid; place-items: center; font-size: 44px; border-radius: 18px; background: white; }
.step-navigation { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 13px; }
.step-navigation button { min-height: 44px; padding: 10px 20px; border: 1px solid #eee; border-radius: 10px; background: white; color: #111; font: 600 14px Figtree,sans-serif; cursor: pointer; }
.step-navigation button:disabled { opacity: .3; }
#install-experience[hidden] { display: none; }
.share-contacts-mask,.share-url-mask,.add-url-mask { display: none; position: absolute; background: #f4f4f4; color: #666; overflow: hidden; font-size: 9px; align-items: center; }
[data-frame="2"] .share-contacts-mask { display: flex; justify-content: center; left: 0; top: 21.8%; width: 100%; height: 17.7%; font-size: 14px; }
[data-frame="2"] .share-url-mask { display: flex; left: 26%; top: 12.5%; width: 62%; height: 2.4%; }
[data-frame="3"] .add-url-mask { display: flex; left: 22%; top: 24%; width: 76%; height: 4.6%; background: #fafafa; }

.desktop-install { text-align: center; padding: 20px 12px; border: 1px solid #eee; border-radius: 16px; }
.desktop-install img { display: block; max-width: 100%; height: auto; margin: 0 auto 16px; }
.desktop-install h2 { font-size: 20px; margin: 0 0 8px; }
.desktop-install p { font-size: 14px; line-height: 1.5; color: #666; margin: 0; }

.install-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #62626b; text-decoration: none; font-size: 14px; font-weight: 500; }
.install-back:hover { color: #111; }
.install-back:focus-visible { outline: 2px solid #2768e8; outline-offset: 4px; border-radius: 4px; }
h1 { margin-top: 24px; font-size: 38px; letter-spacing: -1.5px; }
.reassurance { font-size: 15px; line-height: 1.6; color: #62626b; margin: 14px 0 28px; }
.safari-note { margin: 24px 0 8px; }
.safari-note a { color: #333; text-underline-offset: 3px; }

.demo-caption { font-size: 19px; font-weight: 700; margin: 0 0 16px; text-align: center; }
.demo-finish { font-size: 13px; line-height: 1.5; color: #666; text-align: center; margin: 16px 0 0; }
#tap-arrow { display: none; fill: none; stroke: #ef2525; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
[data-frame="0"] #tap-arrow { display: block; }
.browser-url-mask { display: none; position: absolute; left: 33%; top: 92%; width: 34%; height: 3%; background: #fafafa; align-items: center; justify-content: center; font-size: 10px; }
[data-frame="0"] .browser-url-mask { display: flex; }

/* Blur website content while retaining sharp Safari controls. */
.demo-frame::before, .demo-frame::after { pointer-events: none; }
[data-frame="0"]::before { content: ""; position: absolute; left: 0; right: 0; top: 8%; bottom: 10%; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgb(255 255 255 / 12%); }
[data-frame="1"] .install-demo { filter: blur(12px); }
[data-frame="1"]::before { z-index: 1; content: ""; position: absolute; inset: 0; background: url('assets/install-frames/step-02.jpg') center / 100% 100% no-repeat; clip-path: inset(58.5% 7.4% 3.5% 30.5% round 22px); }
.tap-overlay { z-index: 2; }

.install-subtitle { margin: 10px 0 0; font-size: 16px; color: #62626b; }