/* Product UI proportions follow RizzKeyboardMock and KeyboardSwitchDemo.
   iMessage tails use the same vector as Vugo's PreviewIosMessageBubble. */
.landing { overflow-x: clip; --page-max: 1120px; --gutter: 28px; --bg: #151517; --card: #212124; --text: #f2f2f7; --text-2: #b9bec8; --muted: #969ba7; --separator: #2b2b2f; --link: #4da3ff; color-scheme: dark; background: radial-gradient(1100px 620px at 72% -80px, #2a2a30 0%, #1b1b1f 45%, #0000 75%) no-repeat, var(--bg); color: var(--text); }
.landing [hidden] { display: none !important; }
.landing button { font: inherit; cursor: pointer; }
.landing button:disabled { cursor: default; }
.landing .site-header { padding-top: 24px; padding-bottom: 24px; }
.landing .site-nav { gap: 28px; font-size: 14px; }
.landing .brand img { border-radius: 8px; }
.landing .ui-icon { display: block; width: 1.4em; height: 1.4em; flex: 0 0 auto; }
.skip-link { position: fixed; z-index: 10; top: 8px; left: 8px; transform: translateY(-160%); padding: 8px 16px; background: var(--card); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.landing main > section { margin-bottom: 130px !important; }
.landing .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; padding: 24px 0 30px; text-align: left; min-height: 0; margin-bottom: 90px !important; }
.landing .hero h1 { font-size: clamp(58px, 6.8vw, 86px); line-height: 1.05; font-weight: 700; letter-spacing: -.05em; }
.wordmark { display: inline-flex; align-items: center; }
.typing-cursor { display: inline-block; width: 3px; height: .8em; margin-left: 8px; border-radius: 2px; background: currentColor; }
.enhanced:not(.motion-still) .typing-cursor { animation: cursor-blink .8s steps(1) 3; }
.landing .cta { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 40px; }
/* Apple's official badge, unaltered. Apple asks for at least 40px tall and clear space of a quarter of its height. */
.landing .app-store-badge { display: block; border-radius: 9px; }
.landing .app-store-badge img { display: block; height: 56px; width: auto; }

/* Messages stays in its native light appearance, even on the dark website. */
.message-window, .device { container-type: inline-size; }
.im-screen { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif; font-size: 4.3257cqw; font-weight: 400; line-height: 1.25; background: #fff; color: #000; display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; letter-spacing: -.015em; color-scheme: light; }
.im-screen p { margin: 0; }
.im-header { position: relative; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; height: 5.2em; padding: .8em .95em 0; background: #ffffffed; }
.im-back, .im-video { display: grid; place-items: center; width: 2.55em; height: 2.55em; border-radius: 50%; box-shadow: 0 3px 14px #0000000c; color: #1b191c; margin-top: .2em; }
.im-back .ui-icon { width: 1.1em; }
.im-video .ui-icon { width: 1.45em; }
.im-contact { display: flex; align-items: center; flex-direction: column; gap: .18em; }
.im-contact img { width: 2.9em; height: 2.9em; object-fit: cover; border-radius: 50%; }
.im-contact > span { font-size: .82em; font-weight: 600; display: flex; align-items: center; gap: .4em; }
.im-contact b { font-weight: 400; color: #a4a4aa; font-size: 1.1em; }
.im-date { text-align: center; color: #8e8e93; font-size: .59em; line-height: 1.55; padding: .75em 0 1.5em; letter-spacing: 0; }
.im-date strong { color: #8e8e93; font-weight: 600; }
.im-bubble { --bubble: #e9e9eb; position: relative; width: fit-content; max-width: 78%; padding: .55em .83em; border-radius: 1.18em; background: var(--bubble); color: #000; font-size: 1em; line-height: 1.22; font-weight: 400; text-align: left; overflow-wrap: break-word; flex-shrink: 0; isolation: isolate; }
.im-bubble::after { content: ''; position: absolute; bottom: -.02em; right: -.4em; width: 1.05em; height: .98em; background: var(--bubble); mask: url('/assets/bubble-tail.svg') center / contain no-repeat; -webkit-mask: url('/assets/bubble-tail.svg') center / contain no-repeat; z-index: -1; }
.im-bubble.received { align-self: flex-start; transform-origin: bottom left; }
.im-bubble.received::after { right: auto; left: -.4em; transform: scaleX(-1); }
.im-bubble.sent { --bubble: #007aff; color: white; align-self: flex-end; transform-origin: bottom right; }
.im-bubble.no-tail::after { display: none; }
.im-bubble.grouped { margin-top: -.35em; }
.read-receipt { text-align: right; align-self: flex-end; color: #8e8e93; font-size: .65em; margin-top: -.2em !important; padding-right: .1em; }
.im-compose { display: flex; align-items: flex-end; gap: .55em; padding: .65em .8em .85em; flex-shrink: 0; background: #fff; }
.compose-plus { width: 2.3em; height: 2.3em; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; box-shadow: 0 3px 14px #0000000c; }
.compose-plus .ui-icon { width: 1.1em; }
.compose-field { position: relative; min-height: 2.3em; flex: 1; display: flex; align-items: center; border: 1px solid #d9d9de; border-radius: 1.25em; padding: .4em .55em .4em .8em; gap: .4em; }
.compose-placeholder { color: #8e8e93; font-size: .94em; }
.compose-text { display: none; max-height: 4.5em; overflow-y: auto; flex: 1; font-size: .88em; padding: .05em 0; line-height: 1.3; }
.compose-wave { margin-left: auto; color: #8e8e93; }
.compose-wave .ui-icon { width: 1.05em; }
.compose-send { display: none; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #007aff; color: #fff; width: 1.65em; height: 1.65em; flex-shrink: 0; margin-left: auto; padding: .15em; }
.has-draft .compose-text { display: block; }
.has-draft .compose-placeholder, .has-draft .compose-wave { display: none; }
.has-draft .compose-send { display: flex; }
.typing-dots { display: inline-flex; align-items: center; justify-content: center; gap: .23em; height: 1em; }
.typing-dots i { width: .42em; height: .42em; border-radius: 50%; background: currentColor; opacity: .45; }
.enhanced:not(.motion-still) .typing-dots i { animation: typing-dot 1.05s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s !important; }
.typing-dots i:nth-child(3) { animation-delay: .3s !important; }

/* The actual conversation, with only the last message in each run showing a tail. */
.chat-comparison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 55px; max-width: 885px; margin: 0 auto; }
.comparison-side { display: flex; flex-direction: column; }
.comparison-side h3 { margin: 0 0 20px; font-size: 17px; font-weight: 500; text-align: center; letter-spacing: -.015em; }
.message-window { flex: 1; display: flex; border: 1px solid #dadadd; border-radius: 30px; overflow: hidden; box-shadow: 0 12px 30px #00000005; }
.message-window .im-screen { flex: 1; }
.comparison-log { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; padding: .5em 1.05em 1em; flex: 1; }
/* Her typing dots sit where her answer lands, so the window never grows mid-animation. */
.answer-slot { position: relative; align-self: stretch; display: flex; flex-direction: column; }
.answer-slot .typing-preview { position: absolute; left: 0; bottom: 0; }
.typing-preview { display: none; color: #8e8e93; border-radius: 1.2em; background: #e9e9eb; padding: .6em .9em; }
.section-footnote { max-width: 885px; margin: 18px auto 0; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }
.replay-button { background: transparent; border: 0; color: var(--text-2); font-size: 12px !important; padding: 8px 0 8px 16px; }
.enhanced:not(.motion-still) .comparison [data-beat] { opacity: 0; transform: translateY(7px) scale(.97); transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.enhanced:not(.motion-still) .comparison [data-beat].shown { opacity: 1; transform: none; }
.enhanced:not(.motion-still) .typing-preview.shown:not(.finished) { display: block; }
.enhanced:not(.motion-still) .typing-preview.finished { display: none; }

/* One continuous phone: select keyboard → capture → generate → compose → send. */
/* A 402 × 874 pt iPhone screen (WelcomePhoneDemo's), so 1em is 17pt like the app. */
.device { position: relative; width: 330px; max-width: 100%; border: 7px solid #1b1b1e; border-radius: 56px; background: #111; box-shadow: 0 0 0 1px #58585c, 0 25px 55px #00000015; }
.device .im-screen { font-size: 4.2289cqw; border-radius: 15.42cqw; aspect-ratio: 402 / 874; position: relative; }
.status-bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 2.9em; flex-shrink: 0; padding: .5em 1.5em 0; font-size: .9em; font-weight: 650; }
.island { position: absolute; width: 7.6em; height: 2em; left: 50%; top: .65em; transform: translateX(-50%); background: #000; border-radius: 2em; }
.status-icons { display: flex; align-items: center; gap: .35em; }
.status-icons .ui-icon { width: 1em; height: .8em; stroke-width: 2.4; }
.battery { width: 1.35em; height: .65em; border: 1px solid #bbb; border-radius: .2em; background: #111; box-shadow: inset 0 0 0 1.3px white; }
.signal { width: 1em; height: .65em; background: currentColor; clip-path: polygon(0 65%,20% 65%,20% 100%,27% 100%,27% 45%,47% 45%,47% 100%,54% 100%,54% 22%,74% 22%,74% 100%,81% 100%,81% 0,100% 0,100% 100%,0 100%); }
.device-chat { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; padding: .25em .95em .8em; flex: 1; min-height: 0; overflow: hidden; }
.device-chat .im-date { align-self: stretch; padding-bottom: .5em; }
.device-chat .im-bubble { font-size: .94em; }
.device .im-header { height: 5.3em; }
.demo-sent, .demo-receipt, .demo-answer, .reply-typing { display: none; }
.reply-typing { background: #e9e9eb; color: #8e8e93; padding: .45em .8em; border-radius: 1em; }
.hardware-volume, .hardware-side { position: absolute; width: 4px; height: 35px; top: 28%; left: -10px; background: #4a4a4d; border-radius: 3px; }
.hardware-side { left: auto; right: -10px; top: 32%; height: 53px; }
/* Rizz Keyboard as RizzKeyboard/KeyboardView.swift draws it on iOS 26's light keyboard backdrop:
   76pt while it waits for a screenshot, 170pt with replies, then the system's globe/mic row (75pt). */
.keyboard-area { position: relative; flex-shrink: 0; background: #e5e4e9; border-radius: 1.588em 1.588em 0 0; }
.rizz-pad { position: relative; }
.rizz-keys { position: relative; height: 10em; transition: height .26s ease; }
.pad-result, .pad-wait { position: relative; height: 100%; }
.pad-wait { display: none; flex-direction: column; }
.screenshot-prompt { flex: 1; display: flex; gap: .571em; align-items: center; justify-content: center; font-size: .8235em; }
.screenshot-prompt strong { font-weight: 600; }
.wait-keys, .pad-controls { display: flex; gap: .47em; padding: 0 .47em .118em; }
.pad-controls { padding: .235em .47em .47em; }
.key { display: flex; align-items: center; justify-content: center; min-height: 2.35em; border: 0; padding: 0 .45em; background: #fff; color: #000; border-radius: .47em; box-shadow: 0 1px 0 #0000004d; font-weight: 400; }
.wait-keys .key { flex: 1; font-size: .882em; min-height: 2.667em; border-radius: .533em; }
.pad-controls { position: absolute; bottom: 0; width: 100%; }
.pad-controls .key { height: 2.667em; font-size: .882em; border-radius: .533em; }
.back-key { width: 2.8em; flex-shrink: 0; }
.back-key .ui-icon { width: 1.07em; height: 1.07em; stroke-width: 2; }
.more-key { flex: 1; }
.pad-replies { position: absolute; left: 3.8em; right: .588em; top: .35em; bottom: 3.3em; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: .3em; }
.pad-replies .im-bubble { font-size: .8235em; max-width: 100%; padding: .643em 1.07em; border: 0; }
.generated-reply { transition: opacity .25s, transform .25s; }
.generated-reply:active { transform: scale(.97); }
.generating { display: none; min-width: 3.4em; color: #fff; }
.writing-label { display: none; align-items: center; gap: .5em; }
.spinner { width: .8em; height: .8em; border: 1.5px solid #1113; border-top-color: #111a; border-radius: 50%; }
.system-strip { display: flex; justify-content: space-between; align-items: flex-start; height: 4.412em; padding: .882em 1.32em 0; color: #000; }
.system-strip span { display: grid; place-items: center; width: 2.353em; height: 2.353em; }
.system-strip .ui-icon { width: 1.53em; height: 1.53em; stroke-width: 1.45; }
/* RizzKeyboard's ScreenshotHint: a 14 × 24pt phone presses volume-up and the side button, flashes, and its
   shot shrinks into the corner and slides away, on a 2.7s loop. 1em is 17pt inside it. */
.phone-glyph { position: relative; flex: 0 0 auto; font-size: 1.2143em; width: calc(14em / 17); height: calc(24em / 17); color: #000; }
.phone-glyph i { position: absolute; display: block; }
.pg-shell { left: calc(1em / 17); top: 0; width: calc(12em / 17); height: 100%; border: calc(1.333em / 17) solid currentColor; border-radius: calc(3.333em / 17); }
.pg-screen { left: calc(3em / 17); top: calc(2em / 17); width: calc(8em / 17); height: calc(20em / 17); border-radius: calc(1.333em / 17); overflow: hidden; }
.pg-shot { inset: 0; border-radius: inherit; background: #fff; opacity: 0; transform-origin: bottom left; }
.pg-island { left: calc(5em / 17); top: calc(2.667em / 17); width: calc(4em / 17); height: calc(1.333em / 17); border-radius: 1em; background: currentColor; }
.pg-vol, .pg-side { width: calc(2em / 17); border-radius: 1em; background: currentColor; }
.pg-vol { right: calc(12em / 17); top: calc(6em / 17); height: calc(3.667em / 17); }
.pg-side { left: calc(12em / 17); top: calc(6.333em / 17); height: calc(5.333em / 17); }
.enhanced:not(.motion-still) .pad-wait .phone-glyph { animation: pg-squeeze 2.7s -.5s infinite; }
.enhanced:not(.motion-still) .pad-wait .pg-shot { animation: pg-shot 2.7s -.5s infinite; }
.enhanced:not(.motion-still) .pad-wait :is(.pg-vol, .pg-side) { animation: pg-press 2.7s -.5s infinite; }
.apple-keyboard { display: none; }
.letter-keys { padding: .47em .176em .24em; }
.letter-row { display: flex; gap: .353em; margin-bottom: .706em; }
.letter-row:nth-child(2) { padding: 0 1.1em; }
.letter-row .key { flex: 1; padding: 0; min-width: 0; font-size: 1.3em; height: 1.9em; min-height: 0; border-radius: .36em; }
.letter-row .special { background: #c4c6ce; }
.letter-row .ui-icon { width: .85em; height: .85em; }
.third-row { gap: .5em; }
.third-row > div { display: flex; gap: .27em; flex: 7; }
.third-row > .key { flex: 1.2; }
.last-row { margin-bottom: 0; gap: .3em; }
.last-row .key { font-size: .9em; height: 2.745em; border-radius: .52em; }
.last-row .space { flex: 4; }
.last-row .return { flex: 2; }
.last-row .icon-smile { width: 1.4em; height: 1.4em; }
.keyboard-menu { display: none; position: absolute; bottom: 4.3em; left: .5em; width: 13.05em; padding: .47em; border-radius: 1.5em; background: #fffffff7; box-shadow: 0 .5em 1.6em #0003; z-index: 3; }
.keyboard-menu > span { display: flex; flex-direction: column; justify-content: center; min-height: 2.7em; padding: .5em 1.05em; font-size: 1em; border-radius: 1em; }
.keyboard-menu small { font-size: .82em; color: #8a8a8e; margin-top: .15em; }
.touch-point { display: none; position: absolute; width: 2.6em; height: 2.6em; border-radius: 50%; background: #0002; z-index: 4; left: 1.2em; bottom: 1.05em; transition: transform .4s ease, opacity .3s; }
.capture-flash { position: absolute; inset: 0; background: white; opacity: 0; pointer-events: none; z-index: 6; }
.capture-preview { position: absolute; width: 4.2em; height: 9.13em; left: 1em; bottom: 1.3em; z-index: 5; opacity: 0; transform: scale(.8); transform-origin: bottom left; }
.capture-preview .chat-thumbnail { position: static; width: 100%; height: 100%; box-shadow: 0 2px 12px #0003; }
.chat-thumbnail { position: absolute; left: .706em; top: .353em; width: 2.588em; height: 5.647em; background: #fff; border: .5px solid #0000001f; border-radius: .41em; padding: .25em; overflow: hidden; }
.thumb-header { display: flex; align-items: center; flex-direction: column; font-size: .18em; gap: .25em; }
.thumb-header img { width: 3em; height: 3em; border-radius: 50%; }
.thumb-log { display: flex; flex-direction: column; gap: .8em; padding-top: 2.8em; font-size: .15em; }
.thumb-log span { border-radius: 1em; background: #e9e9eb; padding: .4em .6em; width: fit-content; max-width: 80%; }
.thumb-log span:nth-child(2) { align-self: flex-end; background: #007aff; color: white; }
.thumb-keys { background: #d1d4da; position: absolute; bottom: 0; height: 1.6em; left: 0; right: 0; }
/* Walkthrough states. The keyboard stays short until the screenshot lands, then grows to show replies. */
.device:is([data-step='switch'], [data-step='capture']:is([data-frame='idle'],[data-frame='press'],[data-frame='flash'],[data-frame='captured'])) .pad-wait { display: flex; }
.device:is([data-step='switch'], [data-step='capture']:is([data-frame='idle'],[data-frame='press'],[data-frame='flash'],[data-frame='captured'])) .pad-result { display: none; }
.device:is([data-step='switch'], [data-step='capture']:is([data-frame='idle'],[data-frame='press'],[data-frame='flash'],[data-frame='captured'])) .rizz-keys { height: 4.471em; }
[data-step='switch']:is([data-frame='idle'],[data-frame='press'],[data-frame='menu'],[data-frame='choose']) .apple-keyboard { display: block; }
[data-step='switch']:is([data-frame='idle'],[data-frame='press'],[data-frame='menu'],[data-frame='choose']) .rizz-pad { display: none; }
[data-step='switch']:is([data-frame='menu'],[data-frame='choose']) .keyboard-menu { display: block; animation: menu-in .3s ease both; }
[data-step='switch']:is([data-frame='press'],[data-frame='menu'],[data-frame='choose']) .touch-point { display: block; }
[data-step='switch'][data-frame='choose'] .touch-point { transform: translate(3.4em,-3.75em); }
[data-frame='choose'] .menu-rizz { background: #00000012; }
[data-step='capture'][data-frame='press'] :is(.hardware-volume,.hardware-side) { background: #007aff; box-shadow: 0 0 14px #007aff99; }
[data-frame='flash'] .capture-flash { animation: flash .25s ease-out both; }
[data-frame='captured'] .capture-preview { animation: capture-in .35s ease-out both; }
[data-frame='generating'] .capture-preview { animation: pickup .5s ease-in both; }
[data-frame='generating'] .pad-result .chat-thumbnail { animation: bubble-in .4s .25s both; }
[data-frame='generating'] .generated-reply { display: none; }
[data-frame='generating'] .generating { display: block; }
[data-frame='generating'] .more-label { display: none; }
[data-frame='generating'] .writing-label { display: flex; }
[data-frame='generating'] .more-key { opacity: .6; }
[data-frame='generating'] .spinner { animation: spin .7s linear infinite; }
[data-step='reply'][data-frame='tap'] .touch-point { display: block; left: auto; right: 2.5em; bottom: 8.6em; animation: tap .5s ease both; }
[data-step='reply']:is([data-frame='selected'],[data-frame='send']) .compose-text { display: block; }
[data-step='reply']:is([data-frame='selected'],[data-frame='send']) :is(.compose-placeholder,.compose-wave) { display: none; }
[data-step='reply']:is([data-frame='selected'],[data-frame='send']) .compose-send { display: flex; }
[data-frame='send'] .compose-send { transform: scale(.85); }
[data-step='reply']:is([data-frame='sent'],[data-frame='typing'],[data-frame='answered']) .demo-sent { display: block; animation: bubble-in .35s both; }
[data-step='reply'][data-frame='sent'] .demo-receipt { display: block; }
[data-frame='typing'] .reply-typing { display: block; }
[data-frame='answered'] .demo-answer { display: block; animation: bubble-in .35s both; }

/* Works on all your chats: the five apps on a rainbow arc over one phone. Each chat plays through,
   then the arc turns the next app to the top and the phone switches to it. Chats are drawn like the
   app's practice screens (Views/Practice/*ChatScreen.swift); --u is one point of a 402pt-wide screen. */
.app-stage { --r: 250px; --step: 34deg; --tile: 76px; --apex: calc(var(--tile) / 2 + 22px); display: flex; flex-direction: column; align-items: center; }
.app-arc { position: relative; width: min(100%, 640px); height: calc(var(--apex) + var(--r) * .63 + var(--tile) * .5); z-index: 2; pointer-events: none; }
/* A faint rainbow track the icons ride on. */
.app-arc::before { content: ''; position: absolute; left: 50%; top: var(--apex); width: calc(2 * var(--r)); aspect-ratio: 1; border: 1px solid #ffffff17; border-radius: 50%; transform: translateX(-50%); -webkit-mask-image: linear-gradient(#000 25%, transparent 55%); mask-image: linear-gradient(#000 25%, transparent 55%); }
.arc-app { --slot: 0; --depth: 0; pointer-events: auto; position: absolute; left: 50%; top: calc(var(--apex) + var(--r)); width: var(--tile); height: var(--tile); margin: calc(var(--tile) / -2) 0 0 calc(var(--tile) / -2); padding: 0; border: 0; border-radius: 24%; background: none; z-index: calc(10 - var(--depth)); transform: rotate(calc(var(--slot) * var(--step))) translateY(calc(-1 * var(--r))) rotate(calc(var(--slot) * var(--step) * -1)); transition: transform .85s cubic-bezier(.3, .85, .25, 1), opacity .28s; }
.arc-app:nth-child(2) { --slot: 1; --depth: 1; }
.arc-app:nth-child(3) { --slot: 2; --depth: 2; }
.arc-app:nth-child(4) { --slot: -2; --depth: 2; }
.arc-app:nth-child(5) { --slot: -1; --depth: 1; }
.arc-app.arc-leaving { opacity: 0; }
.arc-app.arc-jump, .arc-app.arc-jump .arc-tile { transition: none; }
.arc-app:focus-visible { outline: 2px solid var(--link); outline-offset: 6px; }
/* 3D tiles: an extruded edge in each app's darker color, a glossy bevel, and a tilt toward the middle. */
.arc-tile { position: relative; display: block; width: 100%; height: 100%; border-radius: inherit; transform: perspective(520px) rotateY(calc(var(--slot) * -17deg)) rotateX(8deg) scale(calc(1.2 - var(--depth) * .21)); filter: brightness(calc(1 - var(--depth) * .13)); box-shadow: 0 1px 0 var(--edge), 0 2px 0 var(--edge), 0 3px 0 var(--edge), 0 4px 0 var(--edge), 0 5px 0 var(--edge), 0 6px 0 var(--edge), 0 7px 1px var(--edge), 0 16px 22px #000000b3; transition: transform .85s cubic-bezier(.3, .85, .25, 1), filter .5s, box-shadow .5s; }
.arc-tile img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.arc-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, #ffffff80, #ffffff21 30%, #fff0 48%), radial-gradient(120% 70% at 50% 118%, #00000047, #0000 62%); box-shadow: inset 0 1.5px 1px #ffffffa6, inset 0 -2px 3px #0000004d, inset 0 0 0 .5px #ffffff40; pointer-events: none; }
.arc-app.is-active .arc-tile { box-shadow: 0 1px 0 var(--edge), 0 2px 0 var(--edge), 0 3px 0 var(--edge), 0 4px 0 var(--edge), 0 5px 0 var(--edge), 0 6px 0 var(--edge), 0 7px 1px var(--edge), 0 18px 26px #000000b3, 0 10px 46px -4px var(--glow); }
.enhanced:not(.motion-still) .arc-app.is-active .arc-tile { animation: arc-float 3.4s ease-in-out infinite; }
.arc-app:hover .arc-tile { filter: brightness(calc(1.08 - var(--depth) * .13)); }
.arc-app[data-app='tinder'] { --edge: #8f0d07; --glow: #ff3b30a6; }
.arc-app[data-app='hinge'] { --edge: #9d9d9d; --glow: #ffffff66; }
.arc-app[data-app='bumble'] { --edge: #b88900; --glow: #ffcc00a6; }
.arc-app[data-app='instagram'] { --edge: #7b1d9e; --glow: #e1306ca6; }
.arc-app[data-app='imessage'] { --edge: #188a32; --glow: #34c759a6; }
.app-device { --u: calc((100cqw - 10px) / 402); position: relative; z-index: 1; width: 300px; max-width: 100%; margin-top: calc(72px - var(--r) * .63 - var(--tile) * .5); container-type: inline-size; }
.mini-phone { position: relative; border: 5px solid #1b1b1e; border-radius: calc(62 * var(--u) + 5px); background: #111; box-shadow: 0 0 0 1px #4a4a4e, 0 24px 50px #0006; }
.mini-phone > :is(.hardware-volume, .hardware-side) { width: 3px; left: -7px; height: 7%; }
.mini-phone > .hardware-side { left: auto; right: -7px; height: 10%; }
.mini-phone:has(.app-demo.is-active:is([data-state~='press'], [data-state~='flash'])) > :is(.hardware-volume, .hardware-side) { background: #007aff; box-shadow: 0 0 10px #007aff99; }
.app-screens { position: relative; aspect-ratio: 402 / 874; overflow: hidden; border-radius: calc(62 * var(--u)); background: #fff; }
.app-screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--app-bg); color: #000; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif; font-size: calc(17 * var(--u)); line-height: 1.25; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; color-scheme: light; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.app-screen.is-active { opacity: 1; visibility: visible; transition: opacity .45s; }
.app-screen p { margin: 0; }
.app-screen .status-bar { flex-shrink: 0; }
.app-head, .app-compose { position: relative; flex-shrink: 0; }
.app-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; transition: opacity .3s; }
/* Short threads sit at the top, under the header, like the real apps; this spacer gives way once the
   thread fills the screen, and then the newest message stays at the bottom. */
.app-log::after { content: ''; flex: 1 1 auto; order: 99; }
.app-screen .ui-icon { width: 1em; height: 1em; }
.app-screen .av { border-radius: 50%; object-fit: cover; }
.msg { position: relative; display: flex; align-items: flex-end; flex-shrink: 0; }
.msg.sent { justify-content: flex-end; }
.msg p { position: relative; width: fit-content; overflow-wrap: break-word; background: var(--bubble); color: var(--ink); isolation: isolate; }
.msg.recv p { --bubble: var(--app-recv); --ink: var(--app-recv-ink); }
.msg.sent p { --bubble: var(--app-sent); --ink: var(--app-sent-ink); }
.msg p.typing { color: var(--app-dots, #8e8e93); }
.msg .av { position: absolute; left: 0; bottom: 0; }
.meta { flex-shrink: 0; color: var(--app-meta); }
.field { position: relative; display: flex; align-items: center; min-width: 0; }
.field .ph { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; color: var(--app-ph); }
.draft { display: none; flex: 1; min-width: 0; max-height: 3.9em; overflow: hidden; line-height: 1.3; }
.field .send { display: none; place-items: center; flex-shrink: 0; }
.ig-icon { display: block; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }

/* Demo states, set by landing.js: press → flash → shot → open + writing → reply → tap → draft → sent → typing → answered. */
.app-demo:not([data-state~='sent']) .later-sent, .app-demo:not([data-state~='typing']) .later-typing, .app-demo:not([data-state~='answered']) .later-answer { display: none; }
.app-demo[data-state~='sent'] .later-sent, .app-demo[data-state~='typing'] .later-typing, .app-demo[data-state~='answered'] .later-answer { animation: bubble-in .35s both; }
.app-demo[data-state~='draft'] .draft { display: block; }
.app-demo[data-state~='draft'] :is(.ph, .compose-placeholder, .compose-wave) { display: none; }
.app-demo[data-state~='draft'] .field .send { display: grid; }
.app-demo[data-state~='draft'] .compose-text { display: block; }
.app-demo[data-state~='draft'] .compose-send { display: flex; }
.app-demo:not([data-state~='open']) .rizz-keys { height: 4.471em; }
.app-demo:not([data-state~='open']) .pad-wait { display: flex; }
.app-demo:not([data-state~='open']) .pad-result { display: none; }
.app-demo[data-state~='writing'] .generated-reply { display: none; }
.app-demo[data-state~='writing'] .generating { display: block; }
.app-demo[data-state~='writing'] .more-label { display: none; }
.app-demo[data-state~='writing'] .writing-label { display: flex; }
.app-demo[data-state~='writing'] .more-key { opacity: .6; }
.app-demo[data-state~='writing'] .spinner { animation: spin .7s linear infinite; }
.app-demo[data-state~='writing'] .pad-result .chat-thumbnail { animation: bubble-in .4s .25s both; }
.app-demo[data-state~='reply']:not([data-state~='tap']):not([data-state~='draft']) .generated-reply { animation: bubble-in .35s both; }
.tap-mark { display: none; position: absolute; right: 2.6em; bottom: 4.3em; width: 2.4em; height: 2.4em; border-radius: 50%; background: #0000002b; z-index: 2; }
.app-demo[data-state~='tap'] .tap-mark { display: block; animation: tap .5s ease both; }
.app-demo[data-state~='flash'] .capture-flash { animation: flash .25s ease-out both; }
.app-demo[data-state~='shot'] .capture-preview { animation: capture-in .35s ease-out both; }
.app-demo[data-state~='writing'] .capture-preview { animation: pickup .5s ease-in both; }
.mini-shot { padding: 0; background: var(--app-bg); }
.mini-shot i { position: absolute; display: block; border-radius: 1em; }
.ms-head { left: 50%; top: 9%; width: 16%; aspect-ratio: 1; transform: translateX(-50%); background: #c7c7cc; }
.ms-b { height: 5.5%; background: var(--app-recv-shot, var(--app-recv)); left: 9%; width: 52%; }
.ms-s { top: 30%; left: auto; right: 9%; width: 60%; background: var(--app-sent); }
.ms-r { top: 40%; width: 30%; }
.ms-long { top: 48%; width: 62%; }
.ms-kb { left: 0; right: 0; bottom: 0; height: 18%; border-radius: 0 !important; background: #e5e4e9; }

/* Tinder (2025–26): warm gray, glass controls, white and deep maroon bubbles with curled tails. */
[data-app='tinder'] { --app-bg: #f0eeee; --app-recv: #fff; --app-recv-ink: #1c1817; --app-sent: #320006; --app-sent-ink: #fbfbfb; --app-ph: #888685; --app-dots: #524b4a; --app-recv-shot: #fff; }
.app-screen[data-app='tinder'] { background: linear-gradient(#f9f9f9, #f0eeee calc(150 * var(--u))); }
[data-app='tinder'] .app-head { height: calc(80 * var(--u)); display: flex; justify-content: space-between; align-items: flex-start; padding: calc(5 * var(--u)) calc(16 * var(--u)) 0; }
.glass-btn { display: grid; place-items: center; width: calc(37 * var(--u)); height: calc(37 * var(--u)); border-radius: 50%; background: #f9f9f9; box-shadow: inset 0 0 0 .5px #fffe, 0 calc(4 * var(--u)) calc(12 * var(--u)) #00000012; color: #1c1817; font-size: calc(18 * var(--u)); }
.glass-btn .icon-chev { stroke-width: 2.2; }
.tn-id { position: absolute; left: 50%; top: calc(4 * var(--u)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.tn-id .av { position: relative; z-index: 1; width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.tn-pill { display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(24.5 * var(--u)); margin-top: calc(-3.3 * var(--u)); padding: 0 calc(8.2 * var(--u)) 0 calc(9 * var(--u)); border-radius: 99px; background: #f7f6f6; box-shadow: inset 0 0 0 .5px #fffe, 0 calc(4 * var(--u)) calc(12 * var(--u)) #00000012; font-size: calc(14 * var(--u)); font-weight: 600; color: #1c1817; white-space: nowrap; }
.tn-pill .ui-icon { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
[data-app='tinder'] .app-log { padding: 0 calc(8 * var(--u)) calc(14 * var(--u)); }
[data-app='tinder'] .msg { margin-top: calc(2 * var(--u)); }
[data-app='tinder'] .msg.gap { margin-top: calc(16 * var(--u)); }
[data-app='tinder'] .msg.recv { padding-left: calc(46 * var(--u)); }
[data-app='tinder'] .msg .av { width: calc(40 * var(--u)); height: calc(40 * var(--u)); bottom: calc(-7 * var(--u)); }
[data-app='tinder'] .msg p { font-size: calc(16 * var(--u)); line-height: 1.4; padding: .55em .88em; border-radius: 1.5em; max-width: calc(247.7 * var(--u)); }
[data-app='tinder'] .msg.sent p { padding: .55em 1.2em; max-width: calc(229.9 * var(--u)); }
[data-app='tinder'] .msg.tail p::after { content: ''; position: absolute; z-index: -1; left: 0; bottom: -.4375em; width: 1.5em; height: .6875em; background: var(--bubble); -webkit-mask: url('/assets/tinder-tail.svg') center / 100% 100% no-repeat; mask: url('/assets/tinder-tail.svg') center / 100% 100% no-repeat; }
[data-app='tinder'] .msg.sent.tail p::after { left: auto; right: 0; transform: scaleX(-1); }
[data-app='tinder'] .app-compose { display: flex; align-items: flex-end; gap: calc(12.3 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(17 * var(--u)); }
[data-app='tinder'] .glass-btn.gif { width: calc(38 * var(--u)); height: calc(38 * var(--u)); flex-shrink: 0; background: #f5f4f4; font-size: calc(10.5 * var(--u)); font-weight: 700; letter-spacing: 0; }
[data-app='tinder'] .field { flex: 1; min-height: calc(38 * var(--u)); padding: calc(7 * var(--u)) calc(8.3 * var(--u)) calc(7 * var(--u)) calc(15.5 * var(--u)); gap: calc(8 * var(--u)); border-radius: calc(19 * var(--u)); background: #f5f4f4; box-shadow: inset 0 0 0 .5px #fffe, 0 calc(6 * var(--u)) calc(20 * var(--u)) #0000000d; font-size: calc(16 * var(--u)); color: #1c1817; }
[data-app='tinder'] .field .send { width: calc(23 * var(--u)); height: calc(23 * var(--u)); border-radius: 50%; background: #320006; color: #fbfbfb; font-size: calc(13 * var(--u)); align-self: center; }

/* Hinge: a liked prompt with his comment, gray and plum bubbles with a soft foot, outlined composer. */
[data-app='hinge'] { --app-bg: #fffefd; --app-recv: #eee; --app-recv-ink: #1a1a1a; --app-sent: #67295f; --app-sent-ink: #fff; --app-ph: #939393; --app-dots: #6f6f6f; }
.app-screen[data-app='hinge'] { background: linear-gradient(#fffefd 32%, #f7f7f6); }
[data-app='hinge'] .app-head { display: grid; grid-template-columns: calc(64 * var(--u)) 1fr calc(64 * var(--u)); align-items: center; height: calc(44 * var(--u)); border-bottom: calc(1 * var(--u)) solid #eee; color: #1a1a1a; }
[data-app='hinge'] .app-head strong { font-size: calc(20 * var(--u)); font-weight: 500; text-align: center; }
.hg-back { padding-left: calc(18 * var(--u)); font-size: calc(19 * var(--u)); }
.hg-back .ui-icon { stroke-width: 2.4; }
.hg-dots { justify-self: end; padding-right: calc(19 * var(--u)); font-size: calc(22 * var(--u)); }
[data-app='hinge'] .app-log { padding: 0 0 calc(22 * var(--u)); }
.hg-like { align-self: flex-end; flex-shrink: 0; width: calc(291.8 * var(--u)); margin-right: calc(28.9 * var(--u)); }
.hg-card { padding: calc(22 * var(--u)) calc(24.5 * var(--u)) calc(34.7 * var(--u)); border-radius: calc(10.5 * var(--u)); background: #eee; color: #1a1a1a; }
.hg-card small { display: block; font-size: calc(15.25 * var(--u)); font-weight: 500; }
.hg-card b { display: block; margin-top: calc(10 * var(--u)); font-family: 'New York', ui-serif, Georgia, serif; font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1.27; letter-spacing: -.01em; }
.hg-comment { position: relative; margin: calc(-17.8 * var(--u)) 0 0 !important; padding: calc(15 * var(--u)) calc(15.7 * var(--u)); border-radius: calc(10.5 * var(--u)); background: #eee1db; color: #4b4b4b; font-size: calc(14.5 * var(--u)); line-height: 1.3; }
[data-app='hinge'] .msg { margin-top: calc(4.7 * var(--u)); }
[data-app='hinge'] .msg.gap { margin-top: calc(25 * var(--u)); }
[data-app='hinge'] .msg.recv { padding-left: calc(81.8 * var(--u)); padding-right: calc(19.3 * var(--u)); }
[data-app='hinge'] .msg.sent { padding-right: calc(28.9 * var(--u)); padding-left: calc(72.3 * var(--u)); }
[data-app='hinge'] .msg .av { left: calc(20.3 * var(--u)); width: calc(50.5 * var(--u)); height: calc(50.5 * var(--u)); box-shadow: 0 1px 8px #0000000d; }
[data-app='hinge'] .msg p { font-size: calc(19.5 * var(--u)); line-height: 1.195; padding: .87em .87em; border-radius: .54em; }
[data-app='hinge'] .msg.tail p::after { content: ''; position: absolute; z-index: -1; left: -.3em; bottom: 0; width: .55em; height: .64em; background: var(--bubble); -webkit-mask: url('/assets/bubble-tail.svg') center / contain no-repeat; mask: url('/assets/bubble-tail.svg') center / contain no-repeat; transform: scaleX(-1); }
[data-app='hinge'] .msg.sent.tail p::after { left: auto; right: -.3em; transform: none; }
[data-app='hinge'] .app-compose { display: flex; align-items: flex-end; gap: calc(12.5 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)) calc(19.5 * var(--u)); }
[data-app='hinge'] .field { flex: 1; min-height: calc(61 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u)); border: calc(1 * var(--u)) solid #bababa; border-radius: calc(30.5 * var(--u)); font-size: calc(19.5 * var(--u)); color: #1a1a1a; }
[data-app='hinge'] .draft { font-size: calc(17 * var(--u)); }
.hg-mic { position: relative; display: grid; place-items: center; flex-shrink: 0; width: calc(61 * var(--u)); height: calc(61 * var(--u)); border-radius: 50%; background: #eee; color: #1a1a1a; font-size: calc(26 * var(--u)); }
[data-app='hinge'] .field .send { position: absolute; right: calc(-73.5 * var(--u)); bottom: calc(-1 * var(--u)); width: calc(61 * var(--u)); height: calc(61 * var(--u)); border-radius: 50%; background: #67295f; color: #fff; font-size: calc(22 * var(--u)); z-index: 1; }

/* Bumble: she messages first; yellow and gray bubbles with one tight corner; a row of tools. */
[data-app='bumble'] { --app-bg: #fff; --app-recv: #f3f3f3; --app-recv-ink: #202020; --app-sent: #ffdb5b; --app-sent-ink: #202020; --app-ph: #555; --app-meta: #4d4d4d; --app-dots: #9a9a9a; }
[data-app='bumble'] .app-head { display: flex; align-items: center; height: calc(43 * var(--u)); padding: 0 calc(5.5 * var(--u)) 0 calc(4 * var(--u)); color: #1e1e1e; }
.bb-back { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(44 * var(--u)); font-size: calc(22 * var(--u)); }
.bb-back .ui-icon { stroke-width: 2.5; }
[data-app='bumble'] .app-head .av { width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-left: calc(4 * var(--u)); }
[data-app='bumble'] .app-head strong { flex: 1; margin-left: calc(9 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 700; color: #202020; }
.bb-icons { display: flex; gap: calc(18 * var(--u)); padding-right: calc(10 * var(--u)); font-size: calc(24 * var(--u)); }
[data-app='bumble'] .app-log { padding: 0 calc(10 * var(--u)) calc(12 * var(--u)); }
[data-app='bumble'] .meta { font-size: calc(13 * var(--u)); text-align: center; margin: calc(12 * var(--u)) 0 calc(4 * var(--u)); }
[data-app='bumble'] .msg { margin-top: calc(5 * var(--u)); }
[data-app='bumble'] .msg.gap { margin-top: calc(16 * var(--u)); }
[data-app='bumble'] .msg.recv { padding-right: calc(111 * var(--u)); }
[data-app='bumble'] .msg.sent { padding-left: calc(111 * var(--u)); }
[data-app='bumble'] .msg p { font-size: calc(18 * var(--u)); line-height: 1.21; padding: .533em .89em; border-radius: 1.11em; }
[data-app='bumble'] .msg.recv.tail p { border-bottom-left-radius: .17em; }
[data-app='bumble'] .msg.sent.tail p { border-bottom-right-radius: .17em; }
[data-app='bumble'] .receipt { text-align: right; margin: calc(5.6 * var(--u)) 0 0; }
[data-app='bumble'] .app-compose { display: flex; align-items: flex-end; gap: calc(9 * var(--u)); padding: calc(8 * var(--u)) calc(10.2 * var(--u)) calc(17 * var(--u)) calc(9 * var(--u)); color: #1e1e1e; }
.bb-cam, .bb-tools { display: flex; align-items: center; height: calc(40 * var(--u)); font-size: calc(26 * var(--u)); }
.bb-tools { gap: calc(9 * var(--u)); }
[data-app='bumble'] .field { flex: 1; min-height: calc(40 * var(--u)); padding: calc(6 * var(--u)) calc(9.3 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u)); gap: calc(8 * var(--u)); border: calc(1 * var(--u)) solid #ededed; border-radius: calc(20 * var(--u)); font-size: calc(17 * var(--u)); color: #202020; }
.bb-gif { display: grid; place-items: center; flex-shrink: 0; width: calc(21.8 * var(--u)); height: calc(21.8 * var(--u)); border: calc(1.7 * var(--u)) solid #1e1e1e; border-radius: 50%; font-size: calc(8.5 * var(--u)); font-weight: 700; letter-spacing: 0; }
[data-app='bumble'][data-state~='draft'] :is(.bb-cam, .bb-tools, .bb-gif) { display: none; }
[data-app='bumble'][data-state~='draft'] .app-compose { padding-left: calc(20.3 * var(--u)); padding-right: calc(14.4 * var(--u)); }
[data-app='bumble'][data-state~='draft'] .field { min-height: calc(50 * var(--u)); border-color: #9a9a9a; border-radius: calc(25 * var(--u)); padding-right: calc(8 * var(--u)); }
[data-app='bumble'] .field .send { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: #ffdb5b; color: #575757; font-size: calc(17 * var(--u)); align-self: flex-end; }

/* Instagram: a story reply, gray and blue bubbles that join, pill composer. */
[data-app='instagram'] { --app-bg: #fff; --app-recv: #f4f5f7; --app-recv-ink: #0c1014; --app-sent: #4a5df9; --app-sent-ink: #fff; --app-ph: #6a7179; --app-meta: #6a7179; --app-dots: #6a7179; }
[data-app='instagram'] .app-head { display: flex; align-items: center; height: calc(56 * var(--u)); padding: 0 calc(15.5 * var(--u)) 0 calc(15.4 * var(--u)); border-bottom: .5px solid #ccd1da; color: #0c1014; }
[data-app='instagram'] .app-head .av { width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-left: calc(9.9 * var(--u)); }
.ig-name { flex: 1; display: flex; flex-direction: column; margin-left: calc(10 * var(--u)); line-height: 1.15; }
.ig-name strong { font-size: calc(16 * var(--u)); font-weight: 700; display: flex; align-items: center; gap: calc(4 * var(--u)); }
.ig-chev { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-top: calc(1.2 * var(--u)) solid; border-right: calc(1.2 * var(--u)) solid; transform: rotate(45deg); }
.ig-name small { font-size: calc(12 * var(--u)); color: #6a7179; margin-top: calc(2 * var(--u)); }
.ig-tools { display: flex; align-items: center; gap: calc(22 * var(--u)); }
[data-app='instagram'] .app-log { padding: 0 0 calc(4 * var(--u)); }
.story-label { font-size: calc(12 * var(--u)); text-align: right; padding-right: calc(20.5 * var(--u)); margin-bottom: calc(7.5 * var(--u)) !important; }
.ig-story { align-self: flex-end; flex-shrink: 0; display: flex; gap: calc(11.7 * var(--u)); margin: 0 calc(8 * var(--u)) calc(8 * var(--u)) 0; }
.ig-story img { width: calc(88 * var(--u)); height: calc(157 * var(--u)); border-radius: calc(20 * var(--u)); object-fit: cover; }
.ig-story i { display: block; width: calc(4 * var(--u)); border-radius: 9px; background: #f3f5f7; }
[data-app='instagram'] .msg { margin-top: calc(1.5 * var(--u)); }
[data-app='instagram'] .msg.gap { margin-top: calc(14 * var(--u)); }
[data-app='instagram'] .msg.recv { padding: 0 calc(60 * var(--u)) 0 calc(56 * var(--u)); }
[data-app='instagram'] .msg.sent { padding: 0 calc(8 * var(--u)) 0 calc(80 * var(--u)); }
[data-app='instagram'] .msg .av { left: calc(16 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
[data-app='instagram'] .msg p { font-size: calc(16 * var(--u)); line-height: 1.19; padding: .61em .81em; border-radius: 1.21em; }
[data-app='instagram'] .msg.recv:not(.tail) p { border-bottom-left-radius: .25em; }
[data-app='instagram'] .msg.recv.joined p { border-top-left-radius: .25em; }
[data-app='instagram'] .msg.sent:not(.tail) p { border-bottom-right-radius: .25em; }
[data-app='instagram'] .msg.sent.joined p { border-top-right-radius: .25em; }
[data-app='instagram'] .receipt { font-size: calc(12 * var(--u)); text-align: right; padding-right: calc(20.5 * var(--u)); margin-top: calc(5 * var(--u)) !important; }
[data-app='instagram'] .app-compose { padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(17 * var(--u)); }
[data-app='instagram'] .field { min-height: calc(42 * var(--u)); padding: calc(5 * var(--u)); border-radius: calc(21 * var(--u)); background: #f4f5f7; font-size: calc(14 * var(--u)); color: #0c1014; }
[data-app='instagram'] .field :is(.ph, .draft) { margin: 0 calc(8 * var(--u)) 0 calc(9.5 * var(--u)); }
.ig-cam, .ig-find { display: grid; place-items: center; flex-shrink: 0; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: #4a5df9; }
.ig-cam .ig-icon { width: calc(20 * var(--u)); height: calc(20 * var(--u)); filter: invert(1); }
.ig-find { display: none; background: #fff; color: #4a5df9; font-size: calc(16 * var(--u)); }
.field .ig-tools { gap: calc(16.2 * var(--u)); margin-right: calc(6.3 * var(--u)); }
[data-app='instagram'][data-state~='draft'] :is(.ig-cam, .field .ig-tools) { display: none; }
[data-app='instagram'][data-state~='draft'] .ig-find { display: grid; }
[data-app='instagram'] .field .send { width: calc(47 * var(--u)); height: calc(32 * var(--u)); border-radius: 99px; background: #4a5df9; color: #fff; font-size: calc(16 * var(--u)); align-self: flex-end; }

/* iMessage (iOS 26): the same header, bubbles, and composer as the rest of the page. */
[data-app='imessage'] { --app-bg: #fff; --app-sent: #007aff; --app-recv-shot: #e9e9eb; }
[data-app='imessage'] .app-log { align-items: flex-start; gap: .5em; padding: 0 .95em .7em; }
[data-app='imessage'] .im-date { align-self: stretch; padding: 0 0 .4em; }
[data-app='imessage'] .im-bubble { font-size: .94em; }
[data-app='imessage'] .im-typing { color: #8e8e93; padding: .5em .85em; }
[data-app='imessage'] .im-compose { padding-bottom: 1em; }
/* In the hero's right column the arc is a little tighter than the full-width version. */
@media (min-width: 681px) {
  .hero-stage { --r: 205px; --tile: 66px; }
  .hero-stage .app-device { width: 272px; }
}
/* How it works: the onboarding slide (OnboardingView.swift, HowItWorksSteps), at its real point sizes,
   on a white card like the app's light onboarding. 1px here = 1pt there. */
.how { padding-top: 55px; border-top: 1px solid var(--separator); }
.how-card { --ink: #111113; --secondary: #8a8a8f; --pill: #f4f4f6; --track: #ebebee; width: 393px; max-width: 100%; margin: 0 auto; padding: 28px 20px 24px; border-radius: 36px; background: #fff; color: var(--ink); color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif; -webkit-font-smoothing: antialiased; box-shadow: 0 30px 80px #0000004d; }
.how-card h2 { margin: 0 0 24px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.how-steps { display: flex; flex-direction: column; gap: 12px; }
.how-step { padding: 16px; border-radius: 20px; background: var(--pill); }
.how-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.how-head:focus-visible { outline: 2px solid #007aff; outline-offset: 4px; border-radius: 12px; }
.how-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); }
.how-icon svg { width: 18px; height: 18px; }
.how-text { display: flex; flex-direction: column; gap: 2px; }
.how-text strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.how-text small { font-size: 14px; color: var(--secondary); }
.how-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.3, .9, .3, 1); }
.how-step.is-open .how-body { grid-template-rows: 1fr; }
.how-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.how-inner > :first-child { margin-top: 14px; }
.how-demo { position: relative; height: 164px; border-radius: 16px; background: #fff; overflow: hidden; opacity: 0; transform: scale(.96); transform-origin: top; transition: opacity .3s, transform .45s cubic-bezier(.3, .9, .3, 1); }
.how-step.is-open .how-demo { opacity: 1; transform: none; }
.how-timer { height: 3px; border-radius: 3px; background: var(--track); overflow: hidden; }
.how-timer i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.how-step.is-open .how-timer i { animation: how-fill var(--how-duration, 3s) linear forwards; }
.how.offscreen .how-timer i, .page-hidden .how-timer i { animation-play-state: paused; }
.motion-still .how-step.is-open .how-timer i { animation: none; transform: none; }
@keyframes how-fill { to { transform: none; } }
.how-note { margin: 18px 4px 0; font-size: 13px; line-height: 1.5; color: var(--secondary); text-align: center; }

/* Mini text field and keyboard (the onboarding's Mini). */
.mini-field { display: flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--track); border-radius: 14px; font-size: 12px; color: var(--secondary); white-space: nowrap; overflow: hidden; }
.demo-switch { display: flex; flex-direction: column; }
.demo-switch .mini-field { flex: none; margin: 10px 14px; }
.mini-kb { position: relative; flex: 1; background: #d3d5dc; display: flex; align-items: flex-end; }
.mini-rows { width: 100%; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.mini-row { display: flex; gap: 4px; align-items: center; }
.mini-row i { flex: 1; height: 18px; border-radius: 4px; background: #fff; box-shadow: 0 1px 0 #0003; }
.mini-row.r2 { padding: 0 10px; }
.mini-row.r3 { padding: 0 26px; }
.mini-row.r4 { gap: 6px; }
.mini-globe { display: grid; place-items: center; flex: 0 0 28px; height: 20px; border-radius: 5px; color: var(--ink); transition: background .3s, transform .3s; }
.mini-globe svg { width: 13px; height: 13px; }

.kb-menu { position: absolute; left: 8px; bottom: 30px; width: 144px; padding: 4px; display: flex; flex-direction: column; border-radius: 14px; background: #fff; box-shadow: 0 4px 10px #0000002e; transform-origin: bottom left; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .4s cubic-bezier(.3, 1.3, .5, 1); }
.kb-menu span { display: flex; flex-direction: column; justify-content: center; min-height: 22px; padding: 0 9px; border-radius: 10px; font-size: 11px; color: #000; transition: background .2s; }
.kb-menu .m-rizz { min-height: 30px; }
.kb-menu small { font-size: 9px; color: #8a8a8e; }
.finger { position: absolute; width: 24px; height: 24px; left: 10px; bottom: 6px; border-radius: 50%; background: #11111333; opacity: 0; transition: left .4s cubic-bezier(.3, 1, .4, 1), bottom .4s cubic-bezier(.3, 1, .4, 1), opacity .2s; pointer-events: none; }

/* The step's stage lives on .how-step; demos read it from there. */
.how-step[data-demo='switch']:not([data-stage='0']) .mini-globe { background: #aeb3be; transform: scale(.9); }
.how-step[data-demo='switch']:not([data-stage='0']) .finger { opacity: 1; }
.how-step[data-demo='switch']:is([data-stage='2'], [data-stage='3'], [data-stage='4']) .kb-menu { opacity: 1; transform: none; }
.how-step[data-demo='switch'][data-stage='3'] .m-english, .how-step[data-demo='switch'][data-stage='4'] .m-rizz { background: #00000014; }
.how-step[data-demo='switch'][data-stage='3'] .finger { left: 68px; bottom: 63px; }
.how-step[data-demo='switch'][data-stage='4'] .finger { left: 68px; bottom: 37px; }

/* Step 2: the phone's volume-up and side buttons glow and pulse, press in, then the flash and thumbnail. */
.demo-shot { display: grid; place-items: center; }
.shot-phone { position: relative; width: 76px; height: 148px; padding: 4px; border-radius: 18px; background: var(--ink); }
.shot-screen { position: relative; height: 100%; border-radius: 13px; background: #fff; overflow: hidden; display: flex; align-items: center; }
.shot-chat { width: 100%; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.shot-chat i { display: block; height: 10px; border-radius: 5px; background: #e9e9eb; }
.shot-chat .g1 { width: 34px; } .shot-chat .g2 { width: 50px; }
.shot-chat .b1 { width: 40px; align-self: flex-end; background: #007aff; }
.shot-flash { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .3s; }
.shot-thumb { position: absolute; left: 5px; bottom: 5px; width: 18px; height: 34px; border-radius: 3px; background: var(--pill); box-shadow: inset 0 0 0 1px #1111134d; opacity: 0; transform: scale(2.5); transform-origin: bottom left; transition: opacity .35s, transform .45s cubic-bezier(.3, 1, .4, 1); }
.hw { position: absolute; width: 4px; border-radius: 2px; background: var(--ink); transition: transform .25s, background .3s, box-shadow .3s; }
.hw-up { left: -7px; top: 49px; height: 10px; }
.hw-down { left: -7px; top: 62px; height: 10px; }
.hw-side { right: -7px; top: 55px; height: 18px; }
.how-step[data-demo='shot']:is([data-stage='0'], [data-stage='1']) :is(.hw-up, .hw-side) { background: #007aff; }
.how-step[data-demo='shot'][data-stage='0'] :is(.hw-up, .hw-side) { animation: hw-pulse 1.2s ease-in-out infinite; }
.how-step[data-demo='shot'][data-stage='1'] :is(.hw-up, .hw-side) { box-shadow: 0 0 8px #007aff; }
.how-step[data-demo='shot'][data-stage='1'] .hw-up, .how-step[data-demo='shot'][data-stage='1'] .hw-down { transform: translateX(2px); }
.how-step[data-demo='shot'][data-stage='1'] .hw-side { transform: translateX(-2px); }
.how-step[data-demo='shot'][data-stage='2'] .shot-flash { opacity: 1; transition: none; }
.how-step[data-demo='shot']:is([data-stage='3'], [data-stage='4']) .shot-thumb { opacity: 1; transform: none; }
@keyframes hw-pulse { 0%, 100% { box-shadow: 0 0 2px #007aff; scale: 1 1; } 50% { box-shadow: 0 0 8px #007aff; scale: 1.6 1; } }

/* Step 3: Rizz Keyboard with a reply (RizzKeyboardMock, 393 × 251pt, scaled to the card). */
.demo-reply { --kb-scale: calc(321 / 393); height: 300px; display: flex; flex-direction: column; }
.tr-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 10px 14px 0; }
.tr-chat p { margin: 0; padding: 5px 9px; border-radius: 11px; font-size: 11px; line-height: 1.25; }
.tr-them { background: #e9e9eb; color: var(--ink); }
.tr-me { align-self: flex-end; background: #007aff; color: #fff; display: none; transform-origin: bottom right; }
.tr-compose { display: flex; align-items: center; gap: 6px; padding: 8px 14px; }
.tr-compose .mini-field { flex: 1; }
.tr-draft { display: none; color: var(--ink); }
.tr-send { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--track); color: #fff; transition: background .2s, transform .2s; }
.tr-send svg { width: 11px; height: 11px; }
.tr-kb-wrap { flex: none; height: calc(251px * var(--kb-scale)); }
.tr-kb { width: 393px; height: 251px; transform: scale(var(--kb-scale)); transform-origin: top left; background: #d1d4da; display: flex; flex-direction: column; font-family: inherit; }
.tr-conv { position: relative; height: 118px; display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 10px; }
.tr-reply.im-bubble { font-size: 14px; padding: 9px 15px; border-radius: 20px; max-width: 75%; margin-right: 5px; }
.tr-shot { position: absolute; left: 12px; top: 6px; width: 44px; height: 96px; padding: 8px 5px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 .5px #0000001f; display: flex; flex-direction: column; gap: 4px; }
.tr-shot .ms-dot { width: 8px; height: 8px; border-radius: 50%; background: #c7c7cc; align-self: center; margin-bottom: auto; }
.tr-shot .ms { display: block; height: 6px; border-radius: 3px; background: #e9e9eb; }
.tr-shot .ms.b { background: #007aff; align-self: flex-end; }
.tr-tap { position: absolute; left: 273px; top: 74px; width: 44px; height: 44px; border-radius: 50%; background: #11111340; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s; }
.tr-bar { display: flex; gap: 8px; padding: 4px 8px 8px; }
.tr-key { display: grid; place-items: center; height: 40px; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 #0000004d; color: #000; font-size: 15px; }
.tr-back { flex: 0 0 42px; } .tr-back svg { width: 16px; height: 16px; }
.tr-more { flex: 1; }
.tr-strip { display: flex; justify-content: space-between; align-items: center; height: 47px; padding: 0 22px; color: #4a4a4f; }
.tr-strip svg { width: 24px; height: 24px; }
.tr-home { display: grid; place-items: center; height: 34px; }
.tr-home i { width: 134px; height: 5px; border-radius: 3px; background: #000; }
.how-step[data-demo='reply'][data-stage='1'] .tr-tap { opacity: 1; transform: none; }
.how-step[data-demo='reply']:is([data-stage='2'], [data-stage='3']) :is(.tr-empty) { display: none; }
.how-step[data-demo='reply']:is([data-stage='2'], [data-stage='3']) .tr-draft { display: inline; }
.how-step[data-demo='reply']:is([data-stage='2'], [data-stage='3']) .tr-send { background: #007aff; }
.how-step[data-demo='reply'][data-stage='3'] .tr-send { transform: scale(.85); }
.how-step[data-demo='reply'][data-stage='4'] .tr-me { display: block; animation: bubble-in .35s both; }
@keyframes arc-float { 50% { translate: 0 -6px; } }
@media (max-width: 680px) {
  .app-stage { --r: 155px; --step: 36deg; --tile: 54px; }
  .app-device { width: 232px; margin-top: calc(56px - var(--r) * .63 - var(--tile) * .5); }
  .arc-tile { box-shadow: 0 1px 0 var(--edge), 0 2px 0 var(--edge), 0 3px 0 var(--edge), 0 4px 0 var(--edge), 0 5px 1px var(--edge), 0 12px 16px #000000b3; }
}

.landing main > .card { padding: 30px 0 0; max-width: 760px; border-top: 1px solid var(--separator); border-radius: 0; background: none; box-shadow: none; }
.landing main > .card p { font-size: 14px; line-height: 1.7; }
.landing main > section.faq { background: none; box-shadow: none; padding: 0; max-width: 760px; }
.landing .site-footer { border-top: 1px solid var(--separator); font-size: 12px; }
.enhanced .offscreen *, .page-hidden * { animation-play-state: paused !important; }
.motion-still *, .motion-still *::before, .motion-still *::after { animation: none !important; transition: none !important; }
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes typing-dot { 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(5px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes menu-in { from { opacity: 0; transform: scale(.9) translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes flash { 0%,25% { opacity: .95; } 100% { opacity: 0; } }
@keyframes capture-in { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
/* Into the keyboard's pinned thumbnail (44 × 96pt at 12, 6) as the keyboard grows to 170pt. */
@keyframes pickup { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(-.294em, -7.1em) scale(.616); } }
@keyframes pg-squeeze { 0%, 37% { transform: none; } 41.5%, 52.6% { transform: scale(.95); } 63% { transform: scale(1.015); } 70%, 100% { transform: none; } }
@keyframes pg-press { 0%, 37% { background: currentColor; width: calc(2em / 17); } 41.5%, 52.6% { background: #007aff; width: calc(1.333em / 17); } 63.7%, 100% { background: currentColor; width: calc(2em / 17); } }
@keyframes pg-shot {
  0%, 40.7% { opacity: 0; transform: none; box-shadow: inset 0 0 0 calc(1.5em / 17) #0000; }
  42.6%, 48.1% { opacity: 1; transform: none; box-shadow: inset 0 0 0 calc(1.5em / 17) #0000; }
  64.8%, 81.5% { opacity: 1; transform: translate(calc(.667em / 17), calc(-.667em / 17)) scale(.4); box-shadow: inset 0 0 0 calc(1.5em / 17) #0000008c; }
  91.9% { opacity: 1; transform: translate(calc(-3.7em / 17), calc(-.667em / 17)) scale(.4); box-shadow: inset 0 0 0 calc(1.5em / 17) #0000008c; }
  92.6%, 100% { opacity: 0; transform: none; }
}
@keyframes tap { 0% { opacity: 0; transform: scale(1.2); } 50% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-color-scheme: dark) {
  .message-window { border-color: #444448; }
  .device { box-shadow: 0 0 0 1px #58585c, 0 25px 55px #0004; }
}
@media (max-width: 900px) {
  .landing .hero { gap: 40px; }
  .chat-comparison { gap: 28px; }
  .landing .hero h1 { font-size: 64px; }
}
@media (max-width: 680px) {
  .landing { --gutter: 22px; }
  .landing .site-header { padding-top: 20px; padding-bottom: 20px; }
  .landing .brand { font-size: 15px; gap: 8px; }
  .landing .brand img { width: 29px; height: 29px; }
  .landing .site-nav { font-size: 12px; gap: 16px; }
  .landing .hero { grid-template-columns: minmax(0, 1fr); gap: 45px; padding-top: 44px; text-align: center; min-height: 0; margin-bottom: 80px !important; }
  .landing .hero h1 { font-size: 62px; }
  .landing .cta { justify-content: center; flex-direction: column; gap: 20px; margin-top: 25px; }
  .landing main > section { margin-bottom: 85px !important; }
  .chat-comparison { grid-template-columns: minmax(0, 1fr); gap: 37px; max-width: 393px; }
  .comparison-side h3 { text-align: left; font-size: 16px; margin-bottom: 14px; }
  .section-footnote { max-width: 393px; }
  .device { width: 330px; }
  .landing main > .card { padding-top: 25px; }
}
@media (max-width: 360px) {
  .landing { --gutter: 16px; }
  .landing .hero h1 { font-size: 55px; }
  .landing .site-nav { gap: 10px; font-size: 11px; }
  .landing .brand { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .landing .comparison [data-beat] { opacity: 1 !important; transform: none !important; }
  .landing .typing-preview { display: none !important; }
}