/* Standalone working scenes, following the One canvas section. */
.feature-showcase {
  padding: 74px 0 100px;
  color: var(--paper);
  background: #12131a;
}
.feature-showcase::before { display: none; }
.feature-showcase-head { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 52px; }
.feature-showcase-head .eyebrow { margin-bottom: 20px; color: #a9a7b7; }
.feature-showcase-head .display { font-family: Garet, Arial, sans-serif; font-size: clamp(38px, 4.3vw, 64px); line-height: 1.04; letter-spacing: -.07em; }
.feature-showcase-head > .sub { max-width: 390px; color: #b8bbc7; font-family: Inter, Arial, sans-serif; font-size: 17px; line-height: 1.65; }
.feature-showcase .studio-features {
  position: relative; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px; padding-top: 64px;
}
.feature-showcase .studio-feature { min-width: 0; padding: 0; border: 0; }
.feature-showcase .studio-feature .feature-top { align-items: baseline; gap: 14px; margin-top: 27px; }
.feature-showcase .studio-feature h3 { font-size: clamp(18px, 1.55vw, 23px); font-weight: 500; letter-spacing: -.025em; }
.feature-showcase .studio-feature .n { color: #777b8b; font-size: 11px; }
.feature-showcase .studio-feature p { color: #b8bbc7; max-width: 370px; margin-top: 10px; line-height: 1.7; }
.feature-demo {
  container-type: inline-size; position: relative; aspect-ratio: 1.425;
  overflow: hidden; isolation: isolate; border: 0; border-radius: var(--radius-surface);
  color: #f4f3f8; font-family: Inter, Arial, sans-serif; letter-spacing: 0;
}
.demo-scene { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.editor-demo { background: #292334; }
.component-demo { background: #242c30; }
.collaboration-demo { --collab-surface: #24283f; background: var(--collab-surface); }
.demo-chrome {
  position: absolute; inset: 7% 7.5% auto; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; color: #a9a7b7;
  font: 400 clamp(9px, 2.4cqw, 11px)/1.2 Inter, Arial, sans-serif;
}
.demo-chrome > span:last-child { color: #858895; font-size: .9em; }
.demo-caption {
  position: absolute; inset: auto 7.5% 6.5%; display: flex; align-items: center; gap: 7px;
  font: 400 clamp(9px, 2.45cqw, 11px)/1.2 Inter, Arial, sans-serif; color: #aba8b8;
}
.demo-status-dot { width: 4px; height: 4px; border-radius: 50%; background: #9ea19c; flex: 0 0 auto; }
.demo-pointer {
  width: 6cqw; height: 7cqw; fill: #fff; stroke: #151821; stroke-width: 1.5;
  filter: drop-shadow(0 2px 3px #0005); overflow: visible;
}
.editor-demo-pointer, .component-demo-pointer {
  position: absolute; z-index: 7; transition: left .75s var(--ease), top .75s var(--ease), opacity .4s;
}
.demo-selection, .component-selection {
  position: absolute; inset: -3px; border: 1px solid #6296ff; border-radius: 0; opacity: 0;
  transition: opacity .25s; pointer-events: none;
}
.demo-selection i, .component-selection i, .component-name-field > i {
  position: absolute; width: 5px; height: 5px; background: #fff; border: 1px solid #6296ff;
}
.demo-selection i:nth-child(1), .component-selection i:nth-child(1), .component-name-field > i:nth-of-type(1) { left: -3px; top: -3px; }
.demo-selection i:nth-child(2), .component-selection i:nth-child(2), .component-name-field > i:nth-of-type(2) { right: -3px; top: -3px; }
.demo-selection i:nth-child(3), .component-selection i:nth-child(3), .component-name-field > i:nth-of-type(3) { left: -3px; bottom: -3px; }
.demo-selection i:nth-child(4), .component-selection i:nth-child(4), .component-name-field > i:nth-of-type(4) { right: -3px; bottom: -3px; }

/* Draw a shape, pick the text tool, then write on the glass. */
.editor-demo-toolbar {
  position: absolute; z-index: 3; top: 14%; left: 17%; width: 66%; height: 17%;
  display: flex; gap: 3px; align-items: center; padding: 5px;
  border: 1px solid #ffffff18; border-radius: 12px;
  background: #121119c9; box-shadow: 0 8px 18px #09061126;
}
.demo-tool {
  display: grid; place-items: center; flex: 1; height: 100%; border-radius: 8px;
  color: #b9b5c5; transition: background .25s, color .25s, box-shadow .25s;
}
.demo-tool svg { width: 4.6cqw; height: 4.6cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-tool="pointer"] .tool-pointer, [data-tool="shape"] .tool-shape, [data-tool="text"] .tool-type {
  color: #20202a; background: #f8f7fc; box-shadow: 0 1px 5px #0002;
}
.editor-demo-canvas {
  position: absolute; left: 8%; top: 37%; width: 84%; height: 49%;
  --glass-rib: 5.5556%;
  overflow: hidden; isolation: isolate; border-radius: 10px;
  background:
    radial-gradient(ellipse at 78% 52%, #ff4949 0%, #f52b4866 34%, #f52b4800 65%),
    radial-gradient(ellipse at 12% 43%, #fb354b 0%, #fb354b00 57%),
    linear-gradient(180deg, #064a78 0%, #153954 24%, #541944 51%, #090c35 82%, #030721 100%);
  box-shadow: inset 0 1px 0 #ffffff26, 0 14px 24px #120c1f26;
}
/* Narrow highlights and shaded facets refract the red glow through blue glass. */
.editor-demo-canvas::before, .editor-demo-canvas::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-size: var(--glass-rib) 100%; background-repeat: repeat-x;
}
.editor-demo-canvas::before {
  z-index: 0;
  background-image: linear-gradient(90deg,
    #02092770 0%, #02092720 5%, #d9edff40 10%, #d9edff12 20%,
    #ffffff00 42%, #02051e26 72%, #02051e85 100%);
  mask-image: linear-gradient(180deg, #0004, #000 27%, #000 73%, #0000);
}
.editor-demo-canvas::after {
  z-index: 1;
  background-image: radial-gradient(ellipse at 9% 53%, #ffad8680 0%, #ff55434d 26%, #ff554300 65%);
  mix-blend-mode: screen;
}
.editor-glass-button {
  position: absolute; z-index: 2; left: 23%; top: 34%; width: 54%; height: 32%;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  border-radius: 100px; border: 1px solid #ffffffa3;
  background: linear-gradient(160deg, #ffffff52, #ffffff12); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 1px #fff8, inset 0 -1px 1px #ffffff30, 0 10px 22px #42215c24;
  color: #fff; font-size: clamp(11px, 3.3cqw, 15px); font-weight: 500; white-space: nowrap;
  transform-origin: left top; transition: transform 1s var(--ease), opacity .5s;
}
.editor-button-arrow { width: 3.6cqw; height: 3.6cqw; fill: none; stroke: currentColor; stroke-width: 1.5; display: none; }
.editor-canvas-mark { position: absolute; bottom: 8%; left: 7%; color: #fff9; font-size: clamp(7px, 1.8cqw, 9px); letter-spacing: .12em; }
.editor-demo-pointer { left: 78%; top: 76%; }
[data-editor-phase="idle"] .editor-glass-button, [data-editor-phase="shape-tool"] .editor-glass-button,
[data-editor-phase="draw-start"] .editor-glass-button { opacity: 0; transform: scale(.04, .08); }
[data-editor-phase="reset"] .editor-glass-button { opacity: 0; }
[data-editor-phase="idle"] .editor-demo-pointer { left: 23%; top: 24%; }
[data-editor-phase="shape-tool"] .editor-demo-pointer { left: 74%; top: 24%; }
[data-editor-phase="draw-start"] .editor-demo-pointer { left: 28%; top: 53%; }
[data-editor-phase="drawing"] .editor-demo-pointer { left: 74%; top: 68%; transition-duration: 1s; }
[data-editor-phase="text-tool"] .editor-demo-pointer { left: 50%; top: 24%; }
[data-editor-phase="typing"] .editor-demo-pointer { left: 56%; top: 62%; opacity: 0; }
[data-editor-phase="drawing"] .demo-selection, [data-editor-phase="text-tool"] .demo-selection,
[data-editor-phase="typing"] .demo-selection { opacity: 1; }
[data-editor-phase="typing"] [data-editor-label]::after {
  content: ''; display: inline-block; height: 1em; border-right: 1px solid white;
  margin-left: 2px; vertical-align: -.13em;
}
[data-editor-phase="done"] .editor-button-arrow { display: block; }
[data-editor-phase="done"] .demo-status-dot { background: #b7deb9; }

/* A testimonial instance: select its profile row, then edit the name. */
.component-template { position: absolute; inset: 0; }
.component-quote {
  position: absolute; top: 21%; left: 14%; right: 9%; margin: 0; padding-left: 5.2cqw;
  color: #f0f0f2; font: 400 clamp(14px, 4.8cqw, 24px)/1.4 Inter, Arial, sans-serif;
  letter-spacing: -.015em;
}
.component-quote::before {
  content: ''; position: absolute; left: 0; top: .04em; bottom: .04em;
  width: clamp(3px, .85cqw, 5px); border-radius: 3px; background: #ff536f;
}
.component-person {
  position: absolute; top: 49%; left: 12%; right: 9%; height: 26%;
  display: flex; align-items: center; gap: 3.4cqw; padding: 1.8cqw;
}
.component-avatar { width: 12cqw; height: 12cqw; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: #06596e; }
.component-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.component-person-copy { min-width: 0; }
.component-name-field {
  position: relative; width: max-content; min-width: 1ch; max-width: 100%;
  padding: 1px 3px; margin-left: -4px; border: 1px solid transparent;
  color: #fff; font-size: clamp(13px, 4.2cqw, 20px); font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.component-name-field > i { opacity: 0; }
.component-company { display: block; margin-top: .5cqw; color: #c1c5c9; font-size: clamp(11px, 3.6cqw, 17px); line-height: 1.4; white-space: nowrap; }
.component-caret { display: none; border-right: 1px solid #ecf1ff; height: 1em; margin-left: 1px; vertical-align: -.12em; }
.component-selection { inset: 0; border-color: #4a88ff; }
.component-selection i { border-color: #4a88ff; }
.component-demo-pointer { left: 84%; top: 80%; }
[data-component-phase="insert"] .component-selection,
[data-component-phase="done"] .component-selection { opacity: 1; }
[data-component-phase="select"] .component-demo-pointer { left: 57%; top: 59%; }
[data-component-phase="select"] .component-name-field { border-color: #6296ff; }
[data-component-phase="select"] [data-component-name] { background: #4486ed80; }
[data-component-phase="select"] .component-name-field > i,
[data-component-phase="typing"] .component-name-field > i { opacity: 1; }
[data-component-phase="typing"] .component-name-field { border-color: #6296ff; }
[data-component-phase="typing"] .component-caret { display: inline-block; }
[data-component-phase="typing"] .component-demo-pointer { left: 67%; top: 60%; opacity: 0; }

/* Multiplayer: one shared design with three teammates' live cursors. Sarah
   selects the headline, Robert pins a comment, Sarah replies and the post is
   approved. Phases come from feature-demos.js (data-collab-phase); the cursor
   colours are the hero's (Sarah purple, Robert yellow). */
.collaboration-demo { --sarah: #7755df; --robert: #f0c343; --jane: #22b8a6; }
.mp-top {
  position: absolute; inset: 5.5% 5.5% auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mp-file {
  display: flex; align-items: center; gap: 1.8cqw; min-width: 0; overflow: hidden; white-space: nowrap;
  color: #c9c6d6; font: 500 clamp(9px, 2.5cqw, 11px)/1.2 Inter, Arial, sans-serif;
}
.mp-file i {
  flex: none; width: 1.7cqw; height: 1.7cqw; min-width: 6px; min-height: 6px; border-radius: 50%;
  background: #35d888; box-shadow: 0 0 0 .9cqw #35d88824;
}
.mp-pile { display: flex; align-items: center; flex: none; padding-left: 1.6cqw; }
.mp-pile img, .mp-pile b {
  width: 6.4cqw; height: 6.4cqw; min-width: 20px; min-height: 20px; margin-left: -1.6cqw; border-radius: 50%;
  border: 2px solid var(--collab-surface); object-fit: cover; box-shadow: 0 0 0 1.5px var(--ring, #3a3f5c);
}
.mp-pile [data-who="sarah"] { --ring: var(--sarah); }
.mp-pile [data-who="robert"] { --ring: var(--robert); }
.mp-pile [data-who="jane"] { --ring: var(--jane); }
.mp-pile b {
  /* fill, a gap, then a ring — drawn like the photos beside it so all four read the same size */
  --ring: #5a5f7d; display: grid; place-items: center; background: #3a3f5c; color: #e4e2ee;
  font: 600 clamp(7px, 1.9cqw, 9px)/1 Inter, Arial, sans-serif;
}
/* the design everyone is in */
.mp-frame {
  position: absolute; left: 21.6%; top: 21%; height: 70%; aspect-ratio: 3 / 4;
  box-shadow: 0 1.6cqw 4.4cqw #04061466;
}
.mp-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-select {
  position: absolute; left: 4%; top: 23%; width: 44%; height: 27%;
  border: 1.5px solid var(--sarah); opacity: 0; transition: opacity .25s;
}
.mp-select i { position: absolute; width: 5px; height: 5px; background: #fff; border: 1px solid var(--sarah); }
.mp-select i:nth-child(1) { left: -3.5px; top: -3.5px; } .mp-select i:nth-child(2) { right: -3.5px; top: -3.5px; }
.mp-select i:nth-child(3) { left: -3.5px; bottom: -3.5px; } .mp-select i:nth-child(4) { right: -3.5px; bottom: -3.5px; }
/* a comment pinned to the photo: the commenter's face in a teardrop */
.mp-pin {
  position: absolute; left: 70%; top: 34%; width: 7.4cqw; min-width: 24px; aspect-ratio: 1; padding: 2px;
  border-radius: 50% 50% 50% 0; background: var(--robert); box-shadow: 0 .8cqw 2cqw #0006;
  transform: translateY(-100%) scale(.3); transform-origin: 0 100%; opacity: 0;
  transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.mp-pin img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mp-approved {
  position: absolute; left: 4%; top: 4%; display: flex; align-items: center; gap: .8cqw;
  padding: .9cqw 1.9cqw .9cqw 1.3cqw; border-radius: 99px; background: #35d888; color: #0b2b1b;
  font: 600 clamp(8px, 2.2cqw, 10px)/1 Inter, Arial, sans-serif; box-shadow: 0 .6cqw 1.6cqw #0005;
  opacity: 0; transform: translateY(-4px) scale(.9); transition: opacity .3s, transform .4s var(--ease);
}
.mp-approved svg { width: 2.4cqw; min-width: 9px; height: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* the comment thread beside the frame */
.mp-thread { position: absolute; left: 61.5%; top: 56%; width: 35.5%; display: grid; gap: 1.8cqw; transform: translateY(-50%); }
.mp-msg {
  display: flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw; border-radius: 2.4cqw;
  background: #30344d; border: 1px solid #ffffff14; box-shadow: 0 1.6cqw 4cqw #06091b40; color: #f3f1fa;
  opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .4s, transform .5s var(--ease);
}
.mp-msg img { flex: none; width: 5.6cqw; height: 5.6cqw; min-width: 18px; min-height: 18px; border-radius: 50%; object-fit: cover; }
.mp-msg > span { min-width: 0; }
.mp-msg b { display: block; margin-bottom: .4cqw; font: 600 clamp(7px, 2.2cqw, 10px)/1.3 Inter, Arial, sans-serif; }
.mp-msg-robert b { color: var(--robert); }
.mp-msg-sarah b { color: #b9a6ff; }
.mp-text { display: block; white-space: nowrap; font: 400 clamp(7px, 2.3cqw, 10.5px)/1.35 Inter, Arial, sans-serif; }
/* a narrow card keeps each message on its one line by dropping the bubble avatars */
@container (max-width: 330px) { .mp-msg img { display: none; } }
.mp-dots { display: none; gap: .8cqw; padding-top: .6cqw; }
.mp-dots i { width: 1.3cqw; height: 1.3cqw; min-width: 4px; min-height: 4px; border-radius: 50%; background: #fff; animation: mp-type 1.2s ease-in-out infinite; }
.mp-dots i:nth-child(2) { animation-delay: .16s; }
.mp-dots i:nth-child(3) { animation-delay: .32s; }
/* live cursors, each with its name, gliding to where its owner is working */
.mp-cursor {
  position: absolute; z-index: 6; left: 50%; top: 50%; pointer-events: none;
  transition: left 1.1s var(--ease), top 1.1s var(--ease);
}
.mp-cursor > span { display: block; animation: mp-wander 6s ease-in-out infinite; }
.mp-cursor[data-who="robert"] > span { animation-duration: 7s; animation-delay: -2s; }
.mp-cursor[data-who="jane"] > span { animation-duration: 8s; animation-delay: -4s; }
.mp-cursor svg {
  display: block; width: 4.2cqw; min-width: 15px; height: auto; fill: var(--c); stroke: #fff; stroke-width: 1.5;
  stroke-linejoin: round; filter: drop-shadow(0 2px 3px #0006);
}
.mp-cursor b {
  display: block; width: max-content; margin: -.6cqw 0 0 2.8cqw; padding: .7cqw 1.7cqw;
  border-radius: 0 1.6cqw 1.6cqw 1.6cqw; background: var(--c); color: #fff;
  font: 600 clamp(8px, 2.2cqw, 10px)/1.2 Inter, Arial, sans-serif;
}
.mp-cursor[data-who="sarah"] { --c: var(--sarah); left: 12%; top: 72%; }
.mp-cursor[data-who="robert"] { --c: var(--robert); left: 66%; top: 24%; }
.mp-cursor[data-who="robert"] b { color: #2a2205; }
.mp-cursor[data-who="jane"] { --c: var(--jane); left: 46%; top: 79%; }
[data-collab-phase="editing"] .mp-cursor[data-who="sarah"] { left: 38.5%; top: 55%; }
[data-collab-phase="editing"] .mp-cursor[data-who="robert"] { left: 82%; top: 50%; }
[data-collab-phase="editing"] .mp-cursor[data-who="jane"] { left: 12%; top: 36%; }
[data-collab-phase="typing"] .mp-cursor[data-who="sarah"] { left: 35%; top: 68%; }
[data-collab-phase="typing"] .mp-cursor[data-who="robert"] { left: 49%; top: 42%; }
[data-collab-phase="typing"] .mp-cursor[data-who="jane"] { left: 28%; top: 80%; }
[data-collab-phase="comment"] .mp-cursor[data-who="sarah"] { left: 33%; top: 72%; }
[data-collab-phase="comment"] .mp-cursor[data-who="robert"] { left: 53%; top: 47%; }
[data-collab-phase="comment"] .mp-cursor[data-who="jane"] { left: 66%; top: 79%; }
[data-collab-phase="approved"] .mp-cursor[data-who="sarah"] { left: 70%; top: 72%; }
[data-collab-phase="approved"] .mp-cursor[data-who="robert"] { left: 60%; top: 12%; }
[data-collab-phase="approved"] .mp-cursor[data-who="jane"] { left: 50%; top: 79%; }
/* what each phase shows */
[data-collab-phase="editing"] .mp-select { opacity: 1; }
:is([data-collab-phase="typing"], [data-collab-phase="comment"], [data-collab-phase="approved"]) .mp-pin { opacity: 1; transform: translateY(-100%) scale(1); }
:is([data-collab-phase="typing"], [data-collab-phase="comment"], [data-collab-phase="approved"]) .mp-msg-robert,
[data-collab-phase="approved"] .mp-msg-sarah { opacity: 1; transform: none; }
[data-collab-phase="typing"] .mp-msg-robert .mp-dots { display: flex; }
[data-collab-phase="typing"] .mp-msg-robert .mp-text { display: none; }
[data-collab-phase="approved"] .mp-approved { opacity: 1; transform: none; }
@keyframes mp-wander {
  0%, 100% { translate: 0 0; }
  33% { translate: 1.2cqw -.8cqw; }
  66% { translate: -.6cqw .9cqw; }
}
@keyframes mp-type {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-.8cqw); opacity: 1; }
}

[data-motion="paused"] .feature-demo *, [data-motion="paused"] .feature-demo *::before,
[data-motion="paused"] .feature-demo *::after { transition: none !important; animation-play-state: paused !important; }

@media (max-width: 1050px) and (min-width: 801px) {
  .feature-showcase .studio-features { gap: 18px; }
  .feature-showcase .studio-feature h3 { font-size: 17px; }
  .feature-showcase .studio-feature p { font-size: 14px; }
  .demo-tool svg { width: 16px; height: 16px; }
}
@media (max-width: 800px) {
  .feature-showcase { padding: 58px 0 104px; }
  .feature-showcase-head { display: block; margin-bottom: 38px; }
  .feature-showcase-head .display { font-size: 40px; }
  .feature-showcase-head > .sub { margin-top: 22px; max-width: 340px; font-size: 16px; }
  .feature-showcase .studio-features { grid-template-columns: 1fr; gap: 40px; max-width: 480px; margin-inline: auto; padding-top: 62px; }
  .feature-showcase .studio-feature .feature-top { margin-top: 22px; }
  .feature-showcase .studio-feature h3 { font-size: 22px; }
  .feature-showcase .studio-feature p { font-size: 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-demo *, .feature-demo *::after { transition: none !important; animation: none !important; }
}