/* Classic game landing pages: hubs.css supplies the hero, "In short", FAQ and related links; this adds the two actions,
   the meta row, the free / At Yours Plus pair, numbered rules and the one key table. */
.cl .button.secondary{background:#fff;color:var(--hb-accent);border-color:var(--hb-accent)}
.cl .button.secondary:hover{background:var(--hb-tint)}
.cl-hero .hb-crumbs{margin-bottom:16px}
.cl-hero h1{margin-bottom:14px}
.cl-hero .hb-lede{margin-bottom:24px}
.cl-cta{display:flex;flex-wrap:wrap;gap:12px}
.cl-cta .button{min-height:52px;padding:13px 24px;gap:12px}
.cl-more{margin-top:14px;font-size:15px;font-weight:700}.cl-more a{border-bottom:1px solid currentColor}
.cl-meta{list-style:none;margin:24px 0 0;padding:18px 0 0;border-top:1px solid rgba(32,27,56,.12);display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14.5px;color:#3b3650;max-width:560px}
.cl-meta li{display:flex;align-items:flex-start;gap:8px;line-height:1.4}.cl-meta svg{color:var(--hb-accent);flex:0 0 auto;margin-top:1px}
a.cl-shot{display:block;position:relative;transition:transform .25s,box-shadow .25s}
a.cl-shot:hover{transform:translateY(-3px);box-shadow:0 36px 64px -28px rgba(32,27,56,.5)}
a.cl-shot:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.cl-short{padding-top:48px}
/* Free and At Yours Plus: two calm panels, right under the actions */
.hb .cl-access{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;max-width:1180px;padding-top:40px;padding-bottom:8px}
.cl-tier{border:1px solid var(--line);border-radius:24px;padding:26px 28px 28px;background:#fff}
.cl-tier h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:17px;letter-spacing:-.01em;font-family:var(--body);font-weight:700;color:#4a4560;margin:0 0 16px}
.cl-tag{display:inline-flex;align-items:center;font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.cl-tag.is-free{background:#e6f5ec;color:#145a37;border:1px solid #a6d8bb;border-radius:99px;padding:3px 14px;font-size:17px}
.cl-tier ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cl-tier li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.cl-tier li svg{color:#1f8a5b;margin-top:2px;flex:0 0 auto}
.cl-tier.is-full{background:var(--hb-deep);border-color:var(--hb-deep);color:#fff}
.cl-tier.is-full h3{color:rgba(255,255,255,.75)}.cl-tier.is-full .cl-tag{color:#fff}
.cl-tier.is-full li svg{color:#f2c879}
.cl-host{margin:16px 0 18px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.82)}
.hb .cl-tier.is-full .button{background:#fff;color:var(--ink);border-color:#fff;min-height:48px;padding:11px 24px}
/* How to play: numbered, two columns on wide screens */
.cl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px;max-width:1180px}
.cl-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.cl-n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--hb-accent);color:#fff;font-weight:800;font-size:16px}
.cl-steps h3{font-size:19px;margin:7px 0 6px}
.cl-steps p{font-size:15.5px;color:#3b3650;max-width:540px}
.cl-after{margin-top:28px}
/* The key table */
.hb .cl-rules{padding-top:24px}
.cl-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;max-width:1180px;background:#fff}
.cl-table-wrap:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.cl-table{width:100%;min-width:0;border-collapse:collapse;font-size:15.5px;line-height:1.45}
.cl-table caption{caption-side:bottom;text-align:left;font-size:13px;color:#6a6580;padding:10px 18px 14px;border-top:1px solid var(--line)}
.cl-table th,.cl-table td{padding:14px 18px;text-align:left;vertical-align:top}
.cl-table thead th{background:var(--hb-tint);font-size:14.5px;color:#2f4a40;font-weight:700}
.cl-table tbody tr+tr th,.cl-table tbody tr+tr td{border-top:1px solid var(--line)}
.cl-table tbody th{font-weight:800;min-width:150px;max-width:340px;background:transparent}
.cl-strong td:last-child{font-weight:700}
.cl-table .is-red{color:#b8283a}.cl-table .is-black{color:#1b2833}
.cl-note{margin-top:16px;font-size:15.5px;color:#3b3650;max-width:820px}
.cl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1180px;margin-top:24px}
.cl-cards article{border:1px solid var(--line);border-radius:20px;padding:20px 22px;background:#fff}
.cl-cards h3{font-size:18px;margin-bottom:6px}.cl-cards p{font-size:15px;color:#3b3650}
.cl-faq{padding-top:56px}
@media (prefers-reduced-motion:reduce){a.cl-shot{transition:none}a.cl-shot:hover{transform:none}}
@media (max-width:960px){
 .hb .cl-access{grid-template-columns:1fr}
 .cl-cards{grid-template-columns:1fr}
}
@media (max-width:760px){
 .cl-cta{flex-direction:column;align-items:stretch}.cl-cta .button{width:100%}
 .cl-meta{gap:8px 18px;font-size:14px}
 .cl-tier{padding:22px 20px 24px;border-radius:20px}
 .hb .cl-tier.is-full .button{width:100%}
 .cl-steps{grid-template-columns:1fr;gap:0}
 .cl-steps li{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:14px 0}
 .cl-n{width:36px;height:36px;font-size:15px}.cl-steps h3{font-size:17.5px;margin-top:6px}.cl-steps p{font-size:15px}
 .cl-after .button{width:100%}
 .cl-table{font-size:14px}.cl-table th,.cl-table td{padding:11px 12px}.cl-table thead th{font-size:13.5px}
 .cl-table tbody th{white-space:normal;min-width:96px}
 .cl-table .cl-sm-hide{display:none}
}