/* Tax-Free Casinos page lists only. Scoped .tf-* classes; theme tokens from the page :root. */

/* 1. Takeaway panels under the "Players in…" headings */
.tf-takeaways{display:grid;gap:8px;margin:4px 0 20px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--alt);background:color-mix(in srgb,var(--primary) 8%,#fff)}
.tf-takeaways li{display:flex;align-items:flex-start;gap:10px;color:var(--ink)}
.tf-icon{flex:none;width:16px;height:16px;margin-top:.3em;color:var(--primary);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 2. Divided checklists: Records Worth Keeping, Safety at Casinos Licensed Abroad */
.tf-checklist{margin:4px 0 20px}
.tf-checklist li{position:relative;padding:10px 0 10px 22px;color:var(--ink)}
.tf-checklist li+li{border-top:1px solid var(--line)}
.tf-checklist li::before{content:"";position:absolute;left:2px;top:calc(10px + .8em - 4px);width:8px;height:8px;border-radius:50%;background:var(--primary)}

/* 3. Step cards: Checks Before Joining Tax-Free Casinos */
.tf-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:8px 0 24px}
.tf-steps li{display:flex;align-items:flex-start;gap:14px;min-width:0;padding:16px;background:#fff;border:1px solid var(--line);border-radius:12px}
.tf-step-num{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;font:600 15px/1 var(--sans)}
.tf-steps .tf-step-text{margin:0;min-width:0;color:var(--ink)}
.tf-step-title{display:block;margin-bottom:4px;font-weight:600;color:var(--ink)}

/* 4. Malta casino examples: logo tile beside name and summary, same card language as the step cards */
.tf-brands{display:grid;gap:16px;margin:8px 0 24px}
.tf-brand{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-areas:"logo name" "logo text";column-gap:20px;row-gap:6px;align-items:start;padding:20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.tf-brand-logo{grid-area:logo;position:relative;display:block;width:120px;height:90px;overflow:hidden;border-radius:10px;border:1px solid var(--line)}
/* The supplied logo files have wide solid margins; enlarge inside the tile (per-logo --logo-zoom) so the mark is legible. */
.tf-brand-logo img{position:absolute;left:calc((1 - var(--logo-zoom,1)) * 50%);top:calc((1 - var(--logo-zoom,1)) * 50%);width:calc(var(--logo-zoom,1) * 100%);height:calc(var(--logo-zoom,1) * 100%);object-fit:cover;max-width:none}
.tf-brand .tf-brand-name{grid-area:name;margin:0;align-self:end}
.tf-brand .tf-brand-text{grid-area:text;margin:0;color:var(--body)}

@media (max-width:640px){
  .tf-brand{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"logo name" "text text";column-gap:14px;row-gap:12px;padding:16px;align-items:center}
  .tf-brand-logo{width:96px;height:72px;border-radius:8px}
  .tf-brand .tf-brand-name{align-self:center}
  .tf-takeaways{padding:16px}
  .tf-steps{grid-template-columns:1fr}
}