/* Homepage: launch film, design intro, prompt demo and references.
   Builds on the tokens in style.css and the shared frame in site.css (navigation, titles). */
:root { --spring: cubic-bezier(.34, 1.36, .64, 1); }

/* Section 0 · Launch film, framed on the film's own gradient */
.launch-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 112px 48px 48px; }
/* Title above, film below: the film takes the height left under the title, but never shrinks below 860px on desktop. */
.launch-hero-frame { position: relative; width: min(1280px, 100%, max(860px, calc((100vh - 330px) * 16 / 9))); width: min(1280px, 100%, max(860px, calc((100svh - 330px) * 16 / 9))); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 26px; background: #f6f8fc; box-shadow: 0 0 0 1px rgb(255 255 255 / 85%), 0 2px 6px rgb(0 0 61 / 5%), 0 44px 90px -48px rgb(0 0 61 / 40%), 0 30px 120px -50px rgb(40 101 203 / 48%); animation: launch-frame-in 1.3s var(--ease) both; }
.launch-hero-film { display: block; width: 100%; height: 100%; object-fit: cover; }
.launch-hero-playback { position: absolute; z-index: 3; right: 18px; bottom: 18px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; background: rgb(255 255 255 / 62%); color: var(--primary); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 24px -14px rgb(0 0 61 / 45%); transition: background-color .2s ease, transform .3s var(--ease); }
.launch-hero-playback:hover { background: #fff; transform: scale(1.06); }
.launch-hero-playback[hidden] { display: none; }
.launch-hero-playback svg { width: 17px; height: 17px; }
.launch-hero-playback .launch-pause-icon, .launch-hero-playback.is-playing .launch-play-icon { display: none; }
.launch-hero-playback.is-playing .launch-pause-icon { display: block; }
/* The visible intro under the film: page title, one paragraph, the two industry pages. */
.launch-hero-intro { width: min(860px, 100%); margin: 0 0 clamp(36px, 4.4vh, 56px); text-align: center; }
.home-page .launch-hero-intro .vy-title { margin: 0; font-size: clamp(40px, 4.4vw, 68px); }
/* «Aus der Schweiz.» on its own line; the selector also matches once voyane-headline.js has split the words. */
.launch-hero-intro .vy-title > span:not(.vy-word) { display: block; }
@keyframes launch-frame-in { from { opacity: 0; transform: translateY(24px) scale(.965); } to { opacity: 1; transform: none; } }

/* Titles: shared rules in site.css; these adapt them to homepage-only sections. */
.home-page .reliability-heading .vy-title { margin-bottom: 0; }
.home-page .reliability-heading .vy-sub { font-size: clamp(20px, 2vw, 32px); }

/* Section 1 · Design intro with Safari window */
.design-intro { position: relative; isolation: isolate; overflow: clip; padding: 136px 0 144px; background: var(--surface); }
.safari-window { position: relative; max-width: 1120px; margin: 0 auto; border: 1px solid #dcdde3; border-radius: 16px; background: #fff; box-shadow: 0 60px 110px -56px rgb(28 36 69 / 34%), 0 8px 24px -12px rgb(28 36 69 / 12%); transform-origin: 50% 100%; }
.safari-window::before { content: ""; position: absolute; z-index: -1; inset: 10% 4% -8%; border-radius: 50%; background: radial-gradient(closest-side, rgb(40 101 203 / 30%), rgb(125 182 237 / 18%) 55%, transparent); filter: blur(46px); pointer-events: none; }
.safari-bar { display: grid; grid-template-columns: 1fr minmax(0, 1.3fr) 1fr; align-items: center; gap: 24px; height: 46px; padding: 0 18px; border-bottom: 1px solid #e3e3e7; border-radius: 15px 15px 0 0; background: linear-gradient(#f7f7f8, #efeff1); color: #8f9096; }
.safari-bar-group { display: flex; align-items: center; gap: 18px; min-width: 0; }
.safari-bar-group:last-child { justify-content: flex-end; }
.safari-bar svg { width: 17px; height: 17px; flex: 0 0 auto; stroke-width: 1.5; }
.safari-traffic { display: flex; gap: 8px; margin-right: 4px; }
.safari-traffic > i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / 14%); }
.safari-traffic > i:nth-child(2) { background: #febc2e; }
.safari-traffic > i:nth-child(3) { background: #28c840; }
.safari-arrows { display: flex; gap: 12px; }
.safari-arrows > svg:last-child { transform: rotate(180deg); opacity: .45; }
.safari-address { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border: 1px solid #e3e3e6; border-radius: 8px; background: rgb(255 255 255 / 85%); color: #5f6066; font-size: 12px; letter-spacing: .01em; }
.safari-address > svg:first-child { width: 12px; height: 12px; }
.safari-address > .icon { position: absolute; right: 10px; width: 12px; height: 12px; }
.safari-view { overflow: hidden; border-radius: 0 0 15px 15px; background: #f5f6f9; }
.safari-view > img { display: block; width: 100%; height: auto; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .safari-window { animation: safari-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    @keyframes safari-settle { from { opacity: .35; transform: perspective(1800px) rotateX(20deg) scale(.9); } to { opacity: 1; transform: none; } }
  }
}

/* Placeholder: a quiet mock of the studio overview until the real screenshot is added. */
.studio-mock { display: grid; grid-template-columns: 19% minmax(0, 1fr); aspect-ratio: 16 / 9; container-type: inline-size; background: #f7f8fb; color: var(--primary); }
.studio-mock-side { display: flex; flex-direction: column; gap: .7cqw; padding: 2.4cqw 1.6cqw; border-right: 1px solid #ebedf2; background: #fff; }
.studio-mock-logo { margin: 0 0 1.8cqw .9cqw; font-size: 2.3cqw; font-weight: 800; letter-spacing: -.075em; line-height: 1; }
.studio-mock-label { margin: 1.5cqw 0 .3cqw .9cqw; color: #9aa0ad; font-size: .72cqw; letter-spacing: .2em; }
.studio-mock-nav { display: flex; align-items: center; gap: .9cqw; padding: .75cqw .9cqw; border-radius: .7cqw; color: #4a5064; font-size: 1.1cqw; }
.studio-mock-nav > i { width: 1.2cqw; height: .9cqw; border: .12cqw solid currentColor; border-radius: .2cqw; opacity: .6; }
.studio-mock-nav.is-active { background: #eef1f7; color: var(--primary); font-weight: 650; }
.studio-mock-main { min-width: 0; padding: 3cqw 3.4cqw; }
.studio-mock-crumb { display: block; color: #9aa0ad; font-size: .78cqw; letter-spacing: .2em; }
.studio-mock-main > strong { display: block; margin: 1.4cqw 0 .5cqw; font-size: 3.1cqw; font-weight: 750; line-height: 1.1; letter-spacing: -.05em; }
.studio-mock-meta { display: block; color: #6e7483; font-size: 1.1cqw; }
.studio-mock-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; margin: 2.3cqw 0 2.8cqw; }
.studio-mock-actions > span { display: flex; align-items: center; gap: 1.1cqw; height: 4.6cqw; padding: 0 1.4cqw; border: 1px solid #e6e9ef; border-radius: 1cqw; background: #fff; font-size: 1.1cqw; font-weight: 600; }
.studio-mock-actions b { width: 2.2cqw; height: 2.2cqw; border-radius: .6cqw; background: #eef1f7; }
.studio-mock-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; margin-top: 1.2cqw; }
.studio-mock-card { overflow: hidden; border: 1px solid #e6e9ef; border-radius: 1.1cqw; background: #fff; }
.studio-mock-card > b { display: block; padding: 1.2cqw 1.3cqw .25cqw; font-size: 1.15cqw; }
.studio-mock-card > small { display: block; padding: 0 1.3cqw 1.3cqw; color: #7a8090; font-size: .92cqw; }
.studio-mock-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.studio-mock-thumb > em { position: absolute; left: 7%; bottom: 14%; font-size: 1.55cqw; font-style: normal; font-weight: 750; line-height: 1.02; letter-spacing: -.04em; }
.studio-mock-thumb > i { position: absolute; font-style: normal; }
.studio-thumb-welcome { background: linear-gradient(90deg, #fff 48%, transparent 48%), linear-gradient(160deg, #cfe3ef, #8fb8cf 55%, #d9c7a6); color: #17191b; }
.studio-thumb-welcome > i { top: 16%; left: 7%; width: 18%; height: 7%; border-radius: 1cqw; background: #0e7a58; }
.studio-thumb-offer { background: linear-gradient(135deg, #0e7a58, #0a5e45); color: #fff; }
.studio-thumb-offer > i { right: 8%; top: 50%; display: grid; place-items: center; width: 30%; aspect-ratio: 1; border-radius: 50%; background: #d8253a; font-size: 1.1cqw; font-weight: 750; transform: translateY(-50%); }
.studio-thumb-team { background: #17191b; color: #fff; }
.studio-thumb-team > i { right: 8%; top: 50%; padding-left: 5%; border-left: 1px solid #ffffff30; font-size: 1.7cqw; font-weight: 700; transform: translateY(-50%); }

/* Section 2 · Conversation and formats */
.prompt-story { padding: 136px 0 112px; }
.prompt-chip { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 auto 48px; padding: 8px 17px 8px 9px; border: 1px solid rgb(0 0 61 / 7%); border-radius: 30px; background: rgb(255 255 255 / 75%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 28px -18px rgb(0 0 61 / 40%); font-size: 13px; font-weight: 650; }
.prompt-chip > img { width: 22px; height: 22px; }
.prompt-chip > span { display: flex; align-items: center; gap: 5px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.prompt-chip .icon { width: 14px; height: 14px; color: #248348; stroke-width: 2; }
.prompt-thread { display: flex; flex-direction: column; gap: 22px; max-width: 800px; margin: 0 auto; padding: 0; list-style: none; }
.prompt-msg { display: flex; align-items: flex-end; gap: 14px; }
.prompt-user { justify-content: flex-end; transform-origin: 100% 100%; }
.prompt-claude { transform-origin: 0 100%; }
.prompt-bubble { position: relative; max-width: 86%; margin: 0; padding: 20px 28px; font-size: clamp(19px, 2.1vw, 28px); font-weight: 620; line-height: 1.32; letter-spacing: -.035em; }
.prompt-user .prompt-bubble { border-radius: 30px 30px 8px 30px; background: var(--primary); color: #fff; box-shadow: 0 26px 50px -26px rgb(0 0 61 / 70%); }
.prompt-claude .prompt-bubble { border-radius: 30px 30px 30px 8px; background: #fff; color: var(--primary); box-shadow: 0 0 0 1px rgb(40 101 203 / 12%), 0 24px 64px -24px rgb(40 101 203 / 50%); }
.prompt-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 61 / 6%), 0 8px 20px -10px rgb(0 0 61 / 40%); }
.prompt-avatar > img { width: 24px; height: 24px; }
.prompt-word { display: inline-block; }
.prompt-thinking { display: none; }

.format-stage { --portrait-width: 35.33%; --right-width: 61.67%; position: relative; max-width: 1040px; aspect-ratio: 1.592; margin: 96px auto 0; }
.format-screen { position: absolute; margin: 0; }
.format-portrait { top: 0; left: 0; width: var(--portrait-width); }
.format-landscape { top: 0; right: 0; width: var(--right-width); }
.format-banner { right: 0; bottom: 0; width: var(--right-width); }
.format-display { position: relative; overflow: hidden; border: 5px solid #1b1c21; border-radius: 10px; background: #fff; box-shadow: 0 34px 60px -34px rgb(0 0 61 / 50%), 0 22px 90px -34px rgb(40 101 203 / 55%); container-type: inline-size; }
.format-portrait .format-display { aspect-ratio: 9 / 16; }
.format-landscape .format-display { aspect-ratio: 16 / 9; }
.format-banner .format-display { aspect-ratio: 8 / 3; }
.format-screen > figcaption { position: absolute; top: 100%; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; margin-top: 13px; color: var(--muted); font-size: 12px; line-height: 1.4; white-space: nowrap; }
.format-screen > figcaption > strong { color: var(--primary); font-weight: 650; }

/* The entrance screen of the film's sample hotel, laid out per format. */
.entry-slide { position: absolute; inset: 0; display: grid; background: #fff; color: #17191b; }
.entry-media { position: relative; overflow: hidden; min-height: 0; background: #c9dbe6; }
.entry-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.entry-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 0; }
.entry-pill { padding: .45em 1em .4em; border-radius: 99px; background: #0e7a58; color: #fff; font-weight: 700; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
.entry-title { font-weight: 760; line-height: 1; letter-spacing: -.05em; }
.entry-text { color: #5b5f66; line-height: 1.35; }
.entry-logo { display: flex; align-items: center; gap: .45em; margin-top: auto; }
.entry-logo > svg { width: 1.7em; height: auto; flex: 0 0 auto; }
.entry-logo > span { display: flex; flex-direction: column; font-weight: 760; line-height: 1; letter-spacing: -.035em; }
.entry-logo small { margin-top: .4em; color: #6b6f76; font-size: .4em; font-weight: 650; letter-spacing: .3em; }
.format-portrait .entry-slide { grid-template-rows: 50% minmax(0, 1fr); }
.format-portrait .entry-copy { padding: 8cqw 8cqw 7.5cqw; }
.format-portrait .entry-pill { font-size: 3.1cqw; }
.format-portrait .entry-title { margin-top: 5.5cqw; font-size: 11.6cqw; }
.format-portrait .entry-text { margin-top: 4.2cqw; font-size: 4.4cqw; }
.format-portrait .entry-logo { font-size: 5.4cqw; }
.format-landscape .entry-slide { grid-template-columns: 47% 53%; }
.format-landscape .entry-media { order: 2; }
.format-landscape .entry-copy { justify-content: center; padding: 5cqw 4.4cqw 4.4cqw 5.2cqw; }
.format-landscape .entry-pill { font-size: 1.45cqw; }
.format-landscape .entry-title { margin-top: 2.6cqw; font-size: 5.7cqw; }
.format-landscape .entry-text { margin-top: 2.2cqw; font-size: 1.95cqw; }
.format-landscape .entry-logo { font-size: 2.3cqw; margin-top: 0; position: absolute; left: 5.2cqw; bottom: 4.4cqw; }
.format-banner .entry-slide { grid-template-columns: 31% 69%; }
.format-banner .entry-copy { position: relative; justify-content: center; padding: 3cqw 4.2cqw; }
.format-banner .entry-pill { font-size: 1.1cqw; }
.format-banner .entry-title { margin-top: 1.5cqw; font-size: 4.9cqw; }
.format-banner .entry-text { margin-top: 1.3cqw; font-size: 1.55cqw; }
.format-banner .entry-logo { position: absolute; top: 3cqw; right: 3.4cqw; margin: 0; font-size: 1.75cqw; }

.prompt-footer { margin: 76px 0 0; text-align: center; font-size: 14px; font-weight: 620; line-height: 1.6; letter-spacing: -.01em; }
.prompt-footer > span { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 450; }

/* Motion: every state below is only hidden once home.js has taken over. */
.prompt-animated .prompt-msg { opacity: 0; filter: blur(10px); transform: translateY(26px) scale(.95); transition: opacity .7s var(--ease), filter .7s var(--ease), transform .95s var(--spring); }
.prompt-animated.is-user .prompt-user, .prompt-animated.is-thinking .prompt-claude { opacity: 1; filter: none; transform: none; }
.prompt-animated .prompt-thinking { position: absolute; top: 50%; left: 28px; display: flex; gap: 5px; opacity: 0; transform: translateY(-50%); transition: opacity .3s ease; }
.prompt-animated .prompt-thinking > i { width: 8px; height: 8px; border-radius: 50%; background: #7db6ed; animation: prompt-dot 1s ease-in-out infinite; }
.prompt-animated .prompt-thinking > i:nth-child(2) { animation-delay: .14s; }
.prompt-animated .prompt-thinking > i:nth-child(3) { animation-delay: .28s; }
.prompt-animated.is-thinking:not(.is-reply) .prompt-thinking { opacity: 1; }
.prompt-animated .prompt-word { opacity: 0; filter: blur(8px); transform: translateY(.35em); transition: opacity .55s var(--ease), filter .55s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 85ms); }
.prompt-animated.is-reply .prompt-word { opacity: 1; filter: none; transform: none; }
.prompt-animated .format-screen { opacity: 0; filter: blur(16px); transform: translateY(56px) scale(.93); transition: opacity 1s var(--ease), filter 1s var(--ease), transform 1.3s var(--ease); }
.prompt-animated .format-landscape { transition-delay: .14s; }
.prompt-animated .format-banner { transition-delay: .28s; }
.prompt-animated.is-screens .format-screen { opacity: 1; filter: none; transform: none; }
.prompt-animated .entry-media > img { transform: scale(1.16); transition: transform 2.8s var(--ease); }
.prompt-animated.is-screens .entry-media > img { transform: none; }
.prompt-animated .entry-copy > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(.45s + var(--d) * 110ms); }
.prompt-animated.is-screens .entry-copy > * { opacity: 1; transform: none; }
.prompt-animated .format-landscape .entry-copy > * { transition-delay: calc(.6s + var(--d) * 110ms); }
.prompt-animated .format-banner .entry-copy > * { transition-delay: calc(.75s + var(--d) * 110ms); }
.prompt-animated .format-screen > figcaption { opacity: 0; transition: opacity .6s ease 1s; }
.prompt-animated.is-screens .format-screen > figcaption { opacity: 1; }
@keyframes prompt-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Section 3 · Pricing, laid out like preise.php (light and parallax in prices.css) */
.home-prices { padding: 132px 0 116px; background: var(--page); }
.home-prices .prices-heading { max-width: 1120px; margin: 0 auto 60px; }
.home-prices .prices-heading > h2 { margin: 0; }
.home-prices .prices-service-note a { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--primary); font-weight: 650; white-space: nowrap; }
.home-prices .prices-service-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-prices .prices-service-note .icon { width: 13px; height: 13px; }

/* Section 4 · References */
.references { padding: 132px 0 128px; }
.reference-video { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 28px; background: #0b1230; box-shadow: 0 60px 110px -60px rgb(0 0 61 / 50%); }
.reference-video > video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b1230; }
.reference-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; border-radius: 0; background: linear-gradient(0deg, rgb(0 0 25 / 38%), transparent 55%); color: #fff; }
.reference-play[hidden], .reference-video.is-playing .reference-play { display: none; }
.reference-play > span, .reference-play-symbol { display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 50%; background: rgb(255 255 255 / 16%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .4s var(--ease), background .3s ease; }
.reference-play:hover > span { background: rgb(255 255 255 / 28%); transform: scale(1.06); }
.reference-play svg, .reference-play-symbol > svg { width: 32px; height: 32px; margin-left: 4px; }
.reference-play:focus-visible { outline: 3px solid #fff; outline-offset: -8px; border-radius: 24px; }
.reference-video-placeholder { position: absolute; inset: 0; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: radial-gradient(ellipse 85% 100% at 50% 125%, #2865cb 0%, #092c87 38%, #00003d 78%); color: #fff; font-size: 14px; font-weight: 550; letter-spacing: .02em; }
.reference-video-placeholder > .room-lines { z-index: -1; color: #7db6ed; opacity: .18; }
.reference-video-placeholder > span:last-child { color: rgb(255 255 255 / 78%); }
.reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 20px 0 0; padding: 0; list-style: none; }
.reference-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 22px; background: rgb(255 255 255 / 55%); box-shadow: 0 0 0 1px rgb(255 255 255 / 75%), 0 30px 60px -40px rgb(0 0 61 / 35%); }
.reference-tile > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.reference-tile:hover > img { transform: scale(1.04); }
.reference-tile-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(160deg, rgb(255 255 255 / 70%), rgb(230 237 249 / 55%)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #8490a8; font-size: 12px; }
.reference-tile-placeholder > .icon { width: 26px; height: 26px; stroke-width: 1.3; }
.reference-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px; background: linear-gradient(0deg, rgb(0 0 25 / 60%), transparent); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; }
.js-motion .reference-tile.reveal { transition-delay: calc(var(--i) * 90ms); }

@media (max-width: 1050px) {
  .format-screen > figcaption { font-size: 11px; }
  .reference-grid { gap: 14px; }
}
@media (max-width: 760px) {
  .launch-hero { min-height: 0; padding: 116px 16px 48px; }
  .launch-hero-frame { width: 100%; border-radius: 16px; }
  .launch-hero-playback { right: 10px; bottom: 10px; width: 34px; height: 34px; }
  .launch-hero-playback svg { width: 14px; height: 14px; }
  .launch-hero-intro { margin-bottom: 28px; }
  .home-page .launch-hero-intro .vy-title { font-size: clamp(30px, 8.5vw, 44px); }
  .home-prices { padding: 84px 0 72px; }
  .home-prices .prices-heading { margin-bottom: 38px; }
  .home-prices .prices-service-note a { display: flex; justify-content: center; margin: 6px 0 0; }
  .design-intro { padding: 84px 0 88px; }
  .safari-window { border-radius: 12px; }
  .safari-bar { grid-template-columns: auto minmax(0, 1fr); gap: 12px; height: 36px; padding: 0 12px; border-radius: 11px 11px 0 0; }
  .safari-bar-group:last-child, .safari-bar-group > .icon, .safari-arrows { display: none; }
  .safari-traffic { gap: 6px; }
  .safari-traffic > i { width: 9px; height: 9px; }
  .safari-address { height: 24px; font-size: 10px; }
  .safari-view { border-radius: 0 0 11px 11px; }
  .prompt-story { padding: 84px 0 72px; }
  .prompt-chip { margin-bottom: 34px; font-size: 12px; }
  .prompt-thread { gap: 16px; }
  .prompt-msg { gap: 10px; }
  .prompt-bubble { max-width: 90%; padding: 15px 19px; font-size: 17px; }
  .prompt-user .prompt-bubble { border-radius: 22px 22px 6px 22px; }
  .prompt-claude .prompt-bubble { border-radius: 22px 22px 22px 6px; }
  .prompt-avatar { width: 34px; height: 34px; }
  .prompt-avatar > img { width: 19px; height: 19px; }
  .prompt-animated .prompt-thinking { left: 19px; }
  .format-stage { --portrait-width: 36.46%; --right-width: 59.54%; aspect-ratio: 1.5427; margin-top: 60px; }
  .format-display { border-width: 3px; border-radius: 6px; }
  .format-screen > figcaption { gap: 4px; margin-top: 8px; font-size: 10px; }
  .format-size { display: none; }
  .prompt-footer { margin-top: 56px; }
  .references { padding: 84px 0 80px; }
  .reference-video { border-radius: 18px; }
  .reference-play > span, .reference-play-symbol { width: 64px; height: 64px; }
  .reference-play svg, .reference-play-symbol > svg { width: 24px; height: 24px; }
  .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
  .reference-tile { border-radius: 16px; }
  .reference-video-placeholder { gap: 14px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .launch-hero-frame { animation: none; }
}