/* For traders — "The phone is the desk." Every selector is scoped to .p-traders. */

.p-traders {
  --tp-frame: #121211;
  --tp-call: #171715; --tp-call-ink: #f4f3ef; --tp-call-dim: rgba(244,243,239,.56);
  --tp-ring: #171715;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-traders { --tp-frame: #000; --tp-call: #0b0b0a; --tp-ring: #1e1d1b; }
}

/* ============ Hero ============ */
.p-traders .tp-hero { padding: var(--space-16) 0 var(--space-24); }
.p-traders .tp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-16); align-items: center; }
.p-traders .tp-hero__text { display: grid; gap: var(--space-8); align-content: center; }
.p-traders .tp-hero__text .mb-eyebrow { margin-bottom: calc(var(--space-2) * -1); }
.p-traders .tp-hero h1 { max-width: 9ch; }
.p-traders .tp-hero .lead { max-width: 40ch; }

/* The three moments beside the phone */
.p-traders .tp-steps { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); max-width: 520px; }
.p-traders .tp-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--line); transition: opacity .35s ease; }
.p-traders .tp-steps time { font: 500 13px/1.6 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.p-traders .tp-steps p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.p-traders .tp-steps b { color: var(--ink); font-weight: 600; }
.p-traders .tp-steps.is-live li { opacity: .4; }
.p-traders .tp-steps.is-live li.is-on { opacity: 1; }
.p-traders .tp-steps.is-live li.is-on time { color: var(--ink); }

/* The key: what AI did, what you decide */
.p-traders .tp-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13.5px; color: var(--ink-2); }
.p-traders .tp-key > span { display: inline-flex; align-items: center; gap: 7px; }
.p-traders .tp-key__rule { flex-basis: 100%; color: var(--muted); }

/* Small marks used in the mocks */
.p-traders .tp-sp { width: 16px; height: 16px; flex: none; display: inline-grid; place-items: center; border-radius: 5px; background: var(--surface-sunk); color: var(--ink-2); }
.p-traders .tp-sp svg { width: 10px; height: 10px; }
.p-traders .tp-you { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper);
  font: 600 10px/1 var(--font-sans); font-style: normal; letter-spacing: .02em; }

/* ============ The phone ============ */
.p-traders .tp-phone { width: 368px; height: 846px; padding: 11px; border-radius: 56px; background: var(--tp-frame);
  box-shadow: var(--shadow-window), 0 0 0 1px var(--line-strong); transition: opacity .45s ease; }
.p-traders .tp-phone.is-fading { opacity: .25; }
.p-traders .tp-phone__screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 45px; background: var(--surface-sunk); color: var(--ink); font-size: 13px; line-height: 1.4; }

.p-traders .tp-status { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 28px; background: var(--surface); font-size: 13px; transition: color .3s ease, background-color .3s ease; }
.p-traders .tp-status b { font-weight: 600; font-variant-numeric: tabular-nums; }
.p-traders .tp-isl { position: absolute; left: 50%; top: 11px; width: 96px; height: 26px; margin-left: -48px; border-radius: 14px; background: var(--tp-frame); }
.p-traders .tp-sig { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.p-traders .tp-sig i { width: 3px; border-radius: 1px; background: currentColor; }
.p-traders .tp-sig i:nth-child(1) { height: 4px; } .p-traders .tp-sig i:nth-child(2) { height: 6px; }
.p-traders .tp-sig i:nth-child(3) { height: 8px; } .p-traders .tp-sig i:nth-child(4) { height: 10px; }

.p-traders .tp-app { display: flex; align-items: center; gap: 10px; padding: 6px 16px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.p-traders .tp-app__ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--ink); color: var(--paper); }
.p-traders .tp-app__ico svg { width: 17px; height: 17px; }
.p-traders .tp-app__name { min-width: 0; }
.p-traders .tp-app__name b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.p-traders .tp-app__name small { display: block; font-size: 12px; color: var(--muted); }
.p-traders .tp-app__tag { margin-left: auto; font: 500 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 7px; border: 1px solid var(--line); border-radius: var(--radius-pill); }

.p-traders .tp-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.p-traders .tp-thread__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }

.p-traders .tp-it { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }

