/* =========================================================================
   Letfold homepage showcase (2026-09-17) — resources/views/marketing/partials/showcase.blade.php
   Stripe-style bento of live product tiles, a 3D burst stats band and a scroll-driven zoom scene.
   Prefix sx- so nothing here can collide with marketing.css.
   ========================================================================= */
.sx-section { position: relative; padding-block: clamp(64px, 9vw, 112px); }
.sx-section--bento { background: var(--mkt-bg); border-top: 1px solid var(--mkt-border-soft); }
.sx-section--burst { background: linear-gradient(180deg, #fff 0%, #f5faf8 100%); overflow: hidden; }

.sx-lede {
  max-width: 720px; margin: 0 0 clamp(28px, 4vw, 44px);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.22; letter-spacing: -0.02em; font-weight: 500;
  color: #5b7373; text-wrap: balance;
}
/* .mkt-body h2 (0-1-1) sets heading colour and weight site-wide, so match and out-rank it. */
.mkt-body .sx-lede { color: #5f7676; font-weight: 500; }
.mkt-body .sx-lede strong { color: var(--mkt-ink); font-weight: 700; }
.sx-kicker { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mkt-accent); }

/* ---------- reveal ---------- */
.sx-js .sx-pre { opacity: 0; transform: translateY(26px) scale(.975); }
.sx-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.sx-bento > .sx-in:nth-child(2) { transition-delay: .06s; }
.sx-bento > .sx-in:nth-child(3) { transition-delay: .1s; }
.sx-bento > .sx-in:nth-child(4) { transition-delay: .14s; }
.sx-bento > .sx-in:nth-child(5) { transition-delay: .18s; }

/* ---------- bento ---------- */
.sx-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) {
  .sx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-tile--wide, .sx-tile--full { grid-column: span 2; }
}
@media (min-width: 1080px) {
  .sx-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-tile--full { grid-column: span 3; }
}

.sx-tile {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: 400px; border-radius: 18px; background: #fbfcfd; text-decoration: none; color: inherit;
  box-shadow: 0 0 0 1px rgba(7,42,42,.07), 0 1px 2px rgba(7,42,42,.04);
  transition: box-shadow .35s ease, transform .35s ease;
}
@media (min-width: 760px) { .sx-tile--full { min-height: 320px; } }
.sx-tile:hover { box-shadow: 0 0 0 1px rgba(0,118,87,.22), 0 22px 50px -26px rgba(0,60,45,.35); transform: translateY(-2px); }
.sx-tile:focus-visible { outline: 3px solid var(--mkt-accent); outline-offset: 3px; }
.sx-tile__hd { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 0; }
.sx-tile__title { flex: 1; max-width: 300px; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--mkt-ink); letter-spacing: -0.005em; }
.sx-tile__plus {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 16px; line-height: 1; color: var(--mkt-accent); background: #fff; box-shadow: 0 0 0 1px rgba(7,42,42,.1);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.sx-tile:hover .sx-tile__plus { transform: rotate(90deg); background: var(--mkt-accent); color: #fff; }
.sx-tile__stage { position: relative; z-index: 1; flex: 1; display: block; min-height: 280px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sx-tile:hover .sx-tile__stage { transform: scale(1.025); }

/* gradient art: soft, slowly drifting colour fields in Letfold's greens with a warm edge */
.sx-tile__art { position: absolute; z-index: 0; inset: auto -20% -30% auto; width: 80%; height: 90%; filter: blur(2px); opacity: .95;
  background-size: 200% 200%; animation: sx-drift 14s ease-in-out infinite alternate; border-radius: 40% 0 0 0; }
.sx-art--sunrise { inset: 0 -10% auto auto; width: 58%; height: 100%; border-radius: 0;
  background-image: linear-gradient(160deg, rgba(255,255,255,0) 20%, #b7f4dc 42%, #3fd6a4 62%, #ffb38a 86%, #ff8a6b 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.sx-art--lagoon { background-image: linear-gradient(135deg, #d8f7ee, #5ee0bd 45%, #22c3d8 75%, #7c8cff); }
.sx-art--meadow { inset: 0; width: 100%; height: 100%; border-radius: 0; opacity: .55;
  background-image: radial-gradient(60% 55% at 70% 55%, #c9f7e6 0%, rgba(201,247,230,0) 70%), radial-gradient(50% 50% at 30% 80%, #e2fbd0 0%, rgba(226,251,208,0) 70%); }
.sx-art--dusk { background-image: linear-gradient(135deg, #e6f5ff, #9fe7d2 40%, #00a878 70%, #0b6b62); }
.sx-art--mist { inset: 0; width: 100%; height: 100%; border-radius: 0; opacity: .6;
  background-image: radial-gradient(70% 60% at 85% 50%, #d9f7ec 0%, rgba(217,247,236,0) 70%); }
.sx-art--aurora { inset: auto 0 0 auto; width: 55%; height: 100%; border-radius: 0;
  background-image: linear-gradient(115deg, rgba(255,255,255,0) 10%, #d4f8ea 35%, #45dcae 58%, #19b7c9 78%, #8a7dff 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
@keyframes sx-drift { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }

/* shared bits */
.sx-card { display: block; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(7,42,42,.06), 0 12px 30px -18px rgba(7,42,42,.35); overflow: hidden; }
.sx-card__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #eef3f2; }
.sx-card__hd b { font-size: 12px; color: var(--mkt-ink); }
.sx-card__hd em, .sx-row em, .sx-cert__item em { font-style: normal; font-size: 10.5px; color: #566968; }
.sx-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #f2f6f5; }
.sx-row > span:first-child { flex: 1; min-width: 0; }
.sx-row b { display: block; font-size: 11.5px; color: var(--mkt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-amt { font-size: 11.5px; font-weight: 700; color: var(--mkt-ink); font-variant-numeric: tabular-nums; }
.sx-tag { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sx-tag--ok { background: #dcfce7; color: #166534; }
.sx-tag--due { background: #fef3c7; color: #92400e; }
.sx-tag--late { background: #fee2e2; color: #991b1b; }
.sx-tag--new { background: #e0f5ee; color: #00674c; }
.sx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #cbd5d5; flex-shrink: 0; }
.sx-dot--ok { background: #16a34a; }
.sx-dot--due { background: #f59e0b; }
.sx-match { display: flex; align-items: center; gap: 8px; margin: 8px 12px 12px; padding: 8px 10px; border-radius: 9px; background: #eefaf5; color: #00674c; font-size: 10.5px; font-weight: 600; }
.sx-match__tick, .sx-toast__icon { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #00a878; color: #fff; font-size: 10px; font-style: normal; flex-shrink: 0; }
.sx-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 9px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 70% 42%), hsl(calc(var(--h) + 40) 70% 52%)); flex-shrink: 0; }

/* A: rent */
.sx-rent { display: block; }
.sx-phone {
  position: absolute; left: 7%; bottom: -14px; width: 150px; height: 290px; border-radius: 26px; padding: 30px 14px 14px;
  background: #0b1f1f; box-shadow: 0 0 0 3px #1b3131, 0 30px 60px -24px rgba(0,30,25,.7); color: #fff; display: flex; flex-direction: column; gap: 6px;
  transform: rotate(-4deg); transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.sx-tile:hover .sx-phone { transform: rotate(-1deg) translateY(-8px); }
.sx-phone__notch { position: absolute; top: 9px; left: 50%; width: 46px; height: 12px; border-radius: 8px; background: #000; transform: translateX(-50%); }
.sx-phone__app { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #6ee7c1; font-weight: 700; }
.sx-phone__label { margin-top: 8px; font-size: 10px; color: rgba(255,255,255,.6); }
.sx-phone__big { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.sx-phone__sub { font-size: 9.5px; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.sx-phone__row { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border-radius: 9px; background: rgba(255,255,255,.07); font-size: 10px; }
.sx-rent__roll { position: absolute; right: 5%; top: 8%; width: min(62%, 400px); transform: perspective(1200px) rotateY(-6deg); transform-origin: right; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sx-tile:hover .sx-rent__roll { transform: perspective(1200px) rotateY(0); }

/* B: compliance */
.sx-cert { display: block; padding: 16px 18px; }
.sx-cert__list { padding: 4px 0; }
.sx-cert__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.sx-cert__item b { display: block; font-size: 11.5px; color: var(--mkt-ink); }
.sx-ring { --p: .5; --c: #00a878; position: relative; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 360deg), #e8efee 0); }
.sx-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.sx-ring b { position: relative; font-size: 10px !important; color: var(--mkt-ink); }
.sx-timeline { display: grid; grid-template-columns: repeat(6, 1fr); margin: 16px 4px 0; position: relative; }
.sx-timeline::before { content: ''; position: absolute; left: 8%; right: 8%; top: 7px; height: 2px; background: #dfe9e7; }
.sx-timeline span { position: relative; padding-top: 20px; text-align: center; font-size: 9.5px; font-weight: 600; color: #566968; }
.sx-timeline span::before { content: ''; position: absolute; left: 50%; top: 2px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%); background: #fff; box-shadow: 0 0 0 2px #cfdcda; }
.sx-timeline .is-on { color: var(--mkt-ink); }
.sx-timeline .is-on::before { background: #00a878; box-shadow: 0 0 0 2px #00a878; }
.sx-timeline .is-now::after { content: ''; position: absolute; left: 50%; top: -4px; width: 24px; height: 24px; border-radius: 50%; transform: translateX(-50%); background: rgba(0,168,120,.25); animation: sx-pulse 1.8s ease-out infinite; }
@keyframes sx-pulse { from { opacity: 1; transform: translateX(-50%) scale(.5); } to { opacity: 0; transform: translateX(-50%) scale(1.6); } }
.sx-toast { position: relative; margin-top: 16px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); box-shadow: 0 12px 30px -16px rgba(7,42,42,.45), 0 0 0 1px rgba(7,42,42,.06); font-size: 11px; font-weight: 600; color: var(--mkt-ink); }

/* C: portals — three cards fanned in 3D */
.sx-portals { display: block; perspective: 1100px; }
.sx-pcard {
  position: absolute; left: 50%; top: 44%; width: 200px; height: 126px; margin: -55px 0 0 -100px; padding: 16px; border-radius: 16px; color: #fff;
  display: flex; flex-direction: column; gap: 4px; box-shadow: 0 24px 40px -22px rgba(0,40,35,.8), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .7s cubic-bezier(.2,.7,.2,1); overflow: hidden;
}
.sx-pcard::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-60%); transition: transform 1.1s ease; }
.sx-tile:hover .sx-pcard::after { transform: translateX(60%); }
.sx-pcard b { font-size: 15px; letter-spacing: -0.01em; }
.sx-pcard em { font-style: normal; font-size: 10.5px; opacity: .85; max-width: 140px; }
.sx-pcard i { margin-top: auto; font-style: normal; font-size: 9px; letter-spacing: .2em; font-weight: 800; opacity: .75; }
.sx-pcard--1 { background: linear-gradient(135deg, #00a878, #007657 60%, #004f3f); transform: rotateX(18deg) rotateZ(-8deg) translate(-26px, 34px); z-index: 3; }
.sx-pcard--2 { background: linear-gradient(135deg, #22c3d8, #0e8fa6 60%, #0b5f73); transform: rotateX(18deg) rotateZ(2deg) translate(4px, 0); z-index: 2; }
.sx-pcard--3 { background: linear-gradient(135deg, #7ee0a4, #2fb37b 60%, #15724f); transform: rotateX(18deg) rotateZ(12deg) translate(30px, -36px); z-index: 1; }
.sx-tile:hover .sx-pcard--1 { transform: rotateX(10deg) rotateZ(-14deg) translate(-58px, 46px); }
.sx-tile:hover .sx-pcard--3 { transform: rotateX(10deg) rotateZ(16deg) translate(58px, -52px); }
@media (prefers-reduced-motion: no-preference) {
  .sx-portals { animation: sx-float 6s ease-in-out infinite; }
}
@keyframes sx-float { 50% { transform: translateY(-8px); } }

/* D: sales progression */
.sx-sale { display: block; padding: 14px 18px 0; }
.sx-sale__card { transform: perspective(1000px) rotateX(6deg); transform-origin: top; transition: transform .6s ease; }
.sx-tile:hover .sx-sale__card { transform: none; }
.sx-sale__bar { display: block; height: 5px; margin: 10px 12px 6px; border-radius: 9px; background: #e7efed; overflow: hidden; }
.sx-sale__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, #00cf93, #007657); }
.sx-js .sx-pre .sx-sale__bar i { width: 0; }
.sx-in .sx-sale__bar i { transition: width 1.4s cubic-bezier(.2,.7,.2,1) .3s; }
.sx-step { display: flex; align-items: center; gap: 9px; padding: 5px 12px; font-size: 11px; color: #5b6d6c; }
.sx-step i { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 2px #d3dfdd; }
.sx-step--done { color: var(--mkt-ink); }
.sx-step--done i { box-shadow: none; background: #00a878 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat; }
.sx-step--now { color: var(--mkt-ink); font-weight: 700; }
.sx-step--now i { box-shadow: inset 0 0 0 4px #00a878; }
.sx-step:nth-child(n+10) { opacity: .7; }

/* E: listing feeds */
.sx-feeds { display: block; }
.sx-feeds__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-feeds__listing { position: absolute; left: 6%; top: 50%; width: 118px; transform: translateY(-50%); padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 16px 36px -18px rgba(7,42,42,.55), 0 0 0 1px rgba(7,42,42,.06); }
.sx-feeds__photo { display: block; height: 62px; border-radius: 8px; margin-bottom: 7px; background: linear-gradient(160deg, #bfe9dc, #7fc9b1 55%, #3e8e79), #cde; position: relative; overflow: hidden; }
.sx-feeds__photo::before { content: ''; position: absolute; left: 22%; bottom: 0; width: 56%; height: 58%; background: #f6fbf9; clip-path: polygon(0 40%, 50% 0, 100% 40%, 100% 100%, 0 100%); }
.sx-feeds__listing b { display: block; font-size: 10.5px; color: var(--mkt-ink); }
.sx-feeds__listing em { font-style: normal; font-size: 10px; color: #00674c; font-weight: 700; }
.sx-feeds__dest { position: absolute; right: 5%; top: 0; bottom: 0; width: 112px; }
.sx-feeds__dest span { position: absolute; right: 0; width: 112px; height: 40px; margin-top: -20px; border-radius: 11px; background: #fff; display: grid; place-items: center; box-shadow: 0 12px 26px -16px rgba(7,42,42,.5), 0 0 0 1px rgba(7,42,42,.06); }
.sx-feeds__dest span:nth-child(1) { top: 22%; } .sx-feeds__dest span:nth-child(2) { top: 50%; } .sx-feeds__dest span:nth-child(3) { top: 78%; }
.sx-feeds__dest img { max-width: 78px; max-height: 20px; object-fit: contain; }

/* F: branches */
.sx-branches { display: flex; gap: 28px; align-items: flex-start; padding: 26px 18px 18px; }
.sx-branches__switch { width: 210px; flex-shrink: 0; padding-bottom: 6px; }
.sx-opt { display: flex; align-items: center; gap: 8px; margin: 4px 6px 0; padding: 7px 8px; border-radius: 8px; font-size: 11.5px; color: #4b5f5f; }
.sx-opt.is-on { background: #eaf7f2; color: #00674c; font-weight: 700; }
.sx-branches__table { flex: 1; min-width: 0; max-width: 780px; transform: perspective(1400px) rotateY(-5deg); transform-origin: right; transition: transform .6s ease; }
.sx-tile:hover .sx-branches__table { transform: none; }
.sx-trow { display: grid; grid-template-columns: 1.4fr .8fr 1fr .8fr .7fr; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #f1f5f4; font-size: 11.5px; color: var(--mkt-ink); font-variant-numeric: tabular-nums; }
.sx-trow > span:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sx-trow--hd { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #566968; }
.sx-meter { display: inline-block; width: 38px; height: 5px; margin-right: 6px; border-radius: 9px; vertical-align: middle; background: linear-gradient(90deg, #00a878 calc(var(--v) * 100%), #e4eeec 0); }
@media (max-width: 759px) {
  .sx-tile { min-height: 340px; }
  .sx-branches { flex-direction: column; }
  .sx-branches__switch { display: none; }
  .sx-branches__table { transform: none; max-width: none; width: 100%; }
  .sx-trow { grid-template-columns: 1.3fr .8fr 1fr .9fr; }
  .sx-trow > span:nth-child(5) { display: none; }
  .sx-rent__roll { width: 68%; right: 3%; }
  .sx-phone { left: 3%; width: 128px; height: 256px; }
}
@media (max-width: 520px) {
  /* Too narrow for the phone beside the rent roll: show the rent roll on its own. */
  .sx-phone { display: none; }
  .sx-rent__roll { position: relative; right: auto; top: auto; width: auto; margin: 18px 14px 0; transform: none; }
  .sx-meter { display: none; }
  .sx-tile { min-height: 0; }
  .sx-tile__stage { min-height: 250px; }
  .sx-sale__card .sx-step:nth-child(n+10) { display: none; }
}

/* ---------- burst band ---------- */
.sx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid #e4ecea; border-bottom: 1px solid #e4ecea; }
.sx-stats > div { padding: 20px 16px; text-align: center; }
.sx-stats > div + div { border-left: 1px solid #e4ecea; }
.sx-stats > div:nth-child(3) { border-left: 0; }
@media (max-width: 759px) { .sx-stats > div:nth-child(n+3) { border-top: 1px solid #e4ecea; } }
@media (min-width: 760px) { .sx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sx-stats > div:nth-child(3) { border-left: 1px solid #e4ecea; } }
.sx-stats dt { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.03em; color: var(--mkt-ink); font-variant-numeric: tabular-nums; }
.sx-stats dd { margin: 4px 0 0; font-size: 13px; color: #607474; }
.sx-burst { position: relative; height: clamp(260px, 34vw, 420px); margin: 0 auto; max-width: 1400px; }
.sx-burst__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-burst__core { position: absolute; left: 50%; bottom: 7%; width: 64px; height: 64px; margin-left: -32px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(135deg, #00cf93, #007657); box-shadow: 0 0 0 8px rgba(0,207,147,.15), 0 20px 50px -10px rgba(0,118,87,.7); }
.sx-section--burst .sx-lede { margin: 36px 0 0; }

/* ---------- zoom scene ---------- */
.sx-zoom { position: relative; overflow-x: clip; background: linear-gradient(180deg, #f5faf8 0%, #fff 30%, #fff 100%); }
.sx-zoom__sticky { padding-block: 72px; }
.sx-zoom__grid { display: grid; gap: 36px; align-items: center; }
.sx-zoom__title { margin: 0 0 22px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -0.03em; color: var(--mkt-ink); text-wrap: balance; }
.sx-zoom__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sx-zoom__steps li { position: relative; padding: 10px 0 10px 18px; border-left: 2px solid #e1ebe9; transition: border-color .3s ease; }
.sx-zoom__steps li.is-on { border-left-color: var(--mkt-accent); }
.sx-zoom__steps button { all: unset; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sx-zoom__steps button:focus-visible { outline: 2px solid var(--mkt-accent); outline-offset: 4px; border-radius: 4px; }
.sx-zoom__n { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b6d6c; min-width: 84px; }
.sx-zoom__steps b { font-size: 16px; color: #56696a; font-weight: 600; transition: color .3s ease; }
.sx-zoom__steps li.is-on .sx-zoom__n { color: var(--mkt-accent); }
.sx-zoom__steps li.is-on b { color: var(--mkt-ink); }
.sx-zoom__steps p { margin: 0; max-height: 0; overflow: hidden; opacity: 0; font-size: 14px; line-height: 1.55; color: #5b6f70; transition: max-height .45s ease, opacity .45s ease, margin .45s ease; }
.sx-zoom__steps li.is-on p { max-height: 80px; opacity: 1; margin-top: 6px; }

.sx-zoom__stage { position: relative; }
.sx-zoom__glow { position: absolute; inset: -12% -8%; z-index: 0; border-radius: 50%; filter: blur(40px); opacity: .7;
  background: radial-gradient(50% 50% at 40% 45%, rgba(0,207,147,.35), transparent 70%), radial-gradient(40% 40% at 75% 65%, rgba(34,195,216,.28), transparent 70%); }
.sx-zoom__window { position: relative; z-index: 1; border-radius: 16px; background: #fff; overflow: hidden; transform-origin: 50% 40%;
  box-shadow: 0 0 0 1px rgba(7,42,42,.08), 0 50px 100px -40px rgba(0,50,40,.45), 0 20px 40px -24px rgba(0,50,40,.3); will-change: transform; }
.sx-zoom__chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3f7f6; border-bottom: 1px solid #e6eeec; }
.sx-zoom__chrome i { width: 9px; height: 9px; border-radius: 50%; background: #d2dddb; }
.sx-zoom__chrome span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fff; font-size: 10.5px; color: #566968; }
.sx-zoom__screens { position: relative; height: clamp(300px, 34vw, 420px); }
.sx-screen { position: absolute; inset: 0; padding: 20px 22px; opacity: 0; transform: scale(.96) translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.sx-screen.is-on { opacity: 1; transform: none; }
.sx-screen__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sx-screen__hd b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; letter-spacing: -0.02em; color: var(--mkt-ink); }
.sx-screen__hd em { font-style: normal; font-size: 12px; color: #566968; }
.sx-hero-card { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; box-shadow: 0 0 0 1px #e6eeec; }
.sx-hero-card__photo { width: 78px; height: 58px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(160deg, #bfe9dc, #6fc2a8 55%, #2f7f6b); }
.sx-hero-card div { flex: 1; } .sx-hero-card b, .sx-person b { display: block; font-size: 14px; color: var(--mkt-ink); }
.sx-hero-card em, .sx-person em { font-style: normal; font-size: 12px; color: #566968; }
.sx-person { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 14px; background: #f6faf9; }
.sx-person .sx-av { width: 36px; height: 36px; font-size: 12px; }
.sx-person div { flex: 1; }
.sx-btn { padding: 7px 14px; border-radius: 999px; background: var(--mkt-accent); color: #fff; font-size: 12px; font-weight: 700; }
.sx-lines { display: grid; gap: 9px; margin-top: 18px; }
.sx-lines i { display: block; height: 9px; width: var(--w); border-radius: 9px; background: #edf3f2; }
.sx-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; height: calc(100% - 44px); }
.sx-week__day { position: relative; border-radius: 12px; background: #f6faf9; }
.sx-week__day > span { position: absolute; top: 8px; left: 10px; font-size: 11px; font-weight: 700; color: #566968; }
.sx-slot { position: absolute; left: 6px; right: 6px; top: var(--top); height: var(--h); padding: 6px 8px; border-radius: 9px; font-style: normal; font-size: 10.5px; line-height: 1.3; color: #0f4d40; background: #d7f2e8; overflow: hidden; }
.sx-slot--hot { background: linear-gradient(135deg, #00a878, #007657); color: #fff; font-weight: 700; box-shadow: 0 12px 26px -12px rgba(0,118,87,.7); }
.sx-offer { position: relative; max-width: 420px; margin: 10px auto 0; padding: 18px 20px; border-radius: 16px; box-shadow: 0 0 0 1px #e6eeec, 0 24px 40px -28px rgba(7,42,42,.4); }
.sx-offer__row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #e3ebe9; font-size: 14px; color: #5b6f70; }
.sx-offer__row b { color: var(--mkt-ink); }
.sx-offer__stamp { position: absolute; right: -10px; bottom: -18px; padding: 8px 18px; border-radius: 12px; font-weight: 800; font-size: 16px; color: #fff; letter-spacing: .02em;
  background: linear-gradient(135deg, #00cf93, #007657); transform: rotate(-6deg); box-shadow: 0 16px 30px -12px rgba(0,118,87,.7); }
.sx-screen.is-on .sx-offer__stamp { animation: sx-stamp .6s cubic-bezier(.2,1.6,.4,1) .15s both; }
@keyframes sx-stamp { from { opacity: 0; transform: rotate(-6deg) scale(1.8); } }
.sx-doc { max-width: 460px; margin: 0 auto; padding: 18px 20px; border-radius: 14px; box-shadow: 0 0 0 1px #e6eeec; }
.sx-sign { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.sx-sign__line { flex: 1; border-bottom: 1.5px solid #cfdcda; padding-bottom: 4px; }
.sx-sign__line em { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 18px; color: #0f4d40; }
.sx-bars { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 12px; height: 62%; padding: 0 6px; }
.sx-bars span { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.sx-bars i { width: 100%; height: calc(var(--v) * 85%); border-radius: 9px 9px 4px 4px; background: linear-gradient(180deg, #00cf93, #007657); transform-origin: bottom; }
.sx-screen.is-on .sx-bars i { animation: sx-grow .8s cubic-bezier(.2,.7,.2,1) both; }
.sx-bars span:nth-child(2) i { animation-delay: .06s !important; } .sx-bars span:nth-child(3) i { animation-delay: .12s !important; }
.sx-bars span:nth-child(4) i { animation-delay: .18s !important; } .sx-bars span:nth-child(5) i { animation-delay: .24s !important; background: linear-gradient(180deg, #b6ead8, #7cc9ad); }
@keyframes sx-grow { from { transform: scaleY(0); } }
.sx-bars em { font-style: normal; font-size: 11px; color: #566968; }
.sx-screen .sx-cert__item { padding: 12px 6px; border-bottom: 1px solid #eef3f2; }
.sx-screen .sx-cert__item b { font-size: 14px; }
.sx-screen .sx-cert__item em { font-size: 12px; }
.sx-screen .sx-ring { width: 42px; height: 42px; }
.sx-zoom__float { position: absolute; z-index: 2; left: -18px; bottom: 34px; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 13px; background: #fff;
  box-shadow: 0 20px 44px -18px rgba(7,42,42,.5), 0 0 0 1px rgba(7,42,42,.06); font-size: 13px; font-weight: 600; color: var(--mkt-ink); }
.sx-zoom__float.is-pop { animation: sx-pop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes sx-pop { from { opacity: 0; transform: translateY(12px) scale(.92); } }

@media (min-width: 1024px) {
  .sx-zoom { height: calc(100vh * 3.2); }
  .sx-zoom__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-block: 0; }
  .sx-zoom__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; width: 100%; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .sx-zoom { height: auto; }
  .sx-zoom__sticky { position: relative; height: auto; padding-block: 96px; }
}
@media (max-width: 1023px) {
  .sx-zoom__float { left: 10px; bottom: -14px; }
  .sx-zoom__stage { order: -1; margin-bottom: 18px; }
  .sx-zoom__copy { display: contents; }
  .sx-zoom__copy .sx-kicker { order: -3; margin-bottom: 0; }
  .sx-zoom__title { order: -2; margin-bottom: 0; }
  .sx-zoom__grid { gap: 18px; }
}
@media (max-width: 520px) {
  .sx-zoom__screens { height: 300px; }
  .sx-screen { padding: 14px; }
  .sx-offer__stamp { right: 6px; }
  .sx-zoom__n { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-tile__art, .sx-portals, .sx-timeline .is-now::after { animation: none !important; }
  .sx-tile, .sx-tile__stage, .sx-phone, .sx-pcard, .sx-screen { transition: none !important; }
}