/* Join page (/join). Builds on portal.css (.pub, .hero, .trust, .how, .faq). */
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--signal-soft);text-decoration:underline;cursor:pointer}
#j-code-help .err{font-size:inherit}
/* portal.css's `.hero > *{position:relative}` comes after .hero__glow and pulls the glow into the grid
   as a third cell, pushing the form onto a new row. Keep the glow out of the flow. */
.hero > .hero__glow{position:absolute;z-index:0}
.pills{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.pills li{font-size:12.5px;font-weight:500;padding:4px 12px;border-radius:var(--radius-pill);border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink-soft)}
.pub .how + .sec-h{margin-top:8px}
.join-cta{margin-top:56px;padding:32px 24px;border:1px solid var(--rule-strong);border-radius:var(--radius-md);background:var(--surface);text-align:center;display:grid;justify-items:center;gap:4px}
.join-cta .sec-h{margin-bottom:4px;max-width:28ch;text-wrap:balance}
.join-cta .actions{justify-content:center}
.pub{overflow-x:clip}

/* ---- The selling sections (.math, .feat, .budget-band, .vs, .story) ------------------- */

/* The arithmetic, side by side with the four terms that bound it. */
.math{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center;margin:8px 0 56px;padding:28px;border:1px solid var(--rule-strong);border-radius:var(--radius-md);background:linear-gradient(180deg,var(--lilac),var(--surface))}
.math .sec-h{margin-bottom:10px}
.math p{color:var(--ink-soft);max-width:60ch}
.math p + p{margin-top:10px}
.math__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.math__list li{background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius-md);padding:12px 14px}
.math__list b{display:block;font:600 15px var(--font-mono);letter-spacing:var(--tracking-mono)}
.math__list span{display:block;font-size:12.5px;color:var(--slate);margin-top:2px}

/* A screen from inside the portal next to what it does. */
.feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-bottom:56px}
.feat--flip .shot{order:2}
/* A partner program runs these sections without the screenshots (they are of Tradetron's own
   portal), so the words take the whole column rather than leaving an empty half. */
.feat--solo{grid-template-columns:minmax(0,1fr)}
.feat--solo p,.feat--solo .ticks{max-width:72ch}
.feat h3{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.feat p{color:var(--ink-soft);max-width:54ch}
.shot{border:1px solid var(--rule-strong);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden;line-height:0}
.shot img{width:100%;height:auto;display:block;max-height:460px;object-fit:cover;object-position:top}
.shot--wide img{max-height:none}
.ticks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;color:var(--ink-soft);font-size:13.5px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--positive-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px 11px;background-repeat:no-repeat;background-position:center}
.ticks--lg li{font-size:14.5px}
.ticks--lg b{color:var(--ink)}

/* The production budget: the one thing no other program has, so it gets the band. */
.budget-band{margin:0 0 56px;padding:40px 0;
  /* Full-bleed: .pub is a 1180px column with its own padding, and this band is the page's one
     change of ground. .pub has overflow-x:clip, so the negative margins can't scroll the page. */
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:16px;padding-right:16px;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);background:
  radial-gradient(900px 300px at 15% 0%,color-mix(in oklab,var(--signal) 10%,transparent),transparent 70%),var(--paper-2)}
.budget-band__in{max-width:1148px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.budget-band .sec-h{margin-bottom:12px}
.budget-band .lead{font-size:16px;color:var(--ink-soft);max-width:52ch}

/* Us against the usual program. A table, because that is what it is. */
.vs-wrap{overflow-x:auto;margin-bottom:56px;border:1px solid var(--rule-strong);border-radius:var(--radius-md);background:var(--surface)}
.vs{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.vs th,.vs td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule-grid);vertical-align:top}
.vs thead th{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);background:var(--paper-2);white-space:nowrap}
.vs thead th:last-child{color:var(--signal-soft)}
.vs tbody th{font-weight:600;color:var(--ink);width:150px}
.vs td{color:var(--slate)}
.vs td:last-child{color:var(--ink-soft);background:color-mix(in oklab,var(--signal) 4%,transparent);font-weight:500}
.vs tbody tr:last-child th,.vs tbody tr:last-child td{border-bottom:0}

/* Six years, in four facts. */
.story{margin:0 0 56px}
.story__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.story__grid > div{background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius-md);padding:18px}
.story__grid b{display:block;font:600 17px var(--font-mono);letter-spacing:var(--tracking-mono);margin-bottom:6px}
.story__grid p{color:var(--slate);font-size:13px}

@media (max-width:980px){
  .math,.feat,.budget-band__in{grid-template-columns:minmax(0,1fr);gap:24px}
  .feat--flip .shot{order:0}
  .story__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shot img{max-height:380px}
}
@media (max-width:560px){
  .math{padding:20px}
  .story__grid{grid-template-columns:minmax(0,1fr)}
  .budget-band{padding-top:28px;padding-bottom:28px}   /* not the shorthand: it would drop the band's side gutter */
  .shot img{max-height:300px}
}

/* .btn is nowrap, and the sign-in buttons carry a whole sentence ("Continue with your Tradetron
   account to join"), so on a phone they ran off the panel. In the join panel they wrap instead. */
#join-form .btn--lg{white-space:normal;text-align:center;width:100%;line-height:1.3}