/* The call ending, and what you told Margin afterwards (your own turn, right-aligned) */
.p-traders .tp-sys { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0; border: 0; background: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-traders .tp-sys svg { width: 11px; height: 11px; }
.p-traders .tp-me { justify-self: end; max-width: 90%; display: grid; gap: 4px; padding: 9px 12px 10px; border: 0; border-radius: 16px 16px 4px 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.p-traders .tp-me small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.p-traders .tp-me small svg { width: 11px; height: 11px; }
.p-traders .tp-me p { font-size: 13px; line-height: 1.42; color: var(--ink); }
.p-traders .tp-phone mark { background: none; color: var(--ink); font-weight: 600; box-shadow: inset 0 -5px 0 var(--surface-sunk); }

/* AI cards */
.p-traders .tp-card { padding: 11px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.p-traders .tp-card__h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.p-traders .tp-rows { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.p-traders .tp-rows > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.p-traders .tp-rows dt { font-size: 11.5px; color: var(--muted); }
.p-traders .tp-rows dd { margin: 0; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; transition: opacity .3s ease; }
.p-traders .tp-rows dd > span { white-space: nowrap; }
.p-traders .tp-rows q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 400; font-style: italic; color: var(--muted); quotes: "“" "”"; }

.p-traders .tp-act { position: relative; min-height: 30px; display: grid; }
.p-traders .tp-btn { display: none; place-items: center; height: 32px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; transition: transform .15s ease, background-color .15s ease; }
.p-traders .tp-done { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 2px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.p-traders .tp-undo { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

.p-traders .tp-buyers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.p-traders .tp-buyers li { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.p-traders .tp-av { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-sunk); font: 600 10px/1 var(--font-mono); color: var(--ink-2); }
.p-traders .tp-b { min-width: 0; flex: 1; }
.p-traders .tp-b b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-traders .tp-b small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-traders .tp-ch { flex: none; height: 20px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: 10.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }

.p-traders .tp-price { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--paper); }
.p-traders .tp-price > span { font-size: 11.5px; color: var(--muted); }
.p-traders .tp-price b { margin-left: auto; font: 500 13px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.p-traders .tp-price [data-tp-price] { font-weight: 600; }


.p-traders .tp-typing { display: none; justify-self: start; gap: 4px; padding: 11px 13px; }
.p-traders .tp-typing i, .p-traders .tp-c__wait i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: tp-dot 1s ease-in-out infinite; }
.p-traders .tp-typing i:nth-child(2), .p-traders .tp-c__wait i:nth-child(2) { animation-delay: .15s; }
.p-traders .tp-typing i:nth-child(3), .p-traders .tp-c__wait i:nth-child(3) { animation-delay: .3s; }
@keyframes tp-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

.p-traders .tp-compose { display: flex; align-items: center; gap: 8px; padding: 9px 12px 18px; background: var(--surface); border-top: 1px solid var(--line); }
.p-traders .tp-compose span { flex: 1; height: 38px; display: flex; align-items: center; padding: 0 14px; border-radius: 19px; background: var(--surface-sunk); color: var(--muted); font-size: 13px; }
.p-traders .tp-compose i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); }
.p-traders .tp-compose svg { width: 17px; height: 17px; }

/* The live call screen: only while the phone plays */
.p-traders .tp-call { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 78px 24px 40px; background: var(--tp-call); color: var(--tp-call-ink);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.p-traders .tp-phone.is-calling .tp-call { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.p-traders .tp-phone.is-calling .tp-status { background: var(--tp-call); color: var(--tp-call-ink); }
.p-traders .tp-call__from { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px; font-size: 11.5px; color: var(--tp-call-dim); }
.p-traders .tp-call__from svg { width: 11px; height: 11px; transform: rotate(135deg); }
.p-traders .tp-call__lbl { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--radius-pill); background: rgba(244,243,239,.1); font-size: 12px; color: var(--tp-call-ink); }
.p-traders .tp-call__lbl svg { width: 11px; height: 11px; }
.p-traders .tp-call__who { margin-top: 18px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.p-traders .tp-call__t { margin-top: 4px; font: 400 15px/1 var(--font-mono); color: var(--tp-call-dim); font-variant-numeric: tabular-nums; }
.p-traders .tp-call__lines { list-style: none; margin: 40px 0 0; padding: 0; width: 100%; display: grid; gap: 14px; }
.p-traders .tp-call__lines li { font-size: 16px; line-height: 1.4; color: var(--tp-call-ink); transition: opacity .35s ease, transform .35s ease; }
.p-traders .tp-call__lines li.is-margin { padding-left: 12px; border-left: 2px solid rgba(244,243,239,.3); color: var(--tp-call-dim); }
.p-traders .tp-call__lines small { display: block; margin-bottom: 2px; font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-call-dim); }
.p-traders .tp-call__lines mark { color: var(--tp-call-ink); box-shadow: inset 0 -6px 0 rgba(244,243,239,.16); }
.p-traders .tp-call__end { margin-top: auto; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: rgba(244,243,239,.14); color: var(--tp-call-ink); transition: transform .15s ease, background-color .15s ease; }
.p-traders .tp-call__end i { width: 18px; height: 18px; border-radius: 4px; background: var(--tp-call-ink); }
.p-traders .tp-call__end.is-tap { transform: scale(.9); background: rgba(244,243,239,.28); }

/* Playing: hidden until each piece arrives. Without JS, or with reduced motion, the whole thread shows. */
.p-traders .tp-phone.is-live .tp-it:not(.is-in) { display: none; }
.p-traders .tp-phone.is-live .tp-it.is-in { animation: tp-in .4s cubic-bezier(.2,.7,.2,1) both; }
.p-traders .tp-phone.is-live .tp-typing.is-in { display: inline-flex; }
.p-traders .tp-phone.is-live .tp-rows > div:not(.is-in) dd { opacity: 0; }
.p-traders .tp-phone.is-live .tp-buyers li:not(.is-in) { display: none; }
.p-traders .tp-phone.is-live .tp-buyers li.is-in { animation: tp-in .35s ease both; }
.p-traders .tp-phone.is-live .tp-price:not(.is-in) { display: none; }
.p-traders .tp-phone.is-live .tp-act:not(.is-done) .tp-btn { display: grid; }
.p-traders .tp-phone.is-live .tp-act:not(.is-done) .tp-done { display: none; }
.p-traders .tp-phone.is-live .tp-act.is-tap .tp-btn { transform: scale(.96); background: var(--ink-2); }
.p-traders .tp-phone.is-live .tp-act.is-done .tp-done { animation: tp-in .3s ease both; }
.p-traders .tp-phone.is-live .tp-call__lines li:not(.is-in) { opacity: 0; transform: translateY(6px); }
@keyframes tp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ One morning: the calls strip ============ */
.p-traders .tp-day { padding-top: var(--space-24); }
.p-traders .tp-day__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); align-items: end; margin-bottom: var(--space-12); }
.p-traders .tp-day__head .mb-eyebrow { margin-bottom: var(--space-6); }
.p-traders .tp-day__side { display: grid; gap: var(--space-6); }
.p-traders .tp-day__nav { display: flex; gap: 8px; }
.p-traders .tp-day__nav button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; transition: border-color .15s ease, opacity .15s ease; }
.p-traders .tp-day__nav button:hover { border-color: var(--ink); }
.p-traders .tp-day__nav button[disabled] { opacity: .35; cursor: default; }
.p-traders .tp-day__nav button:first-child svg { transform: rotate(180deg); }
.p-traders .tp-day__nav svg { width: 16px; height: 16px; }

.p-traders .tp-strip { --edge: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter)));
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; outline: none; }
.p-traders .tp-strip::-webkit-scrollbar { display: none; }
.p-traders .tp-strip:focus-visible { box-shadow: inset 0 0 0 2px var(--line-strong); }
.p-traders .tp-strip__in { list-style: none; margin: 0; display: flex; gap: var(--space-4); width: max-content; padding: 0 var(--edge) var(--space-4); }

.p-traders .tp-c { position: relative; scroll-snap-align: start; width: 300px; display: flex; flex-direction: column; padding-top: 30px; }
/* the morning as a line through the cards */
.p-traders .tp-c::before { content: ""; position: absolute; left: 0; right: calc(var(--space-4) * -1); top: 6px; height: 1px; background: var(--line-strong); }
.p-traders .tp-c:last-child::before { right: 50%; }
.p-traders .tp-c::after { content: ""; position: absolute; left: 0; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.p-traders .tp-c__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--space-4); }
.p-traders .tp-c__top time { font: 500 15px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.p-traders .tp-c__kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.p-traders .tp-c__kind svg { width: 13px; height: 13px; }
.p-traders .tp-c__who { font: 500 11px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.p-traders .tp-c__said { flex: 1; margin: 8px 0 var(--space-6); font-size: 19px; line-height: 1.35; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.p-traders .tp-c__to { position: relative; display: grid; gap: 10px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18,18,17,.04); }
.p-traders .tp-c__to::before { content: ""; position: absolute; left: 22px; top: -7px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.p-traders .tp-c__wait { display: none; align-items: center; gap: 4px; height: 44px; font-size: 13px; color: var(--muted); }
.p-traders .tp-c__wait i:last-of-type { margin-right: 6px; }
.p-traders .tp-c__res { display: flex; align-items: center; gap: 12px; }
.p-traders .tp-c__res .app-ico { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.p-traders .tp-c__res .app-ico svg { width: 19px; height: 19px; }
.p-traders .tp-c__res b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.p-traders .tp-c__res b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.p-traders .tp-c__res--warn b::before { background: var(--warn); }
.p-traders .tp-c__res small { display: block; font-size: 13px; color: var(--muted); }
.p-traders .tp-c__you { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.p-traders .tp-c__tool { margin-left: auto; font: 500 10px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.p-traders .tp-c.is-wait .tp-c__wait { display: flex; }
.p-traders .tp-c.is-wait .tp-c__res, .p-traders .tp-c.is-wait .tp-c__you { display: none; }
.p-traders .tp-c.is-done .tp-c__res, .p-traders .tp-c.is-done .tp-c__you { animation: tp-in .4s cubic-bezier(.2,.7,.2,1) both; }

.p-traders .tp-day__foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }

/* ============ Quote ============ */
.p-traders .tp-quote { padding-bottom: var(--space-24); }
.p-traders .tp-quote__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: center; }
.p-traders .tp-quote__photo { aspect-ratio: 4 / 5; }
.p-traders .tp-quote__photo > img { object-position: 42% 40%; }
.p-traders .tp-quote__text { display: grid; gap: var(--space-8); align-content: center; }
.p-traders .tp-quote__q { margin: 0; }
.p-traders .tp-quote__q p { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); text-indent: -.42em; text-wrap: balance; }
.p-traders .tp-quote__who { display: grid; gap: 2px; font-size: 15px; }
.p-traders .tp-quote__who b { color: var(--ink); font-weight: 600; }
.p-traders .tp-quote__who span { color: var(--muted); }

/* ============ Tool line ============ */
.p-traders .tp-tools { padding: 0 0 var(--space-24); }
.p-traders .tp-tools__in { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.p-traders .tp-tools__lbl { flex: none; margin-right: var(--space-4); font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-traders .tp-tools a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-md); text-decoration: none; transition: background-color .15s ease; }
.p-traders .tp-tools a:hover { background: var(--surface-sunk); }
.p-traders .tp-tools .app-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.p-traders .tp-tools .app-ico svg { width: 17px; height: 17px; }
.p-traders .tp-tools b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.p-traders .tp-tools small { display: block; font: 500 10px/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* ============ Closing: an incoming call ============ */
.p-traders .tp-close { padding: var(--space-16) 0 var(--space-12); }
.p-traders .tp-close__in { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-16); align-items: center; }
.p-traders .tp-close__text { display: grid; gap: var(--space-6); }
.p-traders .tp-close .display-xl { font-size: clamp(64px, 11vw, 160px); }
.p-traders .tp-close__mail { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.p-traders .tp-close__mail a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.p-traders .tp-close__mail a:hover { border-color: var(--ink); }
.p-traders .tp-close__mail span { color: var(--muted); }

.p-traders .tp-ring { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 28px 30px; border-radius: 40px; background: var(--tp-ring); color: var(--tp-call-ink); box-shadow: var(--shadow-window); border: 1px solid var(--line); }
.p-traders .tp-ring__lbl { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-call-dim); }
.p-traders .tp-ring__av { position: relative; margin-top: 22px; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--tp-call-ink); color: #121211; font-size: 38px; font-weight: 600; letter-spacing: -0.04em; }
.p-traders .tp-ring__av i { position: absolute; right: 22px; bottom: 24px; width: 8px; height: 8px; border-radius: 50%; background: #b4271c; }
.p-traders .tp-ring.is-ringing .tp-ring__av { animation: tp-ring 2.4s ease-out infinite; }
@keyframes tp-ring { 0% { box-shadow: 0 0 0 0 rgba(244,243,239,.22); } 70%, 100% { box-shadow: 0 0 0 22px rgba(244,243,239,0); } }
.p-traders .tp-ring__who { margin-top: 16px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.p-traders .tp-ring__sub { margin-top: 2px; font-size: 14px; color: var(--tp-call-dim); }
.p-traders .tp-ring__acts { margin-top: 34px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.p-traders .tp-ring__btn { display: grid; justify-items: center; gap: 10px; font-size: 13px; color: var(--tp-call-ink); text-decoration: none; }
.p-traders .tp-ring__btn i { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(244,243,239,.14); transition: transform .15s ease, background-color .15s ease; }
.p-traders .tp-ring__btn svg { width: 24px; height: 24px; }
.p-traders .tp-ring__btn:hover i { transform: scale(1.06); background: rgba(244,243,239,.22); }
.p-traders .tp-ring__btn--yes i { background: var(--ok); color: #fff; }
.p-traders .tp-ring__btn--yes:hover i { background: var(--ok); }
.p-traders .tp-ring__btn:focus-visible { outline: none; }
.p-traders .tp-ring__btn:focus-visible i { outline: 2px solid var(--tp-call-ink); outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-traders .tp-ring__btn--yes i { background: #1b6e40; }
}

.p-traders .tp-others { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: var(--space-24); padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 14px; }
.p-traders .tp-others span { color: var(--muted); margin-right: 4px; }
.p-traders .tp-others a { color: var(--ink-2); text-decoration: none; }
.p-traders .tp-others a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============ Smaller screens ============ */
@media (max-width: 1100px) {
  .p-traders .tp-tools__in { flex-wrap: wrap; }
  .p-traders .tp-tools__lbl { flex-basis: 100%; margin: 0 0 4px 10px; }
  .p-traders .tp-tools a { flex: 1 1 calc(50% - var(--space-2)); }
}
@media (max-width: 960px) {
  .p-traders .tp-hero { padding-top: var(--space-8); }
  .p-traders .tp-hero__grid, .p-traders .tp-day__head, .p-traders .tp-quote__grid, .p-traders .tp-close__in { grid-template-columns: minmax(0, 1fr); }
  .p-traders .tp-hero__grid { gap: var(--space-6); }
  .p-traders .tp-hero__text { display: contents; }
  .p-traders .tp-hero__phone { order: 1; justify-self: center; width: 100%; display: flex; justify-content: center; margin: var(--space-6) 0; }
  .p-traders .tp-steps { order: 2; margin-top: 0; max-width: none; }
  .p-traders .tp-key { order: 3; }
  .p-traders .tp-day__foot { grid-template-columns: minmax(0, 1fr); }
  .p-traders .tp-quote__photo { max-width: 460px; }
  .p-traders .tp-ring { max-width: 380px; width: 100%; }
}
@media (max-width: 560px) {
  .p-traders .tp-phone { width: min(343px, 100%); height: 846px; border-radius: 50px; padding: 9px; }
  .p-traders .tp-phone__screen { border-radius: 41px; }
  .p-traders .tp-c { width: 278px; }
  .p-traders .tp-c__said { font-size: 17.5px; }
  .p-traders .tp-tools a { flex-basis: 100%; }
  .p-traders .tp-day__nav { display: none; }
  .p-traders .tp-ring__acts { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-traders .tp-phone, .p-traders .tp-steps li, .p-traders .tp-ring__btn i { transition: none; }
  .p-traders .tp-typing i, .p-traders .tp-c__wait i, .p-traders .tp-ring__av { animation: none; }
}