/**
 * TirelessCrew — landing page body.
 * Everything is scoped under .tcl so it cannot collide with Elementor or the
 * theme, and every colour rule uses two classes so the Global Kit
 * (.elementor-kit-N h2 / a — specificity 0-1-1) can never override it.
 */

.tcl{
  --p:#2563EB; --p-h:#1D4ED8; --navy:#0F2E8A; --deep:#081A4D; --acc:#1E90FF;
  --tint:#EFF6FF; --bd:#E2E8F0; --ink:#000; --mut:#3F3F46; --soft:#F7F9FC;
  font-family:'Satoshi','Inter',system-ui,sans-serif;
}

/* ── Sections & rhythm ─────────────────────────────────────────── */
.tcl .tcl-s{padding:96px 24px;width:100%;position:relative}
.tcl .tcl-s--white{background:#fff}
.tcl .tcl-s--tint{background:var(--soft)}
.tcl .tcl-well{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:56px}
@media(max-width:768px){.tcl .tcl-s{padding:56px 20px}.tcl .tcl-well{gap:40px}}

/* ── Type ──────────────────────────────────────────────────────── */
.tcl .tcl-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;max-width:760px;margin:0 auto}
.tcl .tcl-eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p);
}
.tcl .tcl-eyebrow--accent{color:var(--acc)}
.tcl .tcl-h2{
  margin:0;color:var(--ink);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(28px,3.8vw,46px);line-height:1.1;
}
.tcl .tcl-lead{margin:0;color:var(--mut);font-size:clamp(16px,1.4vw,19px);line-height:1.62;max-width:64ch}

/* ── Grids & cards ─────────────────────────────────────────────── */
.tcl .tcl-grid{display:grid;gap:24px;list-style:none;margin:0;padding:0}
.tcl .tcl-grid--3{grid-template-columns:repeat(3,1fr)}
.tcl .tcl-grid--2{grid-template-columns:repeat(2,1fr)}
.tcl .tcl-grid--narrow{max-width:980px;margin:0 auto;width:100%}
@media(max-width:1000px){.tcl .tcl-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.tcl .tcl-grid{grid-template-columns:1fr!important}}

.tcl .tcl-card{
  position:relative;display:flex;flex-direction:column;gap:14px;overflow:hidden;
  background:#fff;border:1px solid var(--bd);border-radius:20px;padding:32px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .22s cubic-bezier(.2,0,0,1),box-shadow .22s cubic-bezier(.2,0,0,1),border-color .22s;
}
.tcl .tcl-card::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;z-index:2;opacity:0;
  background:linear-gradient(90deg,var(--p),var(--acc));transition:opacity .22s;
}
.tcl .tcl-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -18px rgba(15,46,138,.28);border-color:#BFD4FF}
.tcl .tcl-card:hover::before{opacity:1}
.tcl .tcl-card h3{margin:0;color:var(--ink);font-size:21px;font-weight:700;line-height:1.25}
.tcl .tcl-card p{margin:0;color:var(--mut);font-size:16px;line-height:1.62}
.tcl .tcl-card--row{flex-direction:row;gap:18px;align-items:flex-start}
.tcl .tcl-card--row div{display:flex;flex-direction:column;gap:8px}

