/* Client examples have their own art direction; Fork's interface stays native. */
.architecture-preview, .product-preview, .restaurant-preview { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: inline-size; font-family: Real, Arial, sans-serif; }
.architecture-preview { background: #30271e; color: #fff; }
.architecture-photo, .architecture-shade, .restaurant-photo, .restaurant-wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.architecture-photo, .restaurant-photo { object-fit: cover; }
.architecture-photo { object-position: 50% 64%; }
.architecture-shade { background: linear-gradient(180deg,#0f0a0640 0%,#0f0a062e 45%,#0f0a0600 75%,#0f0a066b 100%); }
.architecture-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 78px; padding-inline: 5cqw; }
.architecture-brand { color: #ffcf97; font-size: clamp(19px,3.2cqw,34px); font-weight: 600; letter-spacing: -.065em; white-space: nowrap; }
.architecture-brand > span { font-weight: 400; }
.architecture-links { display: flex; gap: 3cqw; font-size: clamp(8px,1.05cqw,12px); color: #f4f0eb; }
.architecture-nav-cta { font-size: clamp(8px,1.05cqw,12px); padding: 11px 16px; background: #fff; color: #202020; white-space: nowrap; }
.architecture-content { position: absolute; top: 23%; left: 6%; width: 86%; z-index: 1; transform-origin: left top; transition: transform 460ms cubic-bezier(.32,.72,0,1); }
.architecture-headline-stage { height: 2.35em; font-size: clamp(30px,7.5cqw,88px); }
.architecture-headline { font-family: Real,Arial,sans-serif; font-size: inherit; font-weight: 500; line-height: 1.04; letter-spacing: -.062em; margin: 0; }
.architecture-headline > span { display: block; }
.architecture-headline > span:last-child { color: #ffce98; }
.architecture-headline.is-updated { animation: mockup-headline-in 350ms var(--ease) both; }
.architecture-content > p { margin: 20px 0 0; font-size: clamp(10px,1.35cqw,15px); line-height: 1.55; color: #f4f0e9; }
.architecture-cta { display: inline-flex; align-items: center; gap: 35px; padding: 13px 19px; margin-top: 24px; border: 1px solid #ffffff8a; background: #ffffff08; color: #fff; font: 400 clamp(9px,1.2cqw,13px)/1.3 Real,Arial,sans-serif; border-radius: 0; }
.architecture-caption { position: absolute; inset: auto 5% 27px; display: flex; justify-content: space-between; gap: 12px; color: #f7f4ee; font-size: clamp(7px,.9cqw,10px); }
.fork-hero-demo .client-site { height: 620px; min-height: 620px; }
.fork-hero-demo .is-chat-open .architecture-content { transform: scale(.77); }
.fork-hero-demo .is-chat-open .architecture-links { opacity: 0; }
.fork-hero-demo .site-update { bottom: 60px; }
.fork-hero-demo.is-paused:not(.is-manual) .architecture-headline { animation-play-state: paused; }
.wf-finished-site .architecture-content { top: 23%; left: 7%; width: 86%; }
.wf-finished-site .architecture-nav { height: 64px; gap: 8px; }
.wf-finished-site .architecture-links { display: none; }
.wf-finished-site .architecture-brand { font-size: clamp(16px,5.8cqw,28px); }
.wf-finished-site .architecture-nav-cta { padding: 7px 9px; font-size: 7px; }
.wf-finished-site .architecture-headline-stage { font-size: clamp(12px,9.2cqw,58px); height: 2.6em; }
.wf-finished-site .architecture-content > p { font-size: clamp(8px,2.5cqw,12px); margin-top: 16px; }
.wf-finished-site .architecture-cta { padding: 10px 12px; gap: 15px; font-size: clamp(7px,2cqw,10px); }
.wf-finished-site .architecture-caption { bottom: 24px; font-size: 7px; }
.wf-finished-site .architecture-caption > span:last-child { display: none; }
@container (max-width: 180px) {
  .wf-finished-site .architecture-nav-cta { display: none; }
  .wf-finished-site .architecture-cta { padding: 8px; gap: 8px; font-size: 6px; }
}

/* A product launch with a real product shot and bold, editable typography. */
.agency-section > .agency-animation-scene { background: #f4f5ef; }
.agency-demo-stage { background: #f4f5ef; }
.agency-demo .agency-client-site { background: #fcfff6; }
.agency-demo .agency-demo-chat { width: 60%; max-width: none; }
.agency-demo.is-open .agency-client-site { width: 40%; transform: none; }
.agency-demo.is-open .product-nav { height: 60px; padding-inline: 8%; }
.agency-demo.is-open .product-nav-links, .agency-demo.is-open .product-nav-cta { display: none; }
.agency-demo.is-open .product-content { top: 19%; left: 8%; width: 84%; }
.agency-demo.is-open .product-headline-stage { font-size: clamp(17px,10cqw,27px); height: 3.1em; }
.agency-demo.is-open .product-content > p { font-size: 8px; margin-top: 12px; }
.agency-demo.is-open .product-cta { padding: 10px 12px; font-size: 8px; margin-top: 15px; gap: 12px; }
.agency-demo.is-open .product-can { top: 53%; right: 0; width: 100%; height: 38%; }
.agency-demo.is-open .product-footer { font-size: 5px; bottom: 17px; gap: 4px; padding-top: 10px; }
.product-preview { background: #fcfff6; color: #10120e; }
.product-nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 72px; padding: 0 5cqw; }
.product-brand { font: 900 italic clamp(19px,5.7cqw,35px)/1 Arial,sans-serif; letter-spacing: -.07em; }
.product-brand > span { display: inline-block; vertical-align: top; margin: 2px 0 0 3px; font-size: 8px; font-weight: 400; font-style: normal; letter-spacing: 0; }
.product-nav-links { display: flex; gap: 3cqw; font-size: clamp(6px,1.55cqw,10px); white-space: nowrap; }
.product-nav-cta { padding: 9px 12px; border-radius: 30px; background: #c3fa67; font-size: clamp(7px,1.6cqw,10px); font-weight: 600; white-space: nowrap; }
.product-content { position: absolute; z-index: 2; top: 27%; left: 6%; width: 56%; }
.product-headline-stage { height: 3em; font-size: clamp(28px,8.5cqw,60px); }
.product-headline-stage > h3 { margin: 0; font: 900 1em/.96 Arial,sans-serif; letter-spacing: -.06em; text-transform: uppercase; animation: mockup-headline-in 300ms var(--ease) both; }
.product-headline-stage > h3 > span { display: block; }
.product-headline-stage > h3 > span:last-child { color: #6bb700; }
.product-content > p { margin-top: 8px; font-family: 'Courier New',monospace; font-size: clamp(9px,2cqw,13px); line-height: 1.55; color: #606657; }
.product-cta { display: inline-flex; gap: 17px; margin-top: 23px; padding: 13px 17px; border-radius: 30px; background: #b9f932; color: #111; font-size: clamp(8px,1.9cqw,12px); font-weight: 600; white-space: nowrap; }
.product-can { position: absolute; z-index: 1; right: -6%; top: 12%; height: 80%; width: 60%; object-fit: contain; filter: drop-shadow(0 17px 16px #29380022); }
.product-footer { position: absolute; z-index: 2; inset: auto 6% 24px; display: flex; justify-content: space-between; gap: 10px; padding-top: 15px; border-top: 1px solid #d9e2ca; font: 400 clamp(6px,1.5cqw,10px)/1.2 'Courier New',monospace; color: #6c735e; }

/* The imported page is fully designed. Only the layer behind it is a wireframe. */
#restaurant-mockup-root { flex: 1; min-height: 0; }
.restaurant-preview { background: #f3eee7; color: #231e19; }
.restaurant-photo { object-position: 68% center; }
.restaurant-wash { background: linear-gradient(90deg,#f6f2eada 0%,#f6f2eaa3 40%,#f6f2ea0d 77%),linear-gradient(0deg,#f6f2eaee 0%,#f6f2ea00 38%); }
.restaurant-nav { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 12cqw; padding-inline: 5cqw; }
.restaurant-nav > span:first-child { font: 400 3.4cqw/1 Georgia,serif; letter-spacing: .2em; }
.restaurant-nav > span:nth-child(2) { display: flex; gap: 3cqw; font-size: 1.45cqw; }
.restaurant-reserve { padding: 1.9cqw 2.7cqw; background: #171411; color: #fff; font-size: 1.55cqw; }
.restaurant-content { position: absolute; top: 23%; left: 6%; z-index: 1; }
.restaurant-content > h3 { font: 400 9.4cqw/.95 Georgia,'Times New Roman',serif; letter-spacing: -.065em; margin: 0; }
.restaurant-content > h3 > em { color: #a9542b; font-weight: 400; }
.restaurant-content > p { margin-top: 3.4cqw; font: 400 1.8cqw/1.65 Real,Arial,sans-serif; color: #645b50; }
.restaurant-cta { display: inline-flex; gap: 3cqw; padding: 2cqw 2.4cqw; margin-top: 3.4cqw; background: #191612; color: #fff; font: 400 1.6cqw/1.2 Real,Arial,sans-serif; }
.restaurant-caption { position: absolute; inset: auto 6% 5%; z-index: 1; display: flex; justify-content: space-between; font-size: 1.4cqw; letter-spacing: .04em; color: #675d51; }

.lead-audit-thumbnail { position: relative; width: 112px; height: 70px; flex: none; overflow: hidden; border-radius: 5px; background: #30271e; }
.lead-audit-site .lead-audit-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.lead-audit-thumbnail > span { position: absolute; top: 19%; left: 8%; color: #fff; font: 500 10px/1.1 Real,Arial,sans-serif; letter-spacing: -.04em; }

@keyframes mockup-headline-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 679px) {
  .agency-demo .agency-demo-chat { width: 78%; }
  .agency-demo.is-open .agency-client-site { width: 100%; transform: scale(.66); }
  .agency-demo.is-open .product-content { top: 19%; width: 84%; }
  .agency-demo.is-open .product-headline-stage { font-size: clamp(17px,7cqw,27px); }
  .architecture-nav { height: 65px; gap: 9px; }
  .architecture-links { display: none; }
  .architecture-nav-cta { padding: 8px 10px; }
  .architecture-content { top: 24%; }
  .architecture-headline-stage { font-size: clamp(31px,8.6cqw,55px); height: 2.65em; }
  .architecture-content > p { font-size: 11px; }
  .architecture-cta { font-size: 10px; gap: 20px; }
  .architecture-caption > span:last-child { display: none; }
  .fork-hero-demo .is-chat-open .architecture-content { transform: none; }
  .product-nav-links { display: none; }
  .product-content { top: 28%; }
  .product-headline-stage { font-size: clamp(27px,9cqw,43px); }
  .product-content > p { font-size: 10px; }
  .product-can { right: -8%; top: 21%; height: 66%; width: 61%; }
  .product-cta { padding: 11px 12px; font-size: 9px; gap: 9px; }
  .lead-audit-thumbnail { width: 88px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .architecture-content, .architecture-headline, .product-headline-stage > h3 { animation: none !important; transition: none !important; }
}