/* Homepage firm table: roomier desktop table (Option A) and card rows on phones (Option B). Scoped to #firmTable. */

/* ---------- Desktop: table with room ---------- */
@media (min-width:1241px){
  #firmTable .ft th.th-pl,#firmTable .ft td.ft-pl{display:none}
  #firmTable .ft tbody tr{height:84px}
  #firmTable .ft tbody td{padding-top:10px;padding-bottom:10px}
  #firmTable .ft tbody td.ft-firm a{height:auto;overflow:visible}
  #firmTable .ft .ft-firm small{width:auto;min-width:0;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;margin-top:2px}
  #firmTable .ft .ft-firm b{font-size:17px}
  #firmTable .ft td[data-l=Deal]{text-align:right;padding-right:0}
  #firmTable .ft td.ft-cta{padding-left:18px;width:1%}
  #firmTable .ft .ft-cta .btn.sm{padding:11px 20px;font-size:15px;border-radius:12px}
  #firmTable .ft .ft-deal{font-size:13px;padding:5px 10px;border-radius:8px}
}

/* ---------- Phones and tablets: card rows ---------- */
@media (max-width:1240px){
  #firmTable .ft tbody{display:flex;flex-direction:column;gap:12px;padding:12px 0}
  #firmTable .ft tbody tr{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;align-items:start;
    padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)
  }
  #firmTable .ft tbody tr:last-child{border-bottom:1px solid var(--line)}
  #firmTable .ft td{gap:4px}
  #firmTable .ft td[data-l]:before{font-size:10.5px;letter-spacing:.1em}

  /* header row: firm on the left, rating on the right */
  #firmTable .ft td.ft-firm{grid-column:1/3;order:1;align-self:center}
  #firmTable .ft .ft-firm b{font-size:17px}
  #firmTable .ft .ft-firm small{max-width:none;margin-top:2px}
  #firmTable .ft td.ft-rt{grid-column:3;order:2;align-items:flex-end;text-align:right}
  #firmTable .ft td.ft-rt:before{display:none}
  #firmTable .ft td.ft-rt .tpl{white-space:nowrap}

  /* stats: two rows of three */
  #firmTable .ft td[data-l="Cost to fund"]{order:3}
  #firmTable .ft td[data-l=Split]{order:4}
  #firmTable .ft td[data-l="Max loss"]{order:5}
  #firmTable .ft td[data-l=Activation]{order:6}
  #firmTable .ft td[data-l=Drawdown]{order:7}
  #firmTable .ft td[data-l="Daily limit"]{order:8}
  #firmTable .ft td.ft-pl{display:none}
  #firmTable .ft td[data-l]{font-size:15px}

  /* footer: deal badge + big button */
  #firmTable .ft td[data-l=Deal]{order:9;grid-column:1;align-self:center;justify-content:center}
  #firmTable .ft td[data-l=Deal]:before{display:none}
  #firmTable .ft .ft-deal{font-size:13px;padding:6px 10px;border-radius:8px}
  #firmTable .ft td.ft-cta{order:10;grid-column:2/-1}
  #firmTable .ft .ft-cta .btn{padding:13px 16px;font-size:16px;border-radius:12px}
  #firmTable .ft td.ft-empty{grid-column:1/-1}
}
@media (max-width:420px){
  #firmTable .ft tbody tr{grid-template-columns:repeat(3,minmax(0,1fr));padding:16px;gap:12px 10px}
}

/* light mode */
:root[data-theme=light] #firmTable .ft tbody tr{height:auto}
@media (min-width:1241px){
  :root[data-theme=light] #firmTable .ft tbody tr{height:84px}
  :root[data-theme=light] #firmTable .ft .ft-cta .btn.sm{padding:10px 18px;font-size:14px}
}
@media (max-width:1240px){
  :root[data-theme=light] #firmTable .ft tbody tr{background:#fff;border-color:#E8E2D3}
  :root[data-theme=light] #firmTable .ft tbody tr:nth-child(even){background:#fff}
  :root[data-theme=light] #firmTable .ft td{padding:0;border:0;font-size:15px}
  :root[data-theme=light] #firmTable .ft .ft-cta .btn{padding:12px 16px;font-size:15px}
}
@media (min-width:1241px){
  :root[data-theme=light] #firmTable .ft tbody td,:root[data-theme=light] #firmTable .ft thead th{vertical-align:middle}
  #firmTable .ft th[data-col=deal]{text-align:right}
  #firmTable .ft th[data-col=deal] .ftsort{margin-left:auto;justify-content:flex-end}
}

/* Deal badge is a label, not a button: only "Get deal" is clickable */
#firmTable .ft .ft-deal-label,:root[data-theme=light] #firmTable .ft .ft-deal-label{
  background:transparent;border:1px solid var(--gold);color:var(--gold2);box-shadow:none;cursor:default}
