/* Service scenes inside the showcase frame. Everything is sized in em from one base set on the stage width (cqw),
   so each scene scales as one picture from a wide desktop down to a phone. */

.sx-stage { container-type: inline-size; background: #f5f5f1; }
.sx-canvas { font-size: 1.62cqw; line-height: 1.35; color: #151515; padding: 4.2% 4.6%; }
.sx-canvas > div { height: 100%; }

/* Without JS the finished state shows; data-out items are the "before" states */
.is-scene [data-out] { visibility: hidden; opacity: 0; }

/* ---------- Shared pieces ---------- */
.sx-panel { padding: .9em 1.1em; border-radius: .7em; background: #fff; box-shadow: 0 .1em .3em rgba(0, 0, 0, .06), 0 .8em 2em -1.2em rgba(0, 0, 0, .25); }
.sx-panel.is-lime { background: #b8f33d; box-shadow: none; }
.sx-label { margin: 0 0 .45em; color: #7a7a72; font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.is-lime .sx-label { color: #2d4300; }
.sx-small { display: block; color: #6c6c66; font-size: .78em; }
.sx-muted { color: #8a8a82; }
.sx-big { margin: 0; font-size: 2.1em; font-weight: 800; font-variation-settings: "wdth" 112; line-height: 1.05; }
.sx-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .38em 0; border-bottom: 1px solid #eeeee8; }
.sx-row:last-child { border-bottom: 0; }
.sx-good { display: inline-flex; align-items: center; gap: .3em; color: #2f7a1f; font-weight: 700; }
.sx-tick { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.sx-pill { display: inline-flex; align-items: center; gap: .35em; padding: .3em .75em; border-radius: 99px; background: #ececE6; color: #55554f; font-size: .78em; font-weight: 700; white-space: nowrap; }
.sx-pill.is-ok { background: #e7f6dc; color: #2f7a1f; }
.sx-pill.is-lime { background: #b8f33d; color: #1b2a00; }
.sx-dot { width: .55em; height: .55em; border-radius: 50%; background: #2f7a1f; }
.sx-btn { display: inline-block; padding: .45em 1em; border-radius: 99px; background: #151515; color: #fff; font-size: .8em; font-weight: 700; white-space: nowrap; }
.sx-btn.is-ghost { background: #fff; color: #151515; box-shadow: inset 0 0 0 1px #d8d8d0; }
.sx-line { display: block; height: .5em; margin-top: .5em; border-radius: 99px; background: #e8e8e1; }
.sx-line.is-short { width: 60%; }
.sx-swap { display: inline-grid; }
.sx-swap > * { grid-area: 1 / 1; }
.sx-bar { height: .55em; margin: .4em 0; border-radius: 99px; background: #ececE6; overflow: hidden; }
.sx-bar i { display: block; height: 100%; border-radius: inherit; background: #b8f33d; }
.sx-search { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .55em .6em .55em 1.1em; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px #dcdcd4, 0 .6em 1.6em -1em rgba(0, 0, 0, .2); font-size: 1.15em; }
.sx-search-q { font-weight: 600; min-height: 1.3em; }
.sx-search-btn { padding: .35em .9em; border-radius: 99px; background: #151515; color: #fff; font-size: .75em; font-weight: 700; }
.sx-biz { font-size: 1.25em; font-weight: 800; font-variation-settings: "wdth" 110; }
.sx-actions { display: flex; flex-wrap: wrap; gap: .45em; }
.sx-avatar, .sx-pfp { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #2a1e12; color: #f3c78a; font-weight: 800; flex: 0 0 auto; }

/* ---------- Domain ---------- */
.sx-domain { display: flex; flex-direction: column; justify-content: center; gap: 1.2em; font-size: 1.12em; }
.sx-list { display: flex; flex-direction: column; gap: .5em; }
.sx-dom { padding: .6em 1em; border: 0; border-radius: .6em; background: #fff; box-shadow: 0 .1em .3em rgba(0, 0, 0, .05); }
.sx-dom b { font-size: 1.05em; }
.sx-dom em { font-style: normal; color: #2f7a1f; }
.sx-dom.is-dim { opacity: .55; }
.sx-dom.is-dim em { color: #8a8a82; }
.sx-dns { margin-top: .2em; }

/* ---------- Hosting ---------- */
.sx-hosting { display: flex; flex-direction: column; gap: .9em; }
.sx-host-head { display: flex; align-items: center; justify-content: space-between; }
.sx-host-head b { font-size: 1.15em; }
.sx-host-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; flex: 1; }
.sx-host-grid .sx-big { font-size: 1.6em; }

/* ---------- Business email ---------- */
.sx-email { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 1em; }
.sx-email-side { display: flex; flex-direction: column; gap: .9em; }
.sx-mailbox { display: flex; align-items: center; gap: .7em; }
.sx-mailbox b { display: block; }
.sx-email-swap { display: grid; height: 100%; }
.sx-compose { display: flex; flex-direction: column; gap: .2em; }
.sx-compose .sx-row { justify-content: flex-start; }
.sx-subject { margin: .5em 0 0; font-size: 1.15em; font-weight: 800; }
.sx-compose .sx-btn { align-self: flex-start; margin-top: auto; background: #b8f33d; color: #151515; }
.sx-mail { display: grid; grid-template-columns: 7em 1fr auto; gap: .8em; align-items: center; padding: .65em .4em; border-bottom: 1px solid #eeeee8; font-size: .92em; }
.sx-mail span { color: #55554f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-mail em { color: #8a8a82; font-style: normal; font-size: .85em; }
.sx-mail.is-new { margin: 0 -.4em; padding-inline: .8em; border-radius: .5em; background: #f1fbe1; border-bottom-color: transparent; }
.sx-mail.is-new b, .sx-mail.is-new span { color: #151515; font-weight: 800; }

/* ---------- Logo ---------- */
.sx-logo { display: grid; grid-template-columns: 0.8fr 1.6fr; grid-template-rows: 1fr auto; gap: 1em; }
.sx-brief p { margin: 0 0 .3em; }
.sx-swatches { display: flex; gap: .4em; margin-top: .6em; }
.sx-swatches i { width: 1.6em; height: 1.6em; border-radius: 50%; }
.sx-logo-ideas { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.sx-idea { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; text-align: center; }
.sx-idea b { font-size: 1.1em; font-variation-settings: "wdth" 120; line-height: 1.05; }
.sx-idea.is-dim { opacity: .5; }
.sx-idea.is-picked { box-shadow: inset 0 0 0 .18em #b8f33d, 0 .8em 2em -1.2em rgba(0, 0, 0, .25); }
.sx-mark { width: 3.6em; height: 3.6em; }
.sx-mark-a { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3c78a, #c27a3a); }
.sx-mark-b { border-radius: 1em 1em .3em .3em; background: #2a1e12; box-shadow: inset 0 -1.1em 0 #c27a3a; }
.sx-files { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5em; }
.sx-file { padding: .45em .9em; border-radius: .5em; background: #151515; color: #fff; font-size: .82em; font-weight: 700; }

/* ---------- Google Business Profile ---------- */
.sx-gbp { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 1em; }
.sx-map { position: relative; border-radius: .7em; background: #e6ecdf; overflow: hidden; }
.sx-road { position: absolute; background: #fff; }
.sx-road.r1 { left: -10%; right: -10%; top: 38%; height: .7em; transform: rotate(-8deg); }
.sx-road.r2 { top: -10%; bottom: -10%; left: 42%; width: .7em; transform: rotate(10deg); }
.sx-road.r3 { left: -10%; right: -10%; top: 72%; height: .45em; transform: rotate(4deg); }
.sx-pin { position: absolute; left: 44%; top: 30%; width: 2em; height: 2em; border-radius: 50% 50% 50% 0; background: #151515; transform: rotate(-45deg); box-shadow: 0 .4em .8em rgba(0, 0, 0, .25); }
.sx-pin::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: #b8f33d; }
.sx-listing { display: flex; flex-direction: column; gap: .6em; }
.sx-rating { display: flex; align-items: center; gap: .45em; }
.sx-rating b { font-size: 1.1em; }
.sx-stars { display: inline-flex; gap: .12em; }
.sx-stars i { width: .9em; height: .9em; background: #f2b01e; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.sx-info .sx-row { font-size: .88em; }
.sx-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; height: 3.4em; }
.sx-photos i { border-radius: .4em; background: radial-gradient(circle at 30% 30%, #f3c78a, #c27a3a 60%, #7b4421); }
.sx-photos i:nth-child(2) { background: radial-gradient(circle at 60% 40%, #efe5d4, #b9a07e); }
.sx-photos i:nth-child(3) { background: radial-gradient(circle at 40% 60%, #d9c3a0, #6b4a2a); }

/* ---------- Social setup ---------- */
.sx-social { display: flex; flex-direction: column; gap: .7em; }
.sx-tabs { display: flex; gap: .4em; }
.sx-tabs span { padding: .35em .9em; border-radius: 99px; background: #fff; color: #6c6c66; font-size: .8em; font-weight: 700; box-shadow: inset 0 0 0 1px #e0e0d8; }
.sx-tabs .is-on { background: #151515; color: #fff; box-shadow: none; }
.sx-profile { position: relative; flex: 1; padding: 0; overflow: hidden; }
.sx-cover { position: relative; height: 42%; background: linear-gradient(120deg, #2a1e12, #7b4421 60%, #c27a3a); overflow: hidden; }
.sx-cover i { position: absolute; border-radius: 50%; background: rgba(243, 199, 138, .35); }
.sx-cover i:first-child { width: 30%; aspect-ratio: 1; right: 8%; top: -30%; }
.sx-cover i:last-child { width: 18%; aspect-ratio: 1; right: 30%; bottom: -40%; }
.sx-pfp { position: absolute; left: 4%; top: 30%; width: 4.4em; height: 4.4em; font-size: 1.1em; box-shadow: 0 0 0 .25em #fff; }
.sx-pbody { padding: 2.4em 1.2em 1em; }
.sx-pbody .sx-small { margin: .3em 0; font-size: .9em; }
.sx-link { margin: 0 0 .7em; color: #2f7a1f; font-size: .85em; font-weight: 700; }

/* ---------- SEO ---------- */
.sx-seo { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1em; align-content: center; align-items: start; font-size: 1.14em; }
.sx-serp { display: flex; flex-direction: column; gap: .7em; }
.sx-result { padding: .9em 1.1em; border-radius: .6em; background: #fff; }
.sx-result b { display: block; margin-top: .15em; color: #1a3ea8; font-size: 1em; }
.sx-result b.is-grey { height: .8em; margin-top: .4em; width: 70%; border-radius: 99px; background: #dfe3ee; }
.sx-result.is-you { box-shadow: inset 0 0 0 .16em #b8f33d, 0 .8em 2em -1.2em rgba(0, 0, 0, .3); }
.sx-top-slot { display: grid; }
.sx-seo-side { display: flex; flex-direction: column; gap: .9em; }
.sx-rank-num b { font-size: 3em; font-weight: 800; font-variation-settings: "wdth" 115; line-height: 1; color: #8a8a82; }
.sx-rank-num b.is-top { color: #2f7a1f; }

/* ---------- AI search ---------- */
.sx-ai { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.2em; align-items: center; font-size: 1.12em; }
.sx-chat { display: flex; flex-direction: column; gap: .8em; justify-content: center; }
.sx-bubble { max-width: 92%; padding: .7em 1em; border-radius: 1em; background: #fff; font-size: .95em; }
.sx-bubble p { margin: 0 0 .35em; }
.sx-bubble p:last-child { margin: 0; }
.sx-bubble.is-user { align-self: flex-end; background: #151515; color: #fff; border-bottom-right-radius: .3em; }
.sx-bubble.is-ai { border-bottom-left-radius: .3em; box-shadow: 0 .8em 2em -1.2em rgba(0, 0, 0, .25); }
.sx-bubble.is-thinking { display: inline-flex; align-items: center; gap: .3em; align-self: flex-start; color: #6c6c66; }
.sx-bubble.is-thinking i { width: .45em; height: .45em; border-radius: 50%; background: #b8b8b0; }
.sx-named { padding: .4em .6em; margin: .3em -.6em !important; border-radius: .5em; background: #f1fbe1; }
.sx-tracker { align-self: center; }

/* ---------- Google Ads ---------- */
.sx-ads { display: grid; align-content: center; gap: 1.4em; font-size: 1.1em; }
.sx-ads-main { display: flex; flex-direction: column; gap: .9em; }
.sx-chips { display: flex; flex-wrap: wrap; gap: .45em; }
.sx-chips span { padding: .4em .85em; border-radius: 99px; background: #fff; font-size: .82em; font-weight: 600; box-shadow: inset 0 0 0 1px #dcdcd4; }
.sx-ad { display: flex; flex-direction: column; gap: .2em; align-items: flex-start; }
.sx-ad b { color: #1a3ea8; font-size: 1.15em; }
.sx-ad .sx-swap { margin-top: .4em; }
.sx-sponsored { font-size: .78em; font-weight: 800; }
.sx-ads-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }

/* ---------- Social media management ---------- */
.sx-smm { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1em; }
.sx-cal { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: .6em; align-content: start; }
.sx-day { display: none; }
.sx-post { position: relative; aspect-ratio: 1; border-radius: .6em; background: #fff; box-shadow: inset 0 0 0 1.5px #dcdcd4; overflow: hidden; }
.sx-art { position: absolute; inset: 0; }
.sx-art.a1 { background: radial-gradient(circle at 30% 30%, #f3c78a, #c27a3a 60%, #7b4421); }
.sx-art.a2 { background: linear-gradient(140deg, #151515 55%, #b8f33d 55%); }
.sx-art.a3 { background: radial-gradient(circle at 70% 40%, #efe5d4, #b9a07e 70%); }
.sx-ok-badge { position: absolute; right: .4em; top: .4em; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #b8f33d; color: #1b2a00; }
.sx-smm-stats { align-self: center; }

/* ---------- Email marketing ---------- */
.sx-emk { display: grid; align-content: center; gap: 1.6em; font-size: 1.08em; }
.sx-flow { display: grid; grid-template-columns: 1.15fr auto 1fr auto 1fr; align-items: center; gap: .6em; }
.sx-signup { display: flex; flex-direction: column; gap: .5em; }
.sx-input { padding: .45em .7em; border-radius: .4em; background: #f5f5f1; box-shadow: inset 0 0 0 1px #dcdcd4; font-size: .85em; min-height: 1.2em; }
.sx-signup .sx-btn { align-self: flex-start; }
.sx-node b { display: block; }
.sx-arrow { width: 1.6em; height: .16em; background: #151515; position: relative; }
.sx-arrow::after { content: ""; position: absolute; right: -.1em; top: -.32em; border: .4em solid transparent; border-left-color: #151515; border-right: 0; }
.sx-thumb { display: block; height: 2.6em; margin-top: .5em; border-radius: .4em; background: radial-gradient(circle at 30% 30%, #f3c78a, #c27a3a 60%, #7b4421); }
.sx-emk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }

/* ---------- Maintenance ---------- */
.sx-maint { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1em; }
.sx-checklist .sx-row { padding: .55em 0; }
.sx-maint-side { display: flex; flex-direction: column; gap: .9em; }
.sx-maint-side b { display: block; font-size: 1.15em; }

/* Phones: the frame is narrow, so the base size goes up a little and secondary panels step back */
@media (max-width: 760px) {
  .sx-canvas { font-size: 1.9cqw; padding: 3.5% 4%; }
}