/* Static examples frame the invitation; the central composer stays interactive. */
.booking-previews { --preview-positive:#38856d; --preview-warning:#b17127; --preview-removed:#996e36; --preview-top:clamp(12px,1.8svh,20px); --preview-bottom:clamp(56px,10svh,104px); position: absolute; inset: 0; pointer-events: none; user-select: none; }
.build-preview { position: absolute; width: 234px; padding: 16px; border: 1px solid var(--build-line); border-radius: 15px; background: var(--build-surface); color: var(--ink); box-shadow: 0 6px 0 -1px color-mix(in srgb,var(--build-line) 75%,var(--build-surface)),0 22px 38px -15px color-mix(in srgb,var(--ink) 18%,transparent); font-size: 10px; text-align: left; }
/* Two aligned pairs frame the headline and the upper form, clear of the CTA. */
.preview-reorder { left: 4px; top:var(--preview-top); transform: rotate(-7deg) scale(.92); transform-origin:top left; }
.preview-ads { right: 5px; top:var(--preview-top); transform: rotate(8deg) scale(.92); transform-origin:top right; }
.preview-listing { left: 30px; bottom:var(--preview-bottom); transform: rotate(5deg) scale(.92); transform-origin:bottom left; }
.preview-keywords { right: 30px; bottom:var(--preview-bottom); transform: rotate(-6deg) scale(.92); transform-origin:bottom right; }
.preview-title { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.preview-app-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: color-mix(in srgb,var(--blue) 8%,var(--build-surface)); color: var(--blue); }
.preview-app-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.preview-menu { margin-left: auto; color: var(--quiet); }
.preview-table-labels,.preview-chart-labels { display: flex; justify-content: space-between; color: var(--quiet); font-size: 8px; }
.preview-table-labels { padding: 0 0 9px; border-bottom: 1px solid var(--build-line); }
.preview-stock-row { display: flex; align-items: center; gap: 7px; min-height: 48px; border-bottom: 1px solid var(--build-line); font-size: 8px; }
.preview-stock-row>svg { width: 25px; height: 30px; flex: none; }
.preview-stock-row small { display: block; margin-top: 4px; font-size: 7px; color: var(--quiet); }
.preview-stock-row b { margin-left: auto; font-weight: 500; color: var(--preview-positive); white-space: nowrap; }
.preview-stock-row b.stock-low { color: var(--preview-warning); }
.preview-footnote { display: flex; align-items: center; gap: 5px; margin-top: 13px; color: var(--quiet); font-size: 8px; }
.preview-dot { width: 5px; height: 5px; border-radius: 50%; background: #55947b; }
.preview-metric>span { display: block; color: var(--quiet); font-size: 9px; }
.preview-metric strong { display: inline-block; margin-top: 7px; font-size: 33px; line-height: 1.2; font-weight: 500; letter-spacing: -.045em; }
.preview-metric strong small { font-size: 20px; }
.preview-metric em { display: block; margin-top: 3px; font-size: 8px; font-style: normal; color: var(--preview-positive); }
.preview-ad-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; margin: 15px 0 9px; }
.preview-ad-bars i { flex: 1; height: 95%; background: color-mix(in srgb,var(--blue) 40%,var(--build-surface)); border-radius: 3px 3px 0 0; }
.preview-ad-bars i:nth-child(2n) { height: 84%; }.preview-ad-bars i:nth-child(3n) { height: 75%; }.preview-ad-bars i:nth-child(4n) { height: 65%; }.preview-ad-bars i:nth-child(n+7) { height: 55%; background: var(--blue); }.preview-ad-bars i:nth-child(n+9) { height: 40%; }.preview-ad-bars i:last-child { height: 32%; }
.preview-listing-product { display: flex; align-items: center; gap: 7px; margin: 0 0 15px; }
.preview-listing-product>svg { width: 35px; height: 35px; padding: 3px; border-radius: 7px; background: var(--build-page); }
.preview-listing-product strong { display: block; font-weight: 500; font-size: 9px; }
.preview-listing-product small { display: block; margin-top: 4px; font-size: 7px; color: var(--quiet); }
.preview-listing-product>span { margin-left: auto; color: var(--quiet); font-size: 8px; }
.preview-copy-change { display: flex; gap: 7px; padding: 8px; border-radius: 5px; background: color-mix(in srgb,#d79b51 9%,var(--build-surface)); color: var(--preview-removed); }
#join .preview-copy-change p { margin: 0!important; color: inherit; font: 400 9px/1.5 Montserrat,sans-serif!important; }
.preview-copy-change.is-new { margin-top: 5px; background: color-mix(in srgb,#38856d 9%,var(--build-surface)); color: var(--preview-positive); }
.preview-keyword { font-size: 10px; color: var(--body); }
.preview-rank { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.preview-rank strong { font-size: 36px; font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.preview-rank strong small { font-size: 20px; color: var(--quiet); }
.preview-rank span { color: var(--preview-positive); font-size: 9px; }
.preview-rank-chart { display: block; width: 100%; height: 64px; margin: 14px 0 8px; overflow: visible; }
.preview-chart-grid { fill: none; stroke: var(--build-line); stroke-width: .6; }
.preview-chart-fill { fill: color-mix(in srgb,var(--blue) 6%,transparent); }
.preview-chart-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .booking-previews { --preview-positive:#83d2b5; --preview-warning:#e5b678; --preview-removed:#ddbd8e; }
[data-theme="dark"] .build-preview { box-shadow:inset 0 1px 0 #ffffff06,0 6px 0 -1px color-mix(in srgb,var(--build-line) 55%,var(--build-surface)),0 22px 38px -15px #0008; }
[data-theme="dark"] .preview-dot { background:var(--preview-positive); }
@media(min-width:960px) and (max-width:1350px) { .build-preview { width: 205px; padding: 13px; }.preview-reorder,.preview-listing { left: -12px; }.preview-ads,.preview-keywords { right: -12px; }.preview-title { font-size: 10px; } }
@media(min-width:1180px) and (max-height:850px) {
 .preview-reorder { transform:rotate(-7deg) scale(.84); }
 .preview-ads { transform:rotate(8deg) scale(.84); }
 .preview-listing { left:16px; transform:rotate(5deg) scale(.84); }
 .preview-keywords { right:16px; transform:rotate(-6deg) scale(.84); }
}
@media(min-width:1180px) and (max-height:640px) {
 .preview-reorder { transform:rotate(-7deg) scale(.68); }
 .preview-ads { transform:rotate(8deg) scale(.68); }
 .preview-listing { transform:rotate(5deg) scale(.68); }
 .preview-keywords { transform:rotate(-6deg) scale(.68); }
}
/* Keep the full set on smaller laptops and landscape tablets, scaled into
   the side gutters so the heading and 600px composer remain unobstructed. */
@media(min-width:960px) and (max-width:1179px) {
 .preview-reorder,.preview-listing { left:-28px; }
 .preview-ads,.preview-keywords { right:-28px; }
 .preview-reorder { transform:rotate(-7deg) scale(.84); }
 .preview-ads { transform:rotate(8deg) scale(.84); }
 .preview-listing { transform:rotate(5deg) scale(.84); }
 .preview-keywords { transform:rotate(-6deg) scale(.84); }
}
@media(min-width:960px) and (max-width:1039px), (min-width:960px) and (max-width:1179px) and (max-height:740px) {
 .preview-reorder { transform:rotate(-7deg) scale(.68); }
 .preview-ads { transform:rotate(8deg) scale(.68); }
 .preview-listing { transform:rotate(5deg) scale(.68); }
 .preview-keywords { transform:rotate(-6deg) scale(.68); }
}
@media(max-width:959px) { .booking-previews { display: none; } }