/* Product worlds. All copy and the interactive star hero remain source-owned. */
.showcase-site { --scene-space: clamp(72px, 9vw, 144px); }
.showcase-site .app-section { padding-block: var(--scene-space); }
.showcase-site .app-section__bg { opacity: .18; }
.showcase-site .app-section__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 7%; align-items: start; }
.showcase-site .app-copy { display: contents; }
.showcase-site .app-copy__lockup { grid-column: 1 / -1; margin: 0 0 16px; gap: 20px; }
.showcase-site .app-copy__lockup > div { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; }
.showcase-site .app-copy__num { font-size: clamp(22px, 3vw, 42px); letter-spacing: -.035em; color: var(--section-fg); }
.showcase-site .app-copy__platform { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.showcase-site .app-copy__title { grid-column: 1; grid-row: 2; font-size: clamp(52px, 6.5vw, 98px); font-weight: 700; line-height: .98; letter-spacing: -.055em; margin: 0; text-wrap: balance; max-width: none; }
.showcase-site .app-copy__lead { grid-column: 2; grid-row: 2; align-self: end; font-size: 18px; line-height: 1.65; max-width: 48ch; margin: 0; }
.showcase-site .app-copy__ctas { grid-column: 1; grid-row: 4; margin: 0; align-self: center; }
.showcase-site .app-copy__more { grid-column: 1; grid-row: 5; margin: -32px 0 0; justify-self: start; border: 0; border-radius: 0; padding: 12px 0; border-bottom: 1px solid var(--section-accent); }
.showcase-site .feature-list { grid-column: 2; grid-row: 4 / 6; display: grid; gap: 14px; margin: 0; }
.showcase-site .feature-list__bullet { box-shadow: none; }
.showcase-site .showcase-stage { grid-column: 1 / -1; grid-row: 3; position: relative; isolation: isolate; width: 100%; min-height: 680px; display: flex; justify-content: center; align-items: center; gap: 6%; padding: 50px 8%; perspective: 1400px; }
.showcase-screen { display: block; position: relative; flex-shrink: 0; overflow: hidden; border-radius: 28px; box-shadow: 0 40px 65px #0006; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.showcase-screen img { display: block; width: 100%; height: auto; }
.showcase-screen--phone { width: 26%; max-width: 275px; transform: rotate(-8deg) translateY(-16px); }
.showcase-screen--secondary { transform: rotate(8deg) translateY(24px); }
.showcase-screen--wide { width: 78%; border-radius: 14px; transform: rotateY(8deg) rotateX(4deg) rotateZ(-3deg); }
.showcase-screen--wide + .showcase-screen { position: absolute; width: 19%; right: 8%; bottom: 26px; }
/* Every world uses a different visual language, with no framing cards. */
.showcase-stage::before, .showcase-stage::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.showcase-stage[data-stage="chat"]::before { inset: 3% 0; background: radial-gradient(ellipse at center, #9db6e830, transparent 65%); }
.showcase-stage[data-stage="chat"]::after { width: 88%; height: 52%; border: 1px solid #b7c6ed55; border-radius: 50%; transform: rotate(-17deg); box-shadow: 0 0 0 55px #b7c6ed08, 0 0 0 110px #b7c6ed05; }
.showcase-site .app-section[data-app="musy"] { background: #1c1c1d; }
.showcase-stage[data-stage="musy"]::before { inset: 8% -8%; background: repeating-linear-gradient(90deg, #fcfd6c 0 4px, transparent 4px 16px); mask-image: radial-gradient(ellipse at center, #000 12%, transparent 70%); transform: rotate(-9deg); opacity: .8; }
.showcase-stage[data-stage="musy"]::after { width: 470px; height: 470px; border-radius: 50%; background: repeating-radial-gradient(circle, #080808 0 3px, #303031 4px 5px); border: 1px solid #555; left: 12%; transform: rotateX(15deg); }
.showcase-stage[data-stage="neurobase"]::before { inset: -5%; background-image: linear-gradient(30deg, transparent 49.8%, #7961d533 50%, transparent 50.2%), linear-gradient(-30deg, transparent 49.8%, #7961d533 50%, transparent 50.2%); background-size: 110px 190px; mask-image: radial-gradient(ellipse, #000 30%, transparent 70%); }
.showcase-stage[data-stage="neurobase"]::after { width: 400px; height: 400px; border-radius: 28%; background: #7961d5; transform: rotate(35deg); box-shadow: 75px 50px 0 #c4b9f2, -75px -50px 0 #e6defc; }
.showcase-stage[data-stage="calorie"]::before { width: 590px; height: 590px; border-radius: 50%; background: conic-gradient(#ff8049 0 25%, transparent 25% 27%, #c8dc73 27% 66%, transparent 66% 68%, #ffd65c 68% 98%, transparent 98%); transform: rotate(-30deg); mask-image: radial-gradient(circle, transparent 48%, #000 48.3%); }
.showcase-stage[data-stage="calorie"]::after { width: 700px; height: 700px; border-radius: 50%; border: 1px solid #49612733; }
.showcase-stage[data-stage="plant"]::before { width: 580px; height: 650px; border-radius: 90% 0 90% 0; background: repeating-linear-gradient(135deg, transparent 0 30px, #abda8050 31px 32px), linear-gradient(120deg, #244d35, #629254); transform: rotate(25deg); }
.showcase-stage[data-stage="plant"]::after { width: 600px; height: 1px; background: #b7e49170; transform: rotate(-30deg); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .showcase-stage:hover .showcase-screen--phone { transform: rotate(-4deg) translateY(-28px); }
 .showcase-stage:hover .showcase-screen--secondary { transform: rotate(4deg) translateY(10px); }
 .showcase-stage:hover .showcase-screen--wide { transform: rotateY(0) rotateX(0) rotateZ(-1deg) translateY(-8px); }
}
/* Detail covers: oversized centered type flowing into a full-width product scene. */
.showcase-site .detail-hero { padding-block: 48px 100px; }
.showcase-site .detail-hero__bg { opacity: .22; }
.showcase-site .detail-hero__inner { display: flex; flex-direction: column; gap: 48px; }
.showcase-site .detail-hero__copy { width: 100%; max-width: 1180px; text-align: center; }
.showcase-site .detail-back { display: flex; width: fit-content; padding: 0; border: 0; background: none; border-radius: 0; margin-bottom: 40px; }
.showcase-site .detail-eyebrow { border: 0; background: none; padding: 0; gap: 12px; margin-bottom: 30px; }
.showcase-site .detail-eyebrow img { width: 40px; height: 40px; border-radius: 10px; }
.showcase-site .detail-hero__title { font-size: clamp(60px, 8.5vw, 126px); font-weight: 700; line-height: .98; letter-spacing: -.06em; max-width: 1100px; margin-inline: auto; text-wrap: balance; overflow-wrap: normal; hyphens: none; }
.showcase-site .detail-hero__title br { display: none; }
.showcase-site .detail-hero__title em { display: block; }
.showcase-site .detail-hero__sub { font-size: 18px; max-width: 660px; margin: 32px auto; }
.showcase-site .detail-hero__ctas { justify-content: center; }
.showcase-site .detail-hero__visual { width: 100%; max-width: 1120px; height: 690px; aspect-ratio: auto; isolation: isolate; margin-top: 12px; }
.showcase-site .detail-hero__visual::before { content: ''; position: absolute; inset: 12% -10%; z-index: -1; background: var(--section-accent); opacity: .85; transform: skewY(-7deg); }
.showcase-site .detail-page[data-app="chat"] .detail-hero__visual::before { background: radial-gradient(ellipse, #b7cdf270, transparent 67%); transform: none; inset: -20%; }
.showcase-site .detail-page[data-app="musy"] .detail-hero__visual::before { background: repeating-linear-gradient(90deg, #fcfd6c 0 5px, transparent 5px 20px); mask-image: radial-gradient(ellipse, #000 10%, transparent 70%); }
.showcase-site .detail-page[data-app="plant"] .detail-hero__visual::before { inset: 0 18%; border-radius: 85% 0; background: repeating-linear-gradient(140deg, transparent 0 34px, #b9dc8940 35px 36px), #4b7740; transform: rotate(14deg); }
.showcase-site .detail-page[data-app="calorie"] .detail-hero__visual::before { inset: 0 20%; border-radius: 50%; background: conic-gradient(#ff8049 0 25%, #c8dc73 25% 66%, #ffd65c 66%); transform: none; }
.showcase-site .detail-page[data-app="neurobase"] .detail-hero__visual::before { inset: 8% 14%; border-radius: 80px; background: #c4b9f2; transform: rotate(-9deg); box-shadow: 40px 40px 0 #7961d530; }
.showcase-site .detail-shot--hero-phone-primary { position: absolute; width: 27%; max-width: 290px; top: 0; left: 22%; margin: 0; }
.showcase-site .detail-shot--hero-phone-secondary { display: block; width: 25%; max-width: 270px; bottom: 0; right: 22%; }
.showcase-site .detail-shot--hero-mac { position: absolute; inset: 30px auto auto 6%; width: 78%; transform: rotate(-3deg); }
.showcase-site .detail-shot--hero-phone { width: 20%; max-width: 220px; bottom: 0; right: 6%; }
.showcase-site .detail-trust { padding: 32px var(--pad-x) 48px; max-width: none; border-block: 1px solid var(--section-border); }
.showcase-site .detail-trust__models { max-width: 1240px; gap: 0; }
.showcase-site .detail-trust__models li { background: none; border: 0; border-radius: 0; border-inline-end: 1px solid var(--section-border); padding: 18px; }
.showcase-site .detail-trust__models li:last-child { border: 0; }
/* Alternating open spreads, with the copy held in place beside the product. */
.showcase-site .detail-feature { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; padding-block: var(--scene-space); gap: 7%; }
.showcase-site .detail-feature__copy { position: sticky; top: 120px; padding-block: 20px; }
.showcase-site .detail-feature__num { font-size: 14px; margin-bottom: 24px; display: block; }
.showcase-site .detail-feature__title { font-size: clamp(36px, 4.5vw, 66px); line-height: 1.03; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.showcase-site .detail-feature__visual { isolation: isolate; padding: 36px 20px; }
.showcase-site .detail-feature__visual::before { content: ''; position: absolute; z-index: -1; inset: 8% -4%; background: color-mix(in srgb, var(--section-accent) 12%, transparent); transform: rotate(-5deg); }
.showcase-site .detail-feature--reverse .detail-feature__visual::before { transform: rotate(5deg); }
.showcase-site .detail-feature__visual .detail-shot--phone { max-width: 285px; }
.showcase-site .detail-feature__visual--phones { gap: 24px; padding-bottom: 70px; }
.showcase-site .feature-panorama { grid-template-columns: 1fr; gap: 44px; }
.showcase-site .feature-panorama .detail-feature__copy { position: static; order: 0; max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 9%; }
.showcase-site .feature-panorama .detail-feature__num { grid-column: 1 / -1; }
.showcase-site .feature-panorama .detail-feature__title { grid-column: 1; grid-row: 2 / 4; font-size: clamp(42px, 5.5vw, 80px); }
.showcase-site .feature-panorama .detail-feature__visual { order: 1; padding: 60px 8%; }
.showcase-site .feature-panorama .detail-feature__visual::before { inset: 0; transform: none; }
.showcase-site .feature-panorama .detail-feature__visual--phones { display: flex; flex-direction: row; justify-content: center; gap: 8%; }
.showcase-site .feature-panorama .detail-feature__visual--phones .detail-shot { margin: 0; }
.showcase-site .feature-panorama .detail-feature__visual .detail-shot--mac { max-width: 850px; margin-inline: auto; }
.showcase-site .detail-final { padding: 120px var(--pad-x); background: var(--section-accent); color: var(--section-bg); }
.showcase-site .detail-final h2, .showcase-site .detail-final h2 em, .showcase-site .detail-final p { color: inherit; }
.showcase-site .detail-final h2 { font-size: clamp(50px, 7vw, 104px); line-height: 1; letter-spacing: -.05em; }
.showcase-site .faq__inner { max-width: var(--container); display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px 8%; }
.showcase-site .faq__inner > .eyebrow { grid-column: 1 / -1; }
.showcase-site .faq__title { text-align: start; font-size: clamp(40px, 5vw, 72px); line-height: 1.03; position: sticky; top: 120px; align-self: start; }
.showcase-site .faq__item { background: none; border-radius: 0; border-width: 0 0 1px; }
.showcase-site .faq__item summary, .showcase-site .faq__item p { padding-inline: 0; }
@media (max-width: 1023px) {
 .showcase-site .detail-feature { grid-template-columns: 1fr; gap: 32px; }
 .showcase-site .detail-feature__copy { position: static; max-width: 740px; }
 .showcase-site .detail-feature__visual { max-width: 740px; margin-inline: auto; }
 .showcase-site .detail-hero__visual { height: 580px; }
 .showcase-site .detail-shot--hero-phone-primary { width: 32%; left: 17%; }
 .showcase-site .detail-shot--hero-phone-secondary { width: 30%; right: 17%; }
 .showcase-site .showcase-stage { min-height: 580px; }
 .showcase-screen--phone { width: 33%; }
}
@media (max-width: 720px) {
 .showcase-site .app-section__inner { grid-template-columns: 1fr; gap: 28px; }
 .showcase-site .app-copy__lockup { grid-column: 1; margin: 0 0 12px; }
 .showcase-site .app-copy__lockup > div { display: block; }
 .showcase-site .app-copy__num { font-size: 25px; }
 .showcase-site .app-copy__title { grid-column: 1; grid-row: 2; font-size: clamp(44px, 10vw, 64px); }
 .showcase-site .app-copy__lead { grid-column: 1; grid-row: 3; font-size: 16px; }
 .showcase-site .showcase-stage { grid-column: 1; grid-row: 4; min-height: 460px; padding: 32px 0; gap: 8%; }
 .showcase-screen--phone { width: 38%; }
 .showcase-screen { border-radius: 18px; }
 .showcase-screen--wide { width: 89%; border-radius: 8px; }
 .showcase-screen--wide + .showcase-screen { width: 25%; right: 0; bottom: 20px; }
 .showcase-site .showcase-stage[data-stage="chat"] { min-height: 310px; }
 .showcase-stage[data-stage="musy"]::after { width: 290px; height: 290px; left: 0; }
 .showcase-stage[data-stage="neurobase"]::after { width: 230px; height: 230px; }
 .showcase-stage[data-stage="calorie"]::before { width: 360px; height: 360px; }
 .showcase-stage[data-stage="calorie"]::after { width: 420px; height: 420px; }
 .showcase-stage[data-stage="plant"]::before { width: 340px; height: 390px; }
 .showcase-stage[data-stage="plant"]::after { width: 360px; }
 .showcase-site .feature-list { grid-column: 1; grid-row: 5; }
 .showcase-site .app-copy__ctas { grid-column: 1; grid-row: 6; margin-top: 8px; }
 .showcase-site .app-copy__more { grid-column: 1; grid-row: 7; margin: -12px 0 0; }
 .showcase-site .detail-hero { padding-block: 32px 60px; }
 .showcase-site .detail-back { margin-bottom: 28px; }
 .showcase-site .detail-hero__title { font-size: clamp(44px, 10vw, 70px); letter-spacing: -.045em; }
 .showcase-site .detail-hero__sub { font-size: 16px; }
 .showcase-site .detail-hero__visual { height: 430px; }
 .showcase-site .detail-shot--hero-phone-primary { width: 42%; left: 6%; }
 .showcase-site .detail-shot--hero-phone-secondary { width: 39%; right: 6%; }
 .showcase-site .detail-page[data-app="chat"] .detail-hero__visual { height: 300px; }
 .showcase-site .detail-shot--hero-mac { width: 92%; left: 0; }
 .showcase-site .detail-shot--hero-phone { width: 27%; right: 0; }
 .showcase-site .detail-page[data-app="calorie"] .detail-hero__visual::before { inset: 5% -5%; }
 .showcase-site .detail-page[data-app="plant"] .detail-hero__visual::before { inset: 0 3%; }
 .showcase-site .detail-trust__models li { border: 0; padding: 16px 10px; }
 .showcase-site .feature-panorama .detail-feature__copy { display: block; }
 .showcase-site .detail-feature__visual--phones, .showcase-site .feature-panorama .detail-feature__visual--phones { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 30px 0 50px; }
 .showcase-site .detail-feature__visual--phones .detail-shot { width: calc(50% - 8px); min-width: 0; margin: 0; }
 .showcase-site .detail-feature__visual--phones .detail-shot:nth-child(2) { transform: translateY(22px); }
 .showcase-site .feature-panorama .detail-feature__visual { padding: 30px 16px; }
 .showcase-site .detail-final { padding-block: 80px; }
 .showcase-site .faq__inner { grid-template-columns: 1fr; }
 .showcase-site .faq__title { position: static; }
}
@media (prefers-reduced-motion:reduce) {
 .showcase-site .showcase-screen { transition: none; }
 .showcase-site .detail-shot { animation: none; }
}
/* Preserve intentional phrase breaks in the existing headings. */
.showcase-site .detail-hero__title br { display: initial; }
/* Decorative geometry stays inside the page without creating a scroll container. */
.showcase-site .detail-page { overflow-x: clip; }
.showcase-site .detail-final__contact, .showcase-site .detail-final__contact a { color: inherit; }
.showcase-site .detail-final__inner { max-width: 1050px; }
/* Devices float directly over the page; no colored backing panels. */
.showcase-site .detail-feature__visual::before,
.showcase-site .detail-page[data-app="neurobase"] .detail-hero__visual::before,
.showcase-site .showcase-stage[data-stage="neurobase"]::after { content: none; }
@media (min-width: 720px) {
 .showcase-site .detail-trust__models--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
 .showcase-site .detail-trust__models--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Match the visible globe size: the supplied PNGs have tighter transparent bounds. */
.showcase-site .detail-trust__models--six img[src$="claude.png"],
.showcase-site .detail-trust__models--six img[src$="kimi.png"] { transform: scale(.74); }
/* Let the animated worlds provide the hero backdrop without static overlays. */
.showcase-site .detail-page[data-app="plant"] .detail-hero__visual::before,
.showcase-site .detail-page[data-app="calorie"] .detail-hero__visual::before,
.showcase-site .detail-page[data-app="musy"] .detail-hero__visual::before { content: none; }