/* ================================================================
   SeeThru Trade program suite — frontend styles
   Scoped under .stx-wor.stx-trade (inherits the Worship suite tokens:
   Ink palette, Geist, .btn). Nothing here leaks into Rey.
   ================================================================ */

.stx-wor .trade{background:var(--ink-950);border-bottom:1px solid var(--ink-700);position:relative}
.stx-wor .trade__inner{max-width:var(--container-w);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s-9);align-items:start}

/* copy column */
.stx-wor .trade__title{font-family:var(--font-display);font-size:clamp(34px,4vw,56px);font-weight:400;letter-spacing:-0.03em;line-height:1.04;color:var(--ink-50);max-width:15ch;margin:0}
.stx-wor .trade__title em{font-style:normal;font-weight:400;color:var(--ink-400)}
.stx-wor .trade__lede{margin-top:var(--s-5);font-size:17px;line-height:1.6;color:var(--ink-300);max-width:52ch}
.stx-wor .trade__benefits{margin-top:var(--s-8);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-7);border-top:1px solid var(--ink-700);padding-top:var(--s-6);list-style:none}
.stx-wor .trade__benefits li{min-width:0}
.stx-wor .trade__benefits h3{font-family:var(--font-body);font-size:16px;font-weight:500;letter-spacing:-0.01em;color:var(--ink-50);margin:0 0 6px}
.stx-wor .trade__benefits p{font-size:14.5px;line-height:1.55;color:var(--ink-400);margin:0}
.stx-wor .trade__who{margin-top:var(--s-7);border-top:1px solid var(--ink-700);padding-top:var(--s-5)}
.stx-wor .trade__who h3{font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-400);margin:0 0 10px}
.stx-wor .trade__who p{font-size:15px;line-height:1.6;color:var(--ink-200);margin:0}

/* form card */
.stx-wor .trade__card{background:var(--ink-900);border:1px solid var(--ink-700);border-radius:var(--w2-r);padding:var(--s-6);position:sticky;top:96px}
.stx-wor .trade__card h2{font-family:var(--font-body);font-size:24px;font-weight:500;letter-spacing:-0.02em;line-height:1.15;color:var(--ink-50);margin:0 0 6px}
.stx-wor .trade__card-lede{font-size:14.5px;color:var(--ink-400);margin:0 0 var(--s-5)}
.stx-wor .trade__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.stx-wor .trade__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.stx-wor .trade__field--full{grid-column:1 / -1}
.stx-wor .trade__field label{font-size:13px;font-weight:500;color:var(--ink-300);line-height:1.3;margin:0}
.stx-wor .trade__field label span{color:var(--ink-500);font-weight:400}

/* Rey's global form CSS is strong, so the resets carry !important. */
.stx-wor .trade__field input,
.stx-wor .trade__field select,
.stx-wor .trade__field textarea{
	appearance:none;-webkit-appearance:none;width:100% !important;height:48px;padding:0 14px !important;margin:0 !important;
	background:var(--ink-950) !important;border:1px solid var(--ink-700) !important;border-radius:10px !important;
	color:var(--ink-50) !important;font-family:var(--font-body) !important;font-size:15px !important;line-height:1.3;
	outline:none !important;box-shadow:none !important;transition:border-color var(--dur-fast) var(--ease-out)
}
.stx-wor .trade__field textarea{height:auto;min-height:112px;padding:12px 14px !important;resize:vertical}
.stx-wor .trade__field select{
	padding-right:40px !important;cursor:pointer;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
	background-repeat:no-repeat !important;background-position:right 14px center !important
}
.stx-wor .trade__field select option{background:var(--ink-900);color:var(--ink-50)}
.stx-wor .trade__field input:focus,
.stx-wor .trade__field select:focus,
.stx-wor .trade__field textarea:focus{border-color:var(--ink-400) !important}
.stx-wor .trade__field input::placeholder,
.stx-wor .trade__field textarea::placeholder{color:var(--ink-500);opacity:1}
.stx-wor .trade__field input:-webkit-autofill,
.stx-wor .trade__field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--ink-950) inset !important;-webkit-text-fill-color:var(--ink-50) !important;caret-color:var(--ink-50)}
.stx-wor .trade__field .is-invalid{border-color:var(--signal-err) !important}

.stx-wor .trade__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}
.stx-wor .trade__turnstile{margin-top:var(--s-4)}
.stx-wor .trade__turnstile .cf-turnstile,
.stx-wor .trade__turnstile iframe{max-width:100%}

.stx-wor .trade__actions{margin-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.stx-wor .trade__actions .btn{display:inline-flex !important;width:100%;justify-content:center !important;text-align:center;height:52px;font-size:15px;border-radius:var(--r-pill) !important}
.stx-wor .trade__actions .btn[disabled]{opacity:.6;cursor:wait;transform:none !important}
.stx-wor .trade__note{font-size:12.5px;line-height:1.5;color:var(--ink-500);text-align:center;margin:0}
.stx-wor .trade__error{font-size:14px;line-height:1.5;color:var(--signal-err);text-align:center;margin:0}

.stx-wor .trade__success{padding:var(--s-5) 0 var(--s-3)}
.stx-wor .trade__success h3{font-family:var(--font-body);font-size:24px;font-weight:500;letter-spacing:-0.02em;color:var(--ink-50);margin:0 0 10px}
.stx-wor .trade__success p{font-size:15px;line-height:1.6;color:var(--ink-300);margin:0}

/* responsive */
@media (max-width:1024px){
	.stx-wor .trade__inner{grid-template-columns:1fr;gap:var(--s-8)}
	.stx-wor .trade__card{position:static}
}
@media (max-width:600px){
	.stx-wor .trade__benefits{grid-template-columns:1fr;gap:var(--s-5)}
	.stx-wor .trade__grid{grid-template-columns:1fr}
	.stx-wor .trade__field--full{grid-column:auto}
	.stx-wor .trade__card{padding:var(--s-5)}
	.stx-wor .trade__title{max-width:none}
}