/* "Per chi" pages (17 Oct 2026). Built on landing.css (.lp variables, buttons, header, footer). */
.sx main{padding-bottom:40px}
.sx .sx-hero{padding-block:56px 40px}
.sx .sx-hero h1{max-width:20ch}
.sx .sx-kick{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--lp-green);margin-bottom:14px}
.sx .sx-kick a{color:inherit}
.sx .sx-hero h1{font-size:clamp(2rem,4.6vw,3.6rem)}
.sx .sx-hero h1 em,.sx .sx-h2 em,.sx .sx-final h2 em{color:var(--lp-green);font-style:italic}
.sx .sx-lead{font-size:1.15rem;color:var(--lp-muted);max-width:62ch;margin-top:18px;line-height:1.55}
.sx .sx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sx .sx-h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:56px 0 22px}
.sx .sx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.sx .sx-card{display:flex;flex-direction:column;gap:10px;background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:20px;padding:22px;text-decoration:none;color:var(--lp-ink);transition:transform .2s var(--ease-out),box-shadow .2s ease}
.sx a.sx-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(15,43,32,.45)}
.sx .sx-card h3{font-size:1.3rem}
.sx .sx-card p{color:var(--lp-muted);line-height:1.5}
.sx .sx-card.off{opacity:.7}
.sx .sx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.sx .sx-chips span{font-size:12px;font-weight:600;border:1px solid var(--lp-line);border-radius:999px;padding:4px 10px;color:var(--lp-green)}
.sx .sx-go{font-weight:600;color:var(--lp-green)}
.sx .sx-soon{font-size:13px;color:var(--lp-muted)}
.sx .sx-note{color:var(--lp-muted);margin-top:16px;font-size:15px}
.sx .sx-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sx .sx-cols>div{background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:20px;padding:22px}
.sx .sx-cols h3{font-size:1.2rem;margin-bottom:8px}
.sx .sx-cols p{color:var(--lp-muted);line-height:1.55}
.sx .sx-rule{margin-top:18px;padding:16px 20px;border-radius:16px;background:#e5efe9;color:var(--lp-ink);font-weight:500}
.sx .sx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.sx .sx-steps li{counter-increment:s;background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:20px;padding:22px;position:relative}
.sx .sx-steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lp-green);color:#fff;font-weight:700;margin-bottom:12px}
.sx .sx-steps b{display:block;font-size:1.1rem;margin-bottom:6px}
.sx .sx-steps p{color:var(--lp-muted);line-height:1.55}
.sx .sx-table{border:1px solid var(--lp-line);border-radius:20px;overflow:hidden;background:var(--lp-surface)}
.sx .sx-table .r{display:grid;grid-template-columns:1fr 1.6fr 1.4fr;gap:12px;padding:14px 20px;border-top:1px solid var(--lp-line)}
.sx .sx-table .r.h{border-top:0;background:#eef3ef;font-size:13px;font-weight:600;color:var(--lp-muted);text-transform:uppercase;letter-spacing:.04em}
.sx .sx-excols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.sx .sx-bubble{background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:20px;padding:20px}
.sx .sx-bubble.reply{border-color:var(--lp-green)}
.sx .sx-bubble p{margin-top:8px;line-height:1.55}
.sx .sx-tag{font-size:12px;font-weight:600;color:var(--lp-green);text-transform:uppercase;letter-spacing:.04em}
.sx .sx-tr{margin-top:12px;border:1px dashed var(--lp-line);border-radius:12px;padding:10px 14px;font-size:15px;color:var(--lp-muted)}
.sx .sx-tr summary{font-weight:600;cursor:pointer}
.sx .sx-faq details{background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:16px;padding:16px 20px;margin-bottom:10px}
.sx .sx-faq summary{font-weight:600;cursor:pointer}
.sx .sx-faq details p{margin-top:10px;color:var(--lp-muted);line-height:1.55}
.sx .sx-final{margin-top:64px;background:var(--lp-deep);color:#dfeee6;border-radius:28px;padding:44px 40px}
.sx .sx-final h2{color:#fff;font-size:clamp(1.6rem,3vw,2.4rem)}
.sx .sx-final h2 em{color:var(--lp-gold-2)}
.sx .sx-final p{margin-top:12px;max-width:60ch;line-height:1.55}
@media (max-width:820px){
  .sx .sx-cols,.sx .sx-steps,.sx .sx-excols{grid-template-columns:1fr}
  .sx .sx-table .r{grid-template-columns:1fr;gap:4px}
  .sx .sx-table .r.h{display:none}
  .sx .sx-final{padding:32px 22px}
  .sx .sx-hero{padding-block:36px 24px}
  .sx .sx-cta .b{white-space:normal;text-align:center}
}
/* Scrolling rows of other businesses */
.sx .sx-more .sx-lead{margin:-8px 0 22px}
.sx .sx-mq{overflow:hidden;margin:0 -20px 12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sx .sx-mq-track{display:flex;width:max-content;animation:sx-mq 60s linear infinite}
.sx .sx-mq.rev .sx-mq-track{animation-direction:reverse;animation-duration:70s}
.sx .sx-mq:hover .sx-mq-track{animation-play-state:paused}
.sx .sx-mq-row{display:flex;gap:10px;list-style:none;margin:0;padding:0 10px 0 0}
.sx .sx-mq-row li{white-space:nowrap;background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:999px;padding:10px 18px;font-weight:500}
@keyframes sx-mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .sx .sx-mq{-webkit-mask-image:none;mask-image:none;margin-inline:0}
  .sx .sx-mq-track{animation:none;width:auto}
  .sx .sx-mq-row{flex-wrap:wrap}
  .sx .sx-mq-row[aria-hidden]{display:none}
}
/* Tourist example animation (sector-anim.js) */
.sx .sx-anim .sx-bubble{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s var(--ease-out,ease)}
.sx .sx-anim .sx-bubble.in{opacity:1;transform:none}
.sx .sx-anim .sx-bubble.reply.typing>p::after{content:attr(data-typing);color:var(--lp-muted);font-style:italic;animation:sx-blink 1s ease-in-out infinite}
.sx .sx-anim .sx-tr{opacity:0;transition:opacity .5s ease}
.sx .sx-anim .sx-tr.in{opacity:1}
@keyframes sx-blink{50%{opacity:.35}}
.sx .sx-replay{margin-left:8px;border:1px solid var(--lp-line);background:var(--lp-surface);border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;color:var(--lp-green);cursor:pointer}
.sx .sx-replay:hover{border-color:var(--lp-green)}