:root[data-theme=light] #firmTable .ft .ft-deal-label{color:#8A6400;border-color:#C9A227}

/* Long daily-limit text (forex) wraps instead of running into the Deal column */
@media (min-width:1241px){
  #firmTable .ft tbody td[data-l="Daily limit"],#firmTable .ft tbody td[data-l=Drawdown]{white-space:normal;max-width:170px;line-height:1.35}
}

/* No deal: outlined "View firm" so gold always means a deal */
#firmTable .ft .ft-cta .btn.ft-view{background:transparent;border:1px solid var(--line2);color:var(--text);box-shadow:none;font-weight:600}
#firmTable .ft .ft-cta .btn.ft-view:hover{border-color:var(--gold);color:var(--gold)}
:root[data-theme=light] #firmTable .ft .ft-cta .btn.ft-view{background:transparent;border-color:#C9BFA6;color:#2A2A22}

/* Ends-soon banner: brand gold instead of red */
#endsBar.ends{position:relative;border:1px solid rgba(240,190,85,.32);border-left:4px solid var(--gold);background:linear-gradient(90deg,rgba(240,190,85,.12),rgba(240,190,85,.03) 55%,var(--panel));padding:16px 20px 16px 22px}
#endsBar .ends-tag{background:transparent;color:var(--gold);animation:none;padding:0;height:auto;font-weight:700;font-size:13px;letter-spacing:.12em}
#endsBar .ends-t{color:var(--text)}
#endsBar .ends-t b{color:var(--gold2)}
#endsBar .ends-go{white-space:nowrap}
:root[data-theme=light] #endsBar.ends{background:linear-gradient(90deg,rgba(184,130,14,.12),#fff 60%);border-color:#E2CF9A;border-left-color:#B8820E}
:root[data-theme=light] #endsBar .ends-tag{color:#8A6400}

/* Phones: deal shown as a small tag in the card corner, not a button; full-width Get deal */
@media (max-width:1240px){
  #firmTable .ft td.ft-firm{grid-column:1/3;order:1}
  #firmTable .ft td[data-l=Deal]{order:2;grid-column:3;align-self:start;align-items:flex-end;justify-content:flex-start}
  #firmTable .ft td[data-l=Deal]:has(.ft-dim){display:none}
  #firmTable .ft td.ft-rt{order:3;grid-column:1/-1;flex-direction:row;align-items:center;gap:10px;text-align:left;margin-top:-4px}
  #firmTable .ft td.ft-rt .tpl{margin-top:0}
  #firmTable .ft .ft-deal-label,:root[data-theme=light] #firmTable .ft .ft-deal-label{
    background:rgba(240,190,85,.14);border:0;color:var(--gold2);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:6px}
  :root[data-theme=light] #firmTable .ft .ft-deal-label{background:rgba(184,130,14,.12);color:#8A6400}
  #firmTable .ft td.ft-cta{order:10;grid-column:1/-1}
}

/* No neon glow on the table and banner buttons: a faint shadow only */
#firmTable .ft .btn.gold,#firmTable .ft .btn.gold:hover,#endsBar .ends-go{box-shadow:0 1px 2px rgba(0,0,0,.25)!important;filter:none}
:root[data-theme=light] #firmTable .ft .btn.gold,:root[data-theme=light] #firmTable .ft .btn.gold:hover,:root[data-theme=light] #endsBar .ends-go{box-shadow:0 1px 2px rgba(80,60,10,.18)!important}