.tcl .tcl-card--media{padding:0}
.tcl .tcl-card__img{background:linear-gradient(180deg,var(--tint),#fff);border-bottom:1px solid var(--bd);padding:18px}
.tcl .tcl-card__img img{display:block;width:100%;height:172px;object-fit:contain}
.tcl .tcl-card__b{display:flex;flex-direction:column;gap:14px;padding:30px;flex:1}

.tcl .tcl-num{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--p)}
.tcl .tcl-big{
  font-size:54px;font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(135deg,var(--p),var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.tcl .tcl-chip{
  flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:linear-gradient(145deg,var(--p),var(--acc));
  box-shadow:0 8px 18px -6px rgba(37,99,235,.55);
}
.tcl .tcl-chip svg{width:22px;height:22px}
.tcl .tcl-foot{margin-top:auto;padding-top:6px;color:var(--p);font-size:14px;font-weight:600}

/* ── Dark differentiator band ──────────────────────────────────── */
.tcl .tcl-band{
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;
  border-radius:24px;padding:56px;
  background:radial-gradient(760px 320px at 18% 0%, rgba(30,144,255,.38), transparent 62%),
             linear-gradient(160deg,var(--navy),var(--deep));
}
.tcl .tcl-band__t{flex:1 1 460px;display:flex;flex-direction:column;gap:16px}
.tcl .tcl-band h3{margin:0;color:#fff;font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.tcl .tcl-band p{margin:0;color:rgba(255,255,255,.88);font-size:17px;line-height:1.62;max-width:60ch}
.tcl .tcl-band b{color:#fff}
@media(max-width:768px){.tcl .tcl-band{padding:36px 28px;gap:28px}}

/* ── Split ─────────────────────────────────────────────────────── */
.tcl .tcl-split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.tcl .tcl-split--rev .tcl-split__m{order:1}
.tcl .tcl-split--rev .tcl-split__t{order:2}
.tcl .tcl-split__t{display:flex;flex-direction:column;gap:20px}
.tcl .tcl-split__m{position:relative}
.tcl .tcl-split__m img{display:block;width:100%;height:auto;border-radius:20px}
.tcl .tcl-split__m.has-glow::before{
  content:'';position:absolute;inset:10%;z-index:0;border-radius:999px;
  background:radial-gradient(closest-side,rgba(30,144,255,.42),transparent 70%);filter:blur(44px);
}
.tcl .tcl-split__m img{position:relative;z-index:1}
@media(max-width:900px){
  .tcl .tcl-split{grid-template-columns:1fr;gap:36px}
  .tcl .tcl-split__m{order:1!important}.tcl .tcl-split__t{order:2!important}
}

/* ── Ticks & callout ───────────────────────────────────────────── */
.tcl .tcl-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.tcl .tcl-ticks li{display:flex;gap:14px;align-items:flex-start;color:var(--ink);font-size:16px;line-height:1.6}
.tcl .tcl-ticks--sm li{font-size:15px;gap:12px}
.tcl .tcl-tick{
  flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;margin-top:2px;
  border-radius:999px;background:var(--tint);color:var(--p);
}
.tcl .tcl-tick svg{width:13px;height:13px}
.tcl .tcl-callout{
  display:flex;gap:16px;align-items:flex-start;
  background:#fff;border:1px solid var(--bd);border-radius:16px;padding:24px;
}
.tcl .tcl-callout__i{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--tint);color:var(--p)}
.tcl .tcl-callout__i svg{width:18px;height:18px}
.tcl .tcl-callout p{margin:0;color:var(--ink);font-size:16px;line-height:1.6}
.tcl .tcl-callout span{display:block;margin-top:6px;color:var(--mut)}

/* ── Pricing ───────────────────────────────────────────────────── */
.tcl .tcl-price{gap:18px}
.tcl .tcl-price--hi{border:2px solid var(--p);box-shadow:0 22px 48px -18px rgba(37,99,235,.35)}
.tcl .tcl-badge{
  position:absolute;top:-1px;left:32px;transform:translateY(-50%);
  background:linear-gradient(90deg,var(--p),var(--acc));color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.06em;padding:6px 14px;border-radius:999px;
}
.tcl .tcl-amount{display:flex;align-items:baseline;gap:10px;margin:0!important}
.tcl .tcl-amount span{font-size:48px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.tcl .tcl-amount em{font-style:normal;font-size:16px;color:var(--mut)}

/* ── Buttons ───────────────────────────────────────────────────── */
.tcl a.tcl-btn{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  height:52px;padding:0 30px;border-radius:10px;font-size:16px;font-weight:600;
  transition:background .16s,box-shadow .16s,transform .16s;
}
.tcl a.tcl-btn--lg{height:58px;padding:0 38px;font-size:17px}
.tcl a.tcl-btn--primary{
  color:#fff;background:linear-gradient(180deg,#2E6BF0,var(--p));
  box-shadow:0 10px 24px -8px rgba(37,99,235,.65),inset 0 1px 0 rgba(255,255,255,.28);
  margin-top:auto;
}
.tcl a.tcl-btn--primary:hover{color:#fff;background:linear-gradient(180deg,var(--p),var(--p-h));transform:translateY(-1px)}
.tcl a.tcl-btn--white{color:var(--ink);background:#fff;box-shadow:0 14px 34px -12px rgba(0,0,0,.45)}
.tcl a.tcl-btn--white:hover{color:var(--ink);background:var(--tint);transform:translateY(-1px)}
.tcl a.tcl-btn--ghost-dark{color:var(--ink);background:#fff;border:1px solid var(--bd);margin-top:auto}
.tcl a.tcl-btn--ghost-dark:hover{color:var(--ink);background:var(--soft)}
.tcl a.tcl-btn:focus-visible{outline:3px solid var(--acc);outline-offset:3px}

/* ── FAQ ───────────────────────────────────────────────────────── */
.tcl .tcl-faq{max-width:760px;margin:0 auto;width:100%;background:#fff;border:1px solid var(--bd);border-radius:20px;overflow:hidden}
.tcl .tcl-faq details{border-top:1px solid var(--bd)}
.tcl .tcl-faq details:first-child{border-top:0}
.tcl .tcl-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:20px 28px;font-size:17px;font-weight:700;color:var(--ink);list-style:none;
  transition:background .15s;
}
.tcl .tcl-faq summary::-webkit-details-marker{display:none}
.tcl .tcl-faq summary:hover{background:var(--soft)}
.tcl .tcl-plus{color:var(--p);font-size:24px;font-weight:400;line-height:1;transition:transform .2s cubic-bezier(.2,0,0,1)}
.tcl .tcl-faq details[open] .tcl-plus{transform:rotate(45deg)}
.tcl .tcl-faq p{margin:0;padding:0 28px 24px;color:var(--mut);font-size:16px;line-height:1.62}

/* ── Closing CTA ───────────────────────────────────────────────── */
.tcl .tcl-cta{
  padding:112px 24px;
  background:radial-gradient(760px 340px at 50% 0%, rgba(30,144,255,.32), transparent 64%),
             linear-gradient(160deg,var(--navy),var(--deep));
}
.tcl .tcl-cta__in{align-items:center;text-align:center;gap:22px}
.tcl .tcl-cta h2{margin:0;color:#fff;font-size:clamp(32px,4.4vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.08;max-width:16ch}
.tcl .tcl-cta p{margin:0;color:rgba(255,255,255,.88);font-size:19px;line-height:1.6;max-width:52ch}
.tcl .tcl-fine{color:rgba(255,255,255,.6);font-size:14px}
@media(max-width:768px){.tcl .tcl-cta{padding:72px 20px}}

/* ── Motion safety ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .tcl *{transition:none!important;animation:none!important}
}

/* ── Pricing badge clipping fix ─────────────────────────────────
   .tcl-card sets overflow:hidden so the gradient top-bar follows the
   rounded corners. That also clipped the "BUILT FOR YOU" badge, which is
   deliberately positioned half outside the card. Let the pricing cards
   overflow, and give the bar its own radius instead. */
.tcl .tcl-price{overflow:visible}
.tcl .tcl-price::before{border-radius:20px 20px 0 0}
.tcl .tcl-price--hi::before{border-radius:18px 18px 0 0}
.tcl .tcl-badge{
  top:0;left:50%;transform:translate(-50%,-50%);
  white-space:nowrap;z-index:3;
  box-shadow:0 6px 16px -6px rgba(37,99,235,.6);
}
@media(max-width:720px){.tcl .tcl-badge{left:32px;transform:translate(0,-50%)}}

/* ── Use-cases: situation / does / changes ──────────────────────── */
.tcl .tcu-steps{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.tcl .tcu-step{
  display:flex;flex-direction:column;gap:6px;
  padding:18px 20px;background:#fff;border:1px solid var(--bd);
}
.tcl .tcu-step:first-child{border-radius:16px 16px 0 0}
.tcl .tcu-step:last-child{border-radius:0 0 16px 16px}
.tcl .tcu-step + .tcu-step{border-top:0}
.tcl .tcu-step__k{
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
}
.tcl .tcu-step p{margin:0;color:var(--ink);font-size:16px;line-height:1.6}
.tcl .tcu-step--hi{background:var(--tint);border-color:#BFD4FF}
.tcl .tcu-step--hi .tcu-step__k{color:var(--p)}
.tcl .tcu-step--hi p{font-weight:600}

/* ── Trust / permissions matrix ─────────────────────────────────── */
.tcl .tct{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--bd);border-radius:20px;overflow:hidden;background:#fff}
@media(max-width:760px){.tcl .tct{grid-template-columns:1fr}}
.tcl .tct__row{display:flex;gap:16px;padding:26px 28px;border-bottom:1px solid var(--bd)}
.tcl .tct__row:nth-child(odd){border-right:1px solid var(--bd)}
@media(max-width:760px){.tcl .tct__row:nth-child(odd){border-right:0}}
.tcl .tct__row:nth-last-child(-n+2){border-bottom:0}
@media(max-width:760px){.tcl .tct__row{border-bottom:1px solid var(--bd)}.tcl .tct__row:last-child{border-bottom:0}}
.tcl .tct__i{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--p)}
.tcl .tct__i svg{width:19px;height:19px}
.tcl .tct__i--no{background:#FEF2F2;color:#DC2626}
.tcl .tct__b{display:flex;flex-direction:column;gap:6px}
.tcl .tct__b h3{margin:0;font-size:17px;font-weight:700;color:var(--ink);line-height:1.3}
.tcl .tct__b p{margin:0;font-size:15px;line-height:1.6;color:var(--mut)}

/* ── Example jobs table ─────────────────────────────────────────── */
.tcl .tce-jobs{width:100%;border:1px solid var(--bd);border-radius:20px;overflow:hidden;background:#fff}
.tcl .tce-jobs__h,.tcl .tce-jobs__r{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:16px;padding:18px 26px;align-items:center}
.tcl .tce-jobs__h{background:var(--soft);border-bottom:1px solid var(--bd)}
.tcl .tce-jobs__h span{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.tcl .tce-jobs__r{border-bottom:1px solid var(--bd)}
.tcl .tce-jobs__r:last-child{border-bottom:0}
.tcl .tce-jobs__r b{font-size:16px;font-weight:700;color:var(--ink);display:block}
.tcl .tce-jobs__r small{font-size:14px;color:var(--mut);display:block;margin-top:2px}
.tcl .tce-jobs__sz{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
.tcl .tce-bar{display:inline-flex;gap:3px}
.tcl .tce-bar i{width:7px;height:16px;border-radius:2px;background:var(--bd);display:block}
.tcl .tce-bar i.on{background:linear-gradient(180deg,var(--p),var(--acc))}
.tcl .tce-jobs__w{font-size:14px;color:var(--mut)}
@media(max-width:760px){
  .tcl .tce-jobs__h{display:none}
  .tcl .tce-jobs__r{grid-template-columns:1fr;gap:8px;padding:20px}
}
.tcl .tce-note{
  display:flex;gap:14px;align-items:flex-start;margin-top:20px;
  background:var(--tint);border:1px solid #BFD4FF;border-radius:14px;padding:18px 22px;
}
.tcl .tce-note svg{flex:0 0 auto;width:18px;height:18px;color:var(--p);margin-top:2px}
.tcl .tce-note p{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}

/* ── Integration chips ──────────────────────────────────────────── */
.tcl .tce-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tcl .tce-chips span{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--bd);border-radius:999px;
  padding:10px 18px;font-size:15px;font-weight:600;color:var(--ink);
}
.tcl .tce-chips span.is-any{background:var(--tint);border-color:#BFD4FF;color:var(--p)}

/* ── Comparison table ───────────────────────────────────────────── */
.tcl .tcc{width:100%}
.tcl .tcc__scroll{overflow-x:auto;border:1px solid var(--bd);border-radius:20px;background:#fff}
.tcl .tcc__tbl{width:100%;border-collapse:collapse;min-width:720px}
.tcl .tcc__tbl th,.tcl .tcc__tbl td{padding:20px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bd)}
.tcl .tcc__tbl tbody tr:last-child th,.tcl .tcc__tbl tbody tr:last-child td{border-bottom:0}
.tcl .tcc__tbl thead th{background:var(--soft);border-bottom:1px solid var(--bd);vertical-align:bottom}
.tcl .tcc__tbl tbody th{font-size:16px;font-weight:700;color:var(--ink);width:30%}
.tcl .tcc__lbl{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.tcl .tcc__name{display:block;font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.tcl .tcc__pill{
  display:inline-block;margin-bottom:8px;
  background:linear-gradient(90deg,var(--p),var(--acc));color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.08em;padding:5px 11px;border-radius:999px;
}
/* Our column is visually favoured — tinted, bordered, heavier type */
.tcl .tcc__tbl th.tcc__us,.tcl .tcc__tbl td.tcc__us{background:var(--tint);border-left:2px solid var(--p);border-right:2px solid var(--p)}
.tcl .tcc__tbl thead th.tcc__us{border-top:2px solid var(--p);border-radius:14px 14px 0 0}
.tcl .tcc__tbl tbody tr:last-child td.tcc__us{border-bottom:2px solid var(--p);border-radius:0 0 14px 14px}
.tcl .tcc__tbl td.tcc__us .tcc__t{color:var(--ink);font-weight:600}

.tcl .tcc__m{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;vertical-align:middle;margin-right:9px}
.tcl .tcc__m svg{width:12px;height:12px}
.tcl .tcc__m--yes{background:#DCFCE7;color:#15803D}
.tcl .tcc__m--no{background:#FEE2E2;color:#DC2626}
.tcl .tcc__m--part{background:#FEF3C7;color:#B45309}
.tcl .tcc__t{font-size:15px;line-height:1.5;color:var(--mut)}
.tcl .tcc__cap{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--mut);text-align:center}

.tcl .tcc__verdict{
  margin-top:32px;border-radius:20px;padding:36px 40px;
  background:radial-gradient(600px 260px at 20% 0%, rgba(30,144,255,.34), transparent 62%),
             linear-gradient(160deg,var(--navy),var(--deep));
}
.tcl .tcc__verdict h3{margin:0 0 10px;color:#fff;font-size:24px;font-weight:800;letter-spacing:-.02em}
.tcl .tcc__verdict p{margin:0;color:rgba(255,255,255,.9);font-size:17px;line-height:1.62;max-width:70ch}
@media(max-width:760px){
  .tcl .tcc__tbl th,.tcl .tcc__tbl td{padding:16px 14px}
  .tcl .tcc__verdict{padding:28px 24px}
}
