/* EstateSail solutions pages. Mobile first, no framework. */
.sx{--n:#0b1f33;--n2:#13293f;--b:#2563eb;--bp:#1d4ed8;--sky:#9cc2ff;--l:#edf3f8;--m:#314356;--ln:rgba(11,31,51,.12);font-family:"Instrument Sans","Segoe UI",Arial,sans-serif;color:var(--n);overflow-x:clip}
.sx *{box-sizing:border-box}
.sx h1,.sx h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.04;margin:0}
.sx h3{margin:0;font-weight:600;letter-spacing:-.02em;font-size:1.15rem;line-height:1.3}
.sx p{margin:0;line-height:1.6}
.sx img{max-width:100%;height:auto;display:block}
.sx-w{width:min(1160px,calc(100% - 40px));margin:0 auto;padding:0 2px}
.sx-sec{padding:72px 0}
.sx-white{background:#fff}.sx-light{background:var(--l)}
.sx-dark{background:var(--n);color:#fff}.sx-dark h1,.sx-dark h2,.sx-dark h3,.sx-final h2{color:#fff!important}
.sx-kick{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--b);margin-bottom:12px!important}
.sx-dark .sx-kick,.sx-hero .sx-kick{color:var(--sky)}
.sx-head{max-width:760px;margin:0 auto 40px;text-align:center}
.sx-head h2{font-size:clamp(2.1rem,6vw,3.5rem)}
.sx-head p:not(.sx-kick){margin-top:14px!important;color:var(--m);font-size:1.08rem}
.sx-dark .sx-head p:not(.sx-kick){color:rgba(255,255,255,.8)}
.sx a.sx-btn,.sx button.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:16px 28px;border-radius:999px;font-weight:600;font-size:1.02rem;line-height:1.25;text-decoration:none!important;transition:transform .2s,background .2s,box-shadow .2s;border:0;cursor:pointer;font-family:inherit;box-sizing:border-box}
.sx a.sx-btn-p,.sx button.sx-btn-p{background:#2563eb!important;background-color:#2563eb!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 10px 28px rgba(37,99,235,.35)!important;padding:16px 28px!important}
.sx a.sx-btn-p:hover,.sx button.sx-btn-p:hover{background:#1d4ed8!important;background-color:#1d4ed8!important;transform:translateY(-2px)}
.sx a.sx-btn-g,.sx button.sx-btn-g{background:rgba(255,255,255,.08)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:2px solid rgba(255,255,255,.4)!important;padding:14px 26px!important}
.sx a.sx-btn-g:hover,.sx button.sx-btn-g:hover{background:rgba(255,255,255,.16)!important;transform:translateY(-2px)}
.sx a.sx-btn-w,.sx button.sx-btn-w{background:#fff!important;color:#0b1f33!important;-webkit-text-fill-color:#0b1f33!important;border:2px solid var(--ln)!important;padding:14px 26px!important}
.sx-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;margin-bottom:8px}
.sx-ctas.c{justify-content:center}
/* hero */
.sx-hero{position:relative;background:var(--n);color:#fff;padding:52px 0 64px;overflow:hidden}
.sx-hero:before{content:"";position:absolute;top:-320px;right:-260px;width:900px;height:900px;background:radial-gradient(circle,rgba(37,99,235,.5),rgba(37,99,235,0) 62%);animation:sxGlow 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes sxGlow{to{transform:translate(-80px,60px) scale(1.1)}}
.sx-hero-g{position:relative;display:grid;gap:40px;align-items:center}
.sx-hero h1{font-size:clamp(2.7rem,10vw,5rem);color:#fff!important;line-height:1.08}
.sx-hero h1 em{color:var(--sky);font-style:italic;letter-spacing:.01em}
.sx-sub{margin-top:18px!important;font-size:clamp(1.05rem,2.6vw,1.25rem);color:rgba(255,255,255,.86);max-width:580px}
.sx-trust{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.93rem;color:rgba(255,255,255,.85)}
.sx-trust li:before{content:"\2713";color:var(--sky);margin-right:7px;font-weight:700}
.sx-stage{position:relative;max-width:380px;margin:0 auto;width:100%}
/* legacy sx-phone shell superseded by bezel v7 */
.sx-phone img{width:100%;height:auto;display:block}
@keyframes sxFloat{50%{transform:translateY(-12px)}}
.sx-chip{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;color:var(--n);border-radius:14px;padding:10px 14px;font-size:.86rem;font-weight:600;box-shadow:0 14px 34px rgba(0,0,0,.28);animation:sxChip 5s ease-in-out infinite;white-space:nowrap}
.sx-chip b{color:var(--b)}
.sx-chip i{width:9px;height:9px;border-radius:50%;background:#16a34a;display:inline-block;box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.sx-chip.c1{top:12%;left:-8%}.sx-chip.c2{top:46%;right:-10%;animation-delay:-1.6s}.sx-chip.c3{bottom:9%;left:-4%;animation-delay:-3.2s}
@keyframes sxChip{50%{transform:translateY(-8px)}}
/* stats */
.sx-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:-34px;position:relative;z-index:2}
.sx-stat{background:#fff;border-radius:18px;padding:20px;box-shadow:0 16px 40px rgba(11,31,51,.1);text-align:center}
.sx-stat strong{display:block;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:2.4rem;line-height:1;color:var(--b)}
.sx-stat span{display:block;margin-top:6px;font-size:.88rem;color:var(--m)}
/* story words */
.sx-story{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.6rem,4.8vw,2.6rem);line-height:1.3;max-width:900px;margin:0 auto;text-align:center}
.sx-story span{opacity:.14;transition:opacity .4s}
.sx-story span.on{opacity:1}
/* tabs */
.sx-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 14px;margin:0 -18px;padding-left:18px;scroll-snap-type:x mandatory}
.sx-tabs::-webkit-scrollbar{display:none}
.sx-tab{flex:none;scroll-snap-align:start;border:1px solid var(--ln);background:#fff;color:var(--n);border-radius:999px;padding:11px 18px;font:600 .95rem "Instrument Sans",Arial,sans-serif;cursor:pointer;position:relative;overflow:hidden;transition:background .2s,color .2s}
.sx-tab[aria-selected=true]{background:var(--n);color:#fff;border-color:var(--n)}
.sx-tab .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--sky)}
.sx-tab[aria-selected=true] .bar{animation:sxBar var(--dur,6s) linear forwards}
.sx-paused .sx-tab .bar{animation-play-state:paused}
@keyframes sxBar{to{width:100%}}
.sx-panel{display:grid;gap:28px;align-items:center;background:#fff;border-radius:26px;padding:24px;box-shadow:0 20px 50px rgba(11,31,51,.08)}
.sx-panel[hidden]{display:none}
.sx-panel.in .sx-panel-t,.sx-panel.in .sx-panel-m{animation:sxIn .55s cubic-bezier(.2,.7,.2,1) both}
.sx-panel.in .sx-panel-m{animation-delay:.08s}
@keyframes sxIn{from{opacity:0;transform:translateY(18px)}}
.sx-panel h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(1.8rem,4.5vw,2.5rem);line-height:1.1}
.sx-panel p{color:var(--m);margin-top:12px!important}
.sx-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.sx-list li{display:flex;gap:10px;margin:0}
.sx-list li:before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.sx-dark .sx-list li{color:rgba(255,255,255,.9)}
.sx-panel-m{display:flex;justify-content:center;background:var(--l);border-radius:20px;padding:22px}
.sx-panel-m img{max-height:520px;width:auto;border-radius:22px;box-shadow:0 20px 44px rgba(11,31,51,.18)}
.sx-panel-m img.wide{max-height:none;width:100%;border-radius:12px}
.sx-more{display:inline-block;margin-top:16px;font-weight:600;color:var(--b)!important}
/* demos */
.sx-demo{display:grid;gap:22px}
.sx-card{background:#fff;border-radius:22px;padding:22px;box-shadow:0 18px 44px rgba(11,31,51,.08);color:var(--n)}
.sx-dark .sx-card{background:var(--n2);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.sx-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--ln)}
.sx-dark .sx-row{border-color:rgba(255,255,255,.1)}
.sx-row small{display:block;color:var(--m);font-size:.8rem}
.sx-dark .sx-row small{color:rgba(255,255,255,.6)}
.sx-row.new{animation:sxPop .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes sxPop{from{opacity:0;transform:translateX(-16px) scale(.97);background:rgba(156,194,255,.25)}}
.sx-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px}
.sx-total strong{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:2.6rem;line-height:1}
.sx-seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sx-seg button{border:1px solid var(--ln);background:transparent;color:inherit;border-radius:999px;padding:9px 14px;font:600 .88rem "Instrument Sans",Arial,sans-serif;cursor:pointer}
.sx-dark .sx-seg button{border-color:rgba(255,255,255,.25)}
.sx-seg button[aria-pressed=true]{background:var(--b);border-color:var(--b);color:#fff}
.sx-empty{color:var(--m);padding:18px 0;font-size:.95rem}
.sx-dark .sx-empty{color:rgba(255,255,255,.6)}
.sx-toast{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(22,163,74,.12);color:#15803d;font-weight:600;font-size:.92rem}
.sx-dark .sx-toast{color:#86efac}
.sx-range{margin:16px 0 4px}
.sx-range label{display:flex;justify-content:space-between;font-weight:600;font-size:.94rem}
.sx-range output{color:var(--b);font-weight:700}
.sx-dark .sx-range output{color:var(--sky)}
.sx-range input{width:100%;accent-color:var(--b);margin-top:10px;height:28px}
.sx-bars{display:grid;gap:10px;margin-top:18px}
.sx-barrow{display:grid;grid-template-columns:110px 1fr 90px;gap:10px;align-items:center;font-size:.88rem}
.sx-track{height:12px;border-radius:99px;background:var(--l);overflow:hidden}
.sx-dark .sx-track{background:rgba(255,255,255,.1)}
.sx-fill{height:100%;border-radius:99px;background:var(--b);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.sx-fill.g{background:#16a34a}.sx-fill.o{background:#f59e0b}
.sx-barrow b{text-align:right}
.sx-note{font-size:.82rem;color:var(--m);margin-top:12px!important}
.sx-dark .sx-note{color:rgba(255,255,255,.6)}
/* steps timeline */
.sx-steps{display:grid;gap:16px;counter-reset:s;position:relative}
.sx-step{position:relative;background:#fff;border-radius:20px;padding:22px 22px 22px 70px;box-shadow:0 12px 30px rgba(11,31,51,.06)}
.sx-step:before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:20px;top:20px;font-family:"Instrument Serif",Georgia,serif;font-size:1.8rem;color:var(--b)}
.sx-step p{color:var(--m);margin-top:6px!important}
/* grid of features */
.sx-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sx-tile{background:#fff;border-radius:18px;padding:20px;border:1px solid var(--ln);transition:transform .25s,box-shadow .25s}
.sx-tile:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(11,31,51,.1)}
.sx-tile p{color:var(--m);font-size:.94rem;margin-top:6px!important}
.sx-tile a{color:inherit;text-decoration:none}
/* marquee */
.sx-marq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);margin-top:34px}
.sx-marq-t{display:flex;gap:10px;width:max-content;animation:sxMarq 38s linear infinite}
.sx-marq:hover .sx-marq-t{animation-play-state:paused}
.sx-marq span{flex:none;border-radius:999px;padding:9px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:.9rem;font-weight:500}
@keyframes sxMarq{to{transform:translateX(-50%)}}
/* compare */
.sx-vs{display:grid;gap:16px}
.sx-vs>div{border-radius:22px;padding:24px}
.sx-vs .old{background:#fff;border:1px solid var(--ln)}
.sx-vs .new{background:var(--n);color:#fff}
.sx-vs ul{margin:14px 0 0;padding-left:18px;line-height:1.9}
.sx-vs .old li{color:var(--m);text-decoration:line-through;text-decoration-color:rgba(220,38,38,.5)}
/* kit */
.sx-kit{display:grid;gap:28px;align-items:center}
.sx-kit img{filter:drop-shadow(0 26px 40px rgba(0,0,0,.35))}
/* pricing */
.sx-plans{display:grid;gap:16px}
.sx-plan{background:#fff;border:1px solid var(--ln);border-radius:22px;padding:24px;transition:transform .3s,box-shadow .3s,border-color .3s}
.sx-plan.pick{border-color:var(--b);box-shadow:0 0 0 3px rgba(37,99,235,.2),0 20px 40px rgba(11,31,51,.1);transform:translateY(-4px)}
.sx-plan .amt{font-family:"Instrument Serif",Georgia,serif;font-size:2.6rem;line-height:1;margin-top:8px}
.sx-plan .amt small{font-family:"Instrument Sans",Arial,sans-serif;font-size:.95rem;color:var(--m)}
.sx-plan p{color:var(--m);margin-top:8px!important;font-size:.95rem}
.sx-badge{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--b);border-radius:99px;padding:4px 10px;margin-left:6px;opacity:0;transition:opacity .3s}
.sx-plan.pick .sx-badge{opacity:1}
/* faq */
.sx-faq{max-width:820px;margin:0 auto;display:grid;gap:10px}
.sx-faq details{background:#fff;border-radius:16px;border:1px solid var(--ln);padding:0 20px}
.sx-faq summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:600;position:relative}
.sx-faq summary::-webkit-details-marker{display:none}
.sx-faq summary:after{content:"+";position:absolute;right:0;top:14px;font-size:1.4rem;color:var(--b);transition:transform .25s}
.sx-faq details[open] summary:after{transform:rotate(45deg)}
.sx-faq details p{padding:0 0 18px;color:var(--m)}
/* links + final */
.sx-related{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.sx-related a{display:block;background:#fff;border-radius:18px;padding:20px;border:1px solid var(--ln);text-decoration:none;color:var(--n);transition:transform .25s,border-color .25s}
.sx-related a:hover{transform:translateY(-3px);border-color:var(--b)}
.sx-related b{display:block;font-size:1.05rem}
.sx-related span{color:var(--m);font-size:.92rem}
.sx-final{text-align:center}
.sx-final h2{font-size:clamp(2.2rem,6vw,3.6rem)}
.sx-final p{color:rgba(255,255,255,.8);margin-top:12px!important}
/* sticky mobile dock */
.sx-dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;gap:8px;padding:8px;border-radius:999px;background:rgba(11,31,51,.94);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.3);transform:translateY(140%);transition:transform .35s}
.sx-dock.show{transform:none}
.sx-dock a{flex:1;min-height:46px;font-size:.95rem;padding:0 10px}
/* reveal */
.sx-r{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.sx-r.on{opacity:1;transform:none}
.sx-r.d1{transition-delay:.08s}.sx-r.d2{transition-delay:.16s}.sx-r.d3{transition-delay:.24s}
.no-js .sx-r,.sx-noanim .sx-r{opacity:1;transform:none}
@media (min-width:760px){
 .sx-sec{padding:96px 0}
 .sx-stats{grid-template-columns:repeat(4,1fr)}
 .sx-panel{grid-template-columns:1fr 1fr;padding:36px}
 .sx-demo{grid-template-columns:1fr 1fr}
 .sx-vs,.sx-kit{grid-template-columns:1fr 1fr}
 .sx-plans{grid-template-columns:repeat(3,1fr)}
 .sx-steps{grid-template-columns:repeat(2,1fr)}
 .sx-tabs{margin:0;padding-left:2px;justify-content:center;flex-wrap:wrap}
 .sx-dock{display:none}
}
@media (min-width:980px){.sx-hero{padding:80px 0 100px}.sx-hero-g{grid-template-columns:1.15fr .85fr}.sx-steps.four{grid-template-columns:repeat(4,1fr)}}
@media (max-width:420px){.sx-chip{font-size:.76rem;padding:8px 10px}.sx-chip.c1{left:-2%}.sx-chip.c2{right:-2%}.sx-barrow{grid-template-columns:86px 1fr 76px}}
@media (prefers-reduced-motion:reduce){.sx *,.sx *:before{animation:none!important;transition:none!important}.sx-r{opacity:1;transform:none}.sx-story span{opacity:1}}

/* Product shot cutouts (transparent PNG/WebP, no fake bezel) */
.sx-shot{display:flex;justify-content:center;align-items:center;width:100%}
.sx-shot img{width:min(100%,340px);height:auto;filter:drop-shadow(0 28px 50px rgba(0,0,0,.35))}
.sx-shot.wide img{width:100%;max-width:100%;filter:drop-shadow(0 18px 36px rgba(11,31,51,.14))}
.sx-panel-m .sx-shot img{max-height:540px;width:auto}
.sx-panel-m .sx-shot.wide img{max-height:none;width:100%}
/* Never ship cramped CTAs */
.sx .sx-ctas .sx-btn{white-space:normal;text-align:center;max-width:100%}
.sx-hero .sx-ctas{margin-top:32px;margin-bottom:10px;gap:14px}
.sx-hero .sx-trust{margin-top:30px!important;row-gap:12px}
.sx-dock a.sx-btn{min-height:48px;padding:12px 16px!important;font-size:.95rem}
@media (max-width:759px){
  .sx-w{width:calc(100% - 32px);padding:0}
  .sx-hero{padding:44px 0 56px}
  .sx-hero .sx-ctas{flex-direction:column;align-items:stretch;gap:12px}
  .sx-hero .sx-ctas .sx-btn{width:100%;min-height:56px;padding:16px 24px!important}
  .sx a.sx-btn-g,.sx button.sx-btn-g{padding:14px 22px!important}
  .sx-trust{gap:10px 16px}
  .sx-sec{padding:64px 0}
  .sx-panel{padding:20px}
  .sx-card{padding:20px}
  .sx-dock{left:10px;right:10px;bottom:10px;gap:10px;padding:10px}
}
@media (min-width:760px){
  .sx a.sx-btn,.sx button.sx-btn{padding:16px 30px}
  .sx-ctas{gap:16px}
}


/* ===== Polish pass v5 (beat markdown-body, ResaleOS-level spacing) ===== */
.pv-learn.markdown-body .sx-dark h1,
.pv-learn.markdown-body .sx-dark h2,
.pv-learn.markdown-body .sx-dark h3,
.pv-learn.markdown-body .sx-hero h1,
.pv-learn.markdown-body .sx-final h2,
.markdown-body .sx-dark h1,
.markdown-body .sx-dark h2,
.markdown-body .sx-dark h3,
.markdown-body .sx-hero h1,
.markdown-body .sx-final h2{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.pv-learn.markdown-body .sx-dark p,
.markdown-body .sx-dark p{color:rgba(255,255,255,.86)}
.pv-learn.markdown-body .sx-dark .sx-kick,
.markdown-body .sx-dark .sx-kick,
.pv-learn.markdown-body .sx-hero .sx-kick,
.markdown-body .sx-hero .sx-kick{color:var(--sky)!important}

/* Generous CTA padding (Ryan rule) */
.sx a.sx-btn,.sx button.sx-btn{min-height:56px;padding:16px 28px!important}
.sx a.sx-btn-p,.sx button.sx-btn-p{padding:16px 30px!important}
.sx a.sx-btn-g,.sx button.sx-btn-g{padding:14px 28px!important;border-width:2px!important}
.sx-hero .sx-ctas{margin-top:36px;margin-bottom:12px;gap:16px}
.sx-hero .sx-trust{margin-top:32px!important;row-gap:14px}
.sx-kit .sx-ctas{margin-top:28px;gap:14px}
.sx-kit-h{font-size:clamp(2.1rem,6vw,3.4rem);color:#fff!important;margin-bottom:8px}
.sx-kit-shot img{filter:drop-shadow(0 28px 48px rgba(0,0,0,.45))}
.sx-kit .sx-shot.wide img{background:transparent}
.sx-hero .sx-contact,.sx-hero .sx-sub + p{margin-top:22px!important;color:rgba(255,255,255,.8);font-size:.95rem}

/* Floating chips: contained, softer, no cheap overflow */
.sx-stage{overflow:visible;padding:18px 28px 28px;max-width:420px}
.sx-chip{box-shadow:0 10px 28px rgba(0,0,0,.22);border:1px solid rgba(11,31,51,.06);z-index:2;pointer-events:none}
.sx-chip.c1{top:10%;left:0}.sx-chip.c2{top:44%;right:0;left:auto}.sx-chip.c3{bottom:12%;left:4%}
@media (max-width:759px){
  .sx-stage{padding:12px 16px 20px;max-width:320px}
  .sx-chip{font-size:.78rem;padding:8px 11px;border-radius:12px}
  .sx-chip.c1{left:0;top:8%}.sx-chip.c2{right:0;top:42%}.sx-chip.c3{left:2%;bottom:10%}
  /* Dock must not cover content */
  .sx{padding-bottom:92px}
  .sx-final{padding-bottom:24px}
  .sx-dock a.sx-btn{min-height:48px;padding:12px 18px!important}
}

/* Labels pair under primary panel */
.sx-pair{max-width:340px;margin:36px auto 0}
.sx-pair .sx-shot img{width:100%;filter:drop-shadow(0 18px 36px rgba(11,31,51,.16))}

/* Settlement net row polish */
.sx-netrow{border-top:1px solid var(--ln);padding-top:18px;margin-top:22px;align-items:center}
.sx-netrow .sx-net{color:#16a34a!important;font-size:clamp(2.2rem,5vw,2.8rem)}
.sx-card .sx-list{margin-bottom:4px}

/* POS demo: align columns, better empty contrast */
.sx-dark .sx-empty{color:rgba(255,255,255,.72)!important}
.sx-dark .sx-row small,.sx-dark .sx-cart-count{color:rgba(255,255,255,.65)!important}
.sx-demo .sx-shot{display:flex;justify-content:center}
.sx-demo > .sx-r .sx-shot img{width:min(100%,300px)}

/* Panel media breathing room */
.sx-panel{gap:32px}
.sx-panel-m{padding:28px 24px}
@media (min-width:760px){
  .sx-panel{padding:40px;gap:40px}
  .sx-hero .sx-ctas .sx-btn{min-width:200px}
  .sx-kit{gap:48px}
}

/* Head contrast on light sections */
.sx-head p:not(.sx-kick){color:#3d5166!important}
.sx-light .sx-head p:not(.sx-kick){color:#3d5166!important}

/* Plan badge not colliding */
.sx-plan h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sx-badge{margin-left:0}

/* Reduce chip float animation intensity */
@keyframes sxChip{50%{transform:translateY(-5px)}}
@keyframes sxFloat{50%{transform:translateY(-8px)}}


/* ===== P0 visual QA v6 ===== */
/* Invisible headings on dark cards (markdown-body navy) */
.sx-dark h1,.sx-dark h2,.sx-dark h3,
.sx-vs .new h3,.sx-vs .new h2,.sx-vs .new li,
.sx-final h2,
.sx-hero h1{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.pv-learn.markdown-body .sx-dark h1,
.pv-learn.markdown-body .sx-dark h2,
.pv-learn.markdown-body .sx-dark h3,
.pv-learn.markdown-body .sx-vs .new h3,
.pv-learn.markdown-body .sx-vs .new h2,
.pv-learn.markdown-body .sx-final h2,
.pv-learn.markdown-body .sx-hero h1,
.markdown-body .sx-dark h1,
.markdown-body .sx-dark h2,
.markdown-body .sx-dark h3,
.markdown-body .sx-vs .new h3,
.markdown-body .sx-vs .new h2,
.markdown-body .sx-final h2,
.markdown-body .sx-hero h1{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.sx-vs .new ul,.sx-vs .new li{color:rgba(255,255,255,.92)!important;text-decoration:none!important}

/* Phone cutouts: NO white/light plate behind shots */
.sx-panel-m{
  background:transparent!important;
  padding:8px!important;
  box-shadow:none!important;
}
.sx-panel{
  background:#fff;
}
.sx-shot,.sx-shot img{
  background:transparent!important;
}
.sx-panel-m .sx-shot img{
  filter:drop-shadow(0 22px 40px rgba(11,31,51,.18));
}
.sx-dark .sx-shot img,
.sx-hero .sx-shot img,
.sx-kit .sx-shot img{
  filter:drop-shadow(0 28px 50px rgba(0,0,0,.4));
}

/* Chips: gutters only, below title band (~18% from top of phone) */
.sx-stage{padding:24px 56px 40px;overflow:visible}
.sx-chip{
  max-width:150px;white-space:normal;line-height:1.25;
  box-shadow:0 12px 28px rgba(0,0,0,.2);
  border:1px solid rgba(11,31,51,.08);
  color:#0b1f33!important;
  background:#fff!important;
  z-index:3;
}
.sx-chip b{color:#2563eb!important}
.sx-chip.c1{top:22%;left:0;right:auto;bottom:auto;transform:translateX(-12%)}
.sx-chip.c2{top:48%;right:0;left:auto;bottom:auto;transform:translateX(12%)}
.sx-chip.c3{top:auto;bottom:6%;left:50%;right:auto;transform:translateX(-50%)}

/* Trust: clean column, no ragged 2+1 */
.sx-trust{
  display:flex;flex-direction:column;flex-wrap:nowrap;
  align-items:flex-start;gap:10px!important;
  margin-top:28px!important;
}
.sx-trust li{width:auto}

/* Stats: breathing room under hero (no flush seam) */
.sx-stats{margin-top:0!important;padding-top:8px}
.sx-hero{padding-bottom:72px}
.sx-hero + .sx-sec{padding-top:28px!important;padding-bottom:48px!important;background:linear-gradient(180deg,#0b1f33 0 28px,transparent 28px)}

/* Story contrast */
.sx-story{color:#0b1f33!important}
.sx-story span{opacity:.42}
.sx-story span.on{opacity:1;color:#0b1f33}

/* Tabs: gap, active pill, mobile scroll fade */
.sx-tabs{
  gap:10px;padding:6px 4px 18px;margin-bottom:6px;
  mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent);
}
.sx-tab{
  padding:12px 18px;border-radius:999px;
  box-shadow:0 1px 0 rgba(11,31,51,.04);
}
.sx-tab[aria-selected=true]{
  background:#0b1f33!important;color:#fff!important;
  box-shadow:0 8px 20px rgba(11,31,51,.18);
}
.sx-tab .bar{display:none} /* flat pill, no clipped underline */
[data-tabs] .sx-panel{
  margin-top:4px;
  width:100%;
}
/* Unify all panels (no full-bleed hybrid) */
.sx-panel-m .sx-shot.wide img,
.sx-panel-m img.wide{
  max-height:360px!important;width:auto!important;max-width:100%!important;
  object-fit:contain;border-radius:14px;
}
.sx-panel-m .sx-shot.wide{width:100%}

/* Settlement net spacing */
.sx-netrow{margin-top:28px!important;padding-top:22px!important;gap:16px;flex-wrap:wrap}
.sx-netrow .sx-net{font-size:clamp(2.4rem,6vw,3rem)!important;line-height:1}
.sx-card .sx-list + .sx-netrow{margin-top:28px!important}

/* Wide dashboard readable */
.sx-dash{
  border-radius:16px;overflow:hidden;
  box-shadow:0 20px 44px rgba(11,31,51,.12);
  background:#fff;
}
.sx-dash img{width:100%;height:auto;display:block}

@media (max-width:759px){
  .sx-stage{padding:12px 36px 28px;max-width:300px}
  .sx-chip{font-size:.74rem;padding:8px 10px;max-width:120px}
  .sx-chip.c1{top:24%;left:0;transform:translateX(-8%)}
  .sx-chip.c2{top:50%;right:0;transform:translateX(8%)}
  .sx-chip.c3{bottom:4%;left:50%;transform:translateX(-50%)}
  .sx-hero{padding-bottom:56px}
  .sx-hero + .sx-sec{padding-top:20px!important;background:linear-gradient(180deg,#0b1f33 0 16px,transparent 16px)}
  .sx-tabs{
    margin:0 -16px;padding:6px 16px 16px;
    justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
  }
  .sx-panel-m .sx-shot.wide img,.sx-panel-m img.wide{max-height:220px!important}
  .sx-netrow{flex-direction:column;align-items:flex-start!important;gap:8px}
  .sx-dash{margin:0 -4px}
}
@media (min-width:760px){
  .sx-tabs{
    mask-image:none;-webkit-mask-image:none;
    justify-content:center;flex-wrap:wrap;overflow:visible;
  }
  .sx-stage{padding:28px 64px 44px}
  .sx-chip.c1{transform:translateX(-18%)}
  .sx-chip.c2{transform:translateX(18%)}
}


/* ===== iPhone bezel v7 (shared .sx-phone) ===== */
.sx-phone{
  --bezel:#0a0a0c;
  --bezel-rim:#1c1c1e;
  position:relative;
  display:inline-block;
  width:min(100%,320px);
  padding:10px;
  border-radius:42px;
  background:linear-gradient(160deg,#2a2a2e 0%,var(--bezel) 35%,#000 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(0,0,0,.55),
    0 28px 56px rgba(0,0,0,.38),
    0 8px 18px rgba(0,0,0,.22);
  vertical-align:top;
}
.sx-phone:before{
  /* subtle side button hint */
  content:"";position:absolute;right:-2px;top:22%;width:3px;height:56px;
  border-radius:2px 1px 1px 2px;background:#1a1a1c;opacity:.9;
}
.sx-phone:after{
  /* silent/volume side */
  content:"";position:absolute;left:-2px;top:18%;width:3px;height:28px;
  border-radius:1px 2px 2px 1px;background:#1a1a1c;opacity:.85;
  box-shadow:0 40px 0 #1a1a1c, 0 72px 0 #1a1a1c;
}
.sx-phone img{
  display:block;width:100%;height:auto;
  border-radius:32px;
  background:#fff;
  /* screen sits inside bezel; no outer plate */
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}
/* Dynamic Island */
.sx-phone .sx-island{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:28%;max-width:96px;height:22px;border-radius:14px;
  background:#0a0a0c;z-index:2;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Tablet variant (iPad inventory) */
.sx-tablet{
  position:relative;display:inline-block;width:min(100%,420px);
  padding:14px;border-radius:22px;
  background:linear-gradient(160deg,#2a2a2e 0%,#0a0a0c 40%,#000 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 24px 48px rgba(0,0,0,.32);
}
.sx-tablet img{
  display:block;width:100%;height:auto;border-radius:10px;background:#fff;
}

/* Kill every light plate behind phones */
.sx-panel-m,
.sx-demo > .sx-r,
.sx-stage .sx-shot,
.sx-shot{
  background:transparent!important;
  box-shadow:none!important;
}
.sx-panel-m{
  padding:12px 0!important;
  display:flex;justify-content:center;align-items:center;
  background:transparent!important;
}
.sx-panel{
  /* panel card stays white for copy; media column has no plate */
  overflow:visible;
}
.sx-panel-m .sx-phone,
.sx-demo .sx-phone,
.sx-stage .sx-phone{filter:none}
.sx-hero .sx-phone{
  width:min(100%,300px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 0 0 1px rgba(0,0,0,.5),
    0 36px 70px rgba(0,0,0,.5),
    0 10px 24px rgba(0,0,0,.3);
}
/* Legacy .sx-shot without phone: still no plate; prefer .sx-phone */
.sx-shot{display:flex;justify-content:center;align-items:center;width:100%;background:transparent!important}
.sx-shot > img{filter:drop-shadow(0 24px 40px rgba(0,0,0,.28))}
.sx-kit-shot img,.sx-kit .sx-shot img,.sx-kit .sx-shot.wide img{
  /* product photo cutout, NOT a phone */
  border-radius:0!important;background:transparent!important;
  filter:drop-shadow(0 28px 48px rgba(0,0,0,.45));
  width:100%;max-width:100%;
}
.sx-kit .sx-phone{display:none} /* never frame kit */

/* Stage: chips outside bezel */
.sx-stage{position:relative;display:flex;justify-content:center;padding:28px 64px 44px;max-width:460px;margin:0 auto;width:100%}
.sx-stage .sx-phone{position:relative;z-index:1;animation:sxFloat 6s ease-in-out infinite}
.sx-chip{z-index:4}

@media (max-width:759px){
  .sx-phone{width:min(100%,280px);padding:9px;border-radius:36px}
  .sx-phone img{border-radius:28px}
  .sx-phone .sx-island{top:15px;height:18px;max-width:84px}
  .sx-hero .sx-phone{width:min(100%,260px)}
  .sx-stage{padding:16px 40px 32px;max-width:340px}
  .sx-tablet{width:min(100%,100%);max-width:340px;padding:10px}
}
@media (min-width:980px){
  .sx-hero .sx-phone{width:min(100%,320px)}
  .sx-panel-m .sx-phone{width:min(100%,300px)}
}

/* ===== Printed label stack (cutouts, not a phone) ===== */
.sx-label-stack{
  position:relative;
  width:min(100%,340px);
  height:340px;
  margin:8px auto;
  flex-shrink:0;
}
.sx-label-stack .sx-ll{
  position:absolute;
  left:50%;
  top:50%;
  width:78%;
  height:auto;
  max-height:none!important;
  border-radius:10px!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 14px 22px rgba(11,31,51,.22));
  transform-origin:center center;
  will-change:transform;
}
/* Back → front: gentle fan, tilted */
.sx-label-stack .l4{
  z-index:1;
  transform:translate(-62%,-28%) rotate(-14deg);
  animation:sxLabelDrift 7.2s ease-in-out infinite;
  animation-delay:-1.8s;
}
.sx-label-stack .l3{
  z-index:2;
  transform:translate(-54%,-18%) rotate(-6deg);
  animation:sxLabelDrift 6.6s ease-in-out infinite;
  animation-delay:-.9s;
}
.sx-label-stack .l2{
  z-index:3;
  transform:translate(-46%,-8%) rotate(3deg);
  animation:sxLabelDrift 6.2s ease-in-out infinite;
  animation-delay:-.3s;
}
.sx-label-stack .l1{
  z-index:4;
  transform:translate(-38%,4%) rotate(9deg);
  animation:sxLabelDrift 5.8s ease-in-out infinite;
}
@keyframes sxLabelDrift{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}
/* Override legacy .sx-panel-m img chrome for label cutouts */
.sx-panel-m .sx-label-stack img,
.sx-panel-m .sx-ll{
  max-height:none!important;
  width:78%!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.sx-panel-m:has(.sx-label-stack){
  min-height:340px;
  align-items:center;
}
@media (max-width:759px){
  .sx-label-stack{width:min(100%,280px);height:280px}
  .sx-panel-m:has(.sx-label-stack){min-height:280px}
}
@media (prefers-reduced-motion:reduce){
  .sx-label-stack .sx-ll{animation:none!important}
}