/* Study explorer (assets/study.js): each deal is a glass, its water is the cash paid at completion. */
.sx{position:relative;overflow:hidden;isolation:isolate;border-radius:26px;padding:44px 44px 36px;background:linear-gradient(180deg,#0E2A33 0%,#0c242c 60%,#0a1f26 100%);color:#C7D6D4;box-shadow:0 40px 80px -48px rgba(7,26,32,.75);}
.sx::before{content:'';position:absolute;inset:auto -10% -40% -10%;height:70%;z-index:-1;background:radial-gradient(60% 60% at 50% 0%,rgba(31,163,156,.18),transparent 70%);}
.sx-ey{margin:0;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua,#7FC4BD);}
.sx-h{margin:12px 0 0;font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1.12;color:var(--mist,#F4F1EA);max-width:20ch;}
.sx-p{margin:14px 0 0;font-size:16.5px;line-height:1.6;color:#a9bfbd;max-width:60ch;}

.sx-stage{position:relative;margin-top:34px;height:300px;padding-left:38px;}
.sx-axis{position:absolute;left:0;top:0;bottom:22px;width:30px;font-size:11.5px;color:#7e9698;}
.sx-axis span{position:absolute;left:0;transform:translateY(50%);}
.sx-axis span::after{content:'';position:absolute;left:30px;top:50%;width:calc(100vw);max-width:1100px;border-top:1px dashed rgba(127,196,189,.14);}
.sx-glasses{position:relative;display:flex;align-items:flex-end;gap:clamp(6px,1.2vw,14px);height:100%;overflow:hidden;}
.sx-g{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;}
.sx-glass{position:relative;display:block;width:100%;max-width:46px;height:calc((100% - 22px) * var(--h) / 100);border:1.5px solid rgba(244,241,234,.55);border-top-color:rgba(244,241,234,.25);border-radius:4px 4px 10px 10px;background:linear-gradient(90deg,rgba(244,241,234,.06),rgba(244,241,234,.02) 40%,rgba(244,241,234,.08));overflow:hidden;transition:border-color .3s,transform .3s;}
.sx-water{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#5cc6bc 0%,#1FA39C 60%,#127d78 100%);transition:height 1.4s cubic-bezier(.2,.7,.2,1);}
.sx-water::before{content:'';position:absolute;left:-50%;right:-50%;top:-4px;height:8px;border-radius:50%;background:rgba(159,224,216,.85);}
.sx-in .sx-water{height:var(--w);}
.sx-in .sx-g:nth-child(2) .sx-water{transition-delay:.06s}.sx-in .sx-g:nth-child(3) .sx-water{transition-delay:.12s}.sx-in .sx-g:nth-child(4) .sx-water{transition-delay:.18s}.sx-in .sx-g:nth-child(5) .sx-water{transition-delay:.24s}.sx-in .sx-g:nth-child(6) .sx-water{transition-delay:.3s}.sx-in .sx-g:nth-child(7) .sx-water{transition-delay:.36s}.sx-in .sx-g:nth-child(8) .sx-water{transition-delay:.42s}.sx-in .sx-g:nth-child(9) .sx-water{transition-delay:.48s}.sx-in .sx-g:nth-child(10) .sx-water{transition-delay:.54s}.sx-in .sx-g:nth-child(11) .sx-water{transition-delay:.6s}.sx-in .sx-g:nth-child(12) .sx-water{transition-delay:.66s}.sx-in .sx-g:nth-child(13) .sx-water{transition-delay:.72s}.sx-in .sx-g:nth-child(14) .sx-water{transition-delay:.78s}
.sx-gm{font-size:12px;color:#7e9698;line-height:14px;height:14px;}
.sx-g:hover .sx-glass,.sx-g.on .sx-glass{border-color:#F4F1EA;transform:translateY(-3px);}
.sx-g.on .sx-gm{color:var(--mist,#F4F1EA);font-weight:600;}
.sx-g:focus-visible{outline:none;}
.sx-g:focus-visible .sx-glass{box-shadow:0 0 0 3px rgba(31,163,156,.55);}

.sx-read{margin-top:24px;min-height:128px;padding:20px 22px;border-radius:16px;background:rgba(244,241,234,.05);border:1px solid rgba(127,196,189,.18);}
.sx-read-n{font-weight:600;color:var(--mist,#F4F1EA);font-size:16px;}
.sx-read-n span{display:block;font-weight:400;font-size:13px;color:#7e9698;margin-top:2px;}
.sx-read-v{display:flex;align-items:baseline;gap:14px;margin-top:10px;font-family:'Fraunces',serif;font-weight:600;}
.sx-headline{font-size:28px;color:#7e9698;text-decoration:line-through;text-decoration-thickness:2px;}
.sx-arrow{color:#7e9698;font-size:20px;}
.sx-cashv{font-size:34px;color:#9fe0d8;}
.sx-read p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:#a9bfbd;}
.sx-read a{color:var(--aqua,#7FC4BD);text-decoration:underline;text-underline-offset:3px;}

.sx-try{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;margin-top:28px;padding-top:28px;border-top:1px solid rgba(127,196,189,.18);align-items:start;}
.sx-try-h{margin:0 0 12px;font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--mist,#F4F1EA);}
.sx-try-in label{display:block;font-size:13.5px;font-weight:500;color:#C7D6D4;margin-bottom:7px;}
.sx-money{position:relative;display:block;}
.sx-money::before{content:'S$';position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#7e9698;font-size:15px;pointer-events:none;}
.sx-money input{font:inherit;font-size:16px;color:var(--marine,#0E2A33);background:#fff;border:1px solid rgba(127,196,189,.4);border-radius:10px;height:50px;width:100%;padding:0 12px 0 36px;}
.sx-money input:focus{outline:none;border-color:var(--teal,#1FA39C);box-shadow:0 0 0 3px rgba(31,163,156,.3);}
.sx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "b b" "n n";gap:4px 12px;margin-bottom:14px;}
.sx-row-l{grid-area:l;font-size:14px;color:#C7D6D4;}
.sx-row-v{grid-area:v;font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--mist,#F4F1EA);}
.sx-row-bar{grid-area:b;height:8px;border-radius:999px;background:rgba(127,196,189,.14);overflow:hidden;}
.sx-row-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3fb3aa,#9fe0d8);transition:width .6s cubic-bezier(.2,.7,.2,1);}
.sx-row-n{grid-area:n;font-size:12px;color:#7e9698;letter-spacing:.03em;}
.sx-try-note{margin:4px 0 0;font-size:13px;line-height:1.5;color:#7e9698;}

.sx-next{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 32px;align-items:start;margin-top:28px;padding-top:24px;border-top:1px solid rgba(127,196,189,.18);}
.sx-next > .btn{align-self:start;}
.sx .rp{margin:0;}
.sx .rp-h{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua,#7FC4BD);}
.sx .rp-p{margin-top:6px;font-size:13.5px;color:#a9bfbd;line-height:1.5;}
.sx .rp-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:12px;}
.sx .rp-btns .btn{border:0;cursor:pointer;font-family:inherit;}
.sx .rp-wa{color:var(--aqua,#7FC4BD);font-size:14.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px;}
.sx .rp-form[hidden]{display:none;}
.sx .rp-form{display:flex;flex-direction:column;gap:12px;margin-top:14px;max-width:440px;}
.sx .rp-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:#C7D6D4;}
.sx .rp-form label span{color:#7e9698;}
.sx .rp-form input[type=text],.sx .rp-form input[type=email],.sx .rp-form input[type=tel]{font:inherit;font-size:15px;color:var(--marine,#0E2A33);background:#fff;border:1px solid rgba(127,196,189,.4);border-radius:10px;padding:10px 12px;}
.sx .rp-form input:focus{outline:none;border-color:var(--teal,#1FA39C);box-shadow:0 0 0 3px rgba(31,163,156,.25);}
.sx .rp-form .rp-consent{flex-direction:row;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;}
.sx .rp-form .rp-consent input{margin-top:3px;accent-color:var(--teal,#1FA39C);}
.sx .rp-form .rp-consent span{color:#a9bfbd;}
.sx .rp-form .rp-consent a{color:var(--aqua,#7FC4BD);text-decoration:underline;}
.sx .rp-form .btn{border:0;cursor:pointer;font-family:inherit;align-self:flex-start;}
.sx .rp-form .btn[disabled]{opacity:.6;cursor:default;}
.sx .rp-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}
.sx .rp-status{font-size:13.5px;color:#E7B9A6;min-height:1em;}
.sx .rp-done{font-size:14.5px;color:var(--mist,#F4F1EA);}

@media (max-width:900px){
  .sx{padding:30px 22px 26px;border-radius:22px;}
  .sx-try,.sx-next{grid-template-columns:1fr;}
  .sx-stage{height:240px;padding-left:30px;}
  .sx-axis{width:24px;}
}
@media (max-width:520px){
  .sx-gm{font-size:11px;visibility:hidden;white-space:nowrap;}
  .sx-g.on .sx-gm{visibility:visible;}
  .sx-glasses{gap:4px;}
  .sx-glass{border-width:1px;border-radius:3px 3px 7px 7px;}
  .sx-headline{font-size:22px;}.sx-cashv{font-size:28px;}
}
@media (prefers-reduced-motion:reduce){ .sx-water,.sx-row-bar i,.sx-glass{transition:none !important;} }