/* Phones: card look from the 2 Nov screenshot */
@media (max-width:1240px){
  #firmTable .ft tbody{gap:16px}
  #firmTable .ft tbody tr{position:relative;column-gap:0;row-gap:14px;padding:24px 24px 24px;border-radius:18px;background:#1B1E25;border:1px solid rgba(255,255,255,.1)}
  #firmTable .ft td{padding-right:10px}
  /* logo tile, name, plan */
  #firmTable .ft td.ft-firm{grid-column:1/-1;padding-right:96px}
  #firmTable .ft td.ft-firm a{gap:16px;align-items:flex-start}
  #firmTable .ft td.ft-firm .mono-badge{width:56px;height:56px;min-width:56px;border-radius:14px;margin-top:14px;font-size:24px}
  #firmTable .ft td.ft-firm .mono-badge img{width:100%;height:100%;object-fit:contain;border-radius:13px}
  #firmTable .ft .ft-firm b{font-size:21px;font-weight:700;line-height:1.3}
  #firmTable .ft .ft-firm small{font-size:15px;color:var(--dim);margin-top:4px}
  /* stars sit under the plan name */
  #firmTable .ft td.ft-rt{order:3;grid-column:1/-1;padding-left:72px;margin-top:-12px;margin-bottom:6px}
  #firmTable .ft td.ft-rt .tpl{font-size:15px;color:var(--dim)}
  #firmTable .ft td.ft-rt .tpl .star{color:#3DDC84}
  #firmTable .ft td.ft-rt .tpl{font-weight:400}
  /* top-right corner: deal tag, or the score when there is no deal */
  #firmTable .ft td[data-l=Deal]{position:absolute;top:24px;right:24px;padding:0}
  #firmTable .ft td.ft-rt .rbadge{display:none}
  #firmTable .ft tr:not(:has(.ft-deal-label)) td.ft-rt .rbadge{display:inline-flex;position:absolute;top:24px;right:24px;margin:0;
    background:transparent;border:1px solid rgba(255,255,255,.16);color:var(--muted);border-radius:8px;padding:5px 9px;font-family:var(--body);font-size:14px;font-weight:600}
  #firmTable .ft tr:not(:has(.ft-deal-label)) td.ft-rt .rbadge b,#firmTable .ft tr:not(:has(.ft-deal-label)) td.ft-rt .rbadge i{color:var(--muted);font-family:var(--body);font-style:normal;font-size:14px;font-weight:600}
  #firmTable .ft .ft-deal-label,:root[data-theme=light] #firmTable .ft .ft-deal-label{
    font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.03em;padding:6px 11px;border-radius:8px;
    background:rgba(240,190,85,.12);border:1px solid rgba(240,190,85,.45);color:var(--gold2)}
  /* stats */
  #firmTable .ft td[data-l]:before{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--dim);margin-bottom:6px}
  #firmTable .ft td[data-l]{font-family:var(--body);font-size:18px;font-weight:700;color:var(--text)}
  #firmTable .ft td[data-l] .ft-ok{color:var(--text)}
  #firmTable .ft td[data-l="Cost to fund"] .ft-list{display:block;font-size:14px;font-weight:400;color:var(--dim)}
  #firmTable .ft td[data-l="Cost to fund"] .ft-sale{font-size:21px;color:#3DDC84}
  #firmTable .ft td[data-l] .ft-mo{display:inline;font-size:15px;font-weight:400;color:var(--dim);margin-left:5px;letter-spacing:0}
  #firmTable .ft td[data-l] small.ft-mo{white-space:normal}
  #firmTable .ft td[data-l="Cost to fund"],#firmTable .ft td[data-l=Activation]{display:block}
  #firmTable .ft td[data-l="Cost to fund"]:before,#firmTable .ft td[data-l=Activation]:before{display:block}
  /* divider between the two stat rows */
  #firmTable .ft td[data-l=Activation],#firmTable .ft td[data-l=Drawdown],#firmTable .ft td[data-l="Daily limit"]{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;margin-top:6px}
  /* buttons */
  #firmTable .ft td.ft-cta{margin-top:8px;padding-right:0}
  #firmTable .ft .ft-cta .btn{padding:16px;font-size:18px;font-weight:700;border-radius:10px}
  :root:not([data-theme=light]) #firmTable .ft .ft-cta .btn.gold{background:var(--gold);background-image:none;color:#111;border:0}
  #firmTable .ft .ft-cta .btn.ft-view{border-color:rgba(255,255,255,.12);font-weight:600}
}
@media (max-width:420px){
  #firmTable .ft tbody tr{padding:22px 20px;column-gap:0}
  #firmTable .ft td[data-l=Deal],#firmTable .ft tr:not(:has(.ft-deal-label)) td.ft-rt .rbadge{top:22px;right:20px}
}
@media (max-width:1240px){
  :root[data-theme=light] #firmTable .ft tbody tr{background:#fff;border-color:#E8E2D3}
  :root[data-theme=light] #firmTable .ft td[data-l=Activation],:root[data-theme=light] #firmTable .ft td[data-l=Drawdown],:root[data-theme=light] #firmTable .ft td[data-l="Daily limit"]{border-top:1px solid #EEE8DA;padding-top:20px}
  :root[data-theme=light] #firmTable .ft td[data-l=Deal]{padding:0}
  :root[data-theme=light] #firmTable .ft td.ft-rt{padding-left:72px}
  :root[data-theme=light] #firmTable .ft td.ft-firm{padding-right:96px}
  :root[data-theme=light] #firmTable .ft .ft-deal-label{background:rgba(184,130,14,.1);border-color:rgba(184,130,14,.45);color:#8A6400}
  :root[data-theme=light] #firmTable .ft tr:not(:has(.ft-deal-label)) td.ft-rt .rbadge{border-color:#DDD5C2}
  :root[data-theme=light] #firmTable .ft td[data-l="Cost to fund"] .ft-sale{color:#15803D}
  :root[data-theme=light] #firmTable .ft .ft-cta .btn{padding:16px;font-size:18px}
}
@media (max-width:1240px){
  #firmTable .ft td.ft-firm a>span:last-child{min-width:0}
  #firmTable .ft .ft-firm b{white-space:normal;overflow-wrap:break-word}
  #firmTable .ft td.ft-rt{margin-top:-18px}
  #firmTable .ft td[data-l]:before{font-size:12px;letter-spacing:.03em;white-space:nowrap;line-height:1.2}
  #firmTable .ft td[data-l]{font-size:17px;line-height:1.3}
  #firmTable .ft td[data-l] .ft-mo{line-height:1.3}
  #firmTable .ft td[data-l=Activation] .ft-mo{display:block;margin:3px 0 0;font-size:13px}
}
@media (max-width:420px){
  #firmTable .ft td[data-l]:before{font-size:11.5px;letter-spacing:.02em}
  #firmTable .ft td[data-l]{font-size:16px}
}
@media (max-width:1240px){
  #firmTable .ft td.ft-firm a{max-width:100%;height:auto;overflow:visible}
  #firmTable .ft .ft-firm b{font-size:clamp(16px,4.7vw,21px);overflow-wrap:anywhere}
  #firmTable .ft td.ft-firm{padding-right:86px}
  #firmTable .ft td.ft-firm .mono-badge{width:52px;height:52px;min-width:52px;margin-top:10px}
  #firmTable .ft td.ft-firm a{gap:14px}
  #firmTable .ft td.ft-rt{padding-left:66px}
  #firmTable .ft .ft-deal-label,:root[data-theme=light] #firmTable .ft .ft-deal-label{font-size:13px;padding:5px 9px}
  #firmTable .ft td[data-l]:before{white-space:normal}
}
@media (max-width:1240px){:root[data-theme=light] #firmTable .ft td.ft-rt{padding-left:66px}:root[data-theme=light] #firmTable .ft td.ft-firm{padding-right:86px}}
@media (max-width:1240px){
  #firmTable .ft .ft-firm b{font-size:clamp(15px,4.4vw,21px);overflow-wrap:break-word}
  #firmTable .ft td.ft-firm,:root[data-theme=light] #firmTable .ft td.ft-firm{padding-right:90px}
}
@media (max-width:380px){
  #firmTable .ft td.ft-firm .mono-badge{width:44px;height:44px;min-width:44px;border-radius:12px}
  #firmTable .ft td.ft-firm a{gap:12px}
  #firmTable .ft td.ft-rt,:root[data-theme=light] #firmTable .ft td.ft-rt{padding-left:56px}
  #firmTable .ft tbody tr{padding:20px 18px}
  #firmTable .ft td[data-l=Deal],#firmTable .ft tr:not(:has(.ft-deal-label)) td.ft-rt .rbadge{top:20px;right:18px}
}
@media (max-width:1240px){
  #firmTable .ft td[data-l]{display:block}
  #firmTable .ft td[data-l]:before{display:block;margin-bottom:6px}
  #firmTable .ft td[data-l=Deal]{display:flex}
  #firmTable .ft td.ft-rt{display:flex}
}
@media (max-width:1240px){
  #firmTable .ft td.ft-pl{display:none}
  #firmTable .ft td.ft-rt:before,#firmTable .ft td[data-l=Deal]:before{display:none}
  #firmTable .ft td[data-l=Deal]:has(.ft-dim){display:none}
}
@media (max-width:1240px){#firmTable .ft td.ft-rt{margin-top:-10px}#firmTable .ft .ft-firm small{line-height:1.35}}

/* Ends-soon banner: a soft band of gold light sweeps across every 5 seconds */
#endsBar.ends{overflow:hidden;isolation:isolate}
#endsBar.ends::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,215,130,.16) 48%,rgba(255,230,170,.26) 50%,rgba(255,215,130,.16) 52%,transparent 65%);
  transform:translateX(-100%);animation:endsSweep 5s ease-in-out 1s infinite}
@keyframes endsSweep{0%{transform:translateX(-100%)}35%,100%{transform:translateX(100%)}}
#endsBar.ends{animation:endsIn .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes endsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
:root[data-theme=light] #endsBar.ends::after{background:linear-gradient(105deg,transparent 35%,rgba(184,130,14,.10) 48%,rgba(255,236,190,.55) 50%,rgba(184,130,14,.10) 52%,transparent 65%)}
@media (prefers-reduced-motion:reduce){#endsBar.ends,#endsBar.ends::after{animation:none}#endsBar.ends::after{display:none}}