/* ============================================================
   TiffanyLuck (tiffany-luck.com) - site overrides
   Literata headings, Alegreya Sans text, GFS Didot in the logo image.
   Near black ground, dark grey rounded tiles, white type and the
   Tiffany blue of Register, Log in and the word Luck, plus the green
   of the live player dots, all taken from the supplied TiffanyLuck screens.
   Centred column capped at 1120 px.
   ============================================================ */
:root {
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-body: "Alegreya Sans", "Segoe UI", Arial, sans-serif;
  --tl-mint: #81d8d0;
  --tl-mint-2: #a6e5df;
  --tl-mint-deep: #4fb3aa;
  --tl-green: #3ad07a;
  --tl-ink: #0a0e0f;
  --tl-tile: #141b1d;
  --tl-tile-2: #1b2527;
  --tl-line: #263235;
  --tl-text: #d3dbdb;
  --tl-faint: #8f9c9d;
}

body {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--tl-text);
  background: radial-gradient(900px 520px at 85% -200px, rgba(129, 216, 208, 0.10), transparent 70%), var(--color-bg);
}
.container { max-width: 1120px; }

/* ---------- Header: black bar, thin mint rule ---------- */
.site-header.tl-header {
  background: rgba(10, 14, 15, 0.96);
  border-bottom: 1px solid rgba(129, 216, 208, 0.28);
  backdrop-filter: blur(10px);
}
.site-header .site-logo img { height: 40px; width: auto; }
.nav-main--desktop { gap: 4px; }
.nav-main--desktop a {
  font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em;
  padding: 0.42rem 0.9rem; border-radius: 999px; color: #e9efef;
}
.nav-main--desktop a:hover { color: var(--tl-ink); background: var(--tl-mint); }
.btn { font-family: var(--font-body); font-weight: 800; letter-spacing: 0.01em; border-radius: 999px; }
.btn--primary, main a.btn--primary, .tl-register {
  background: var(--tl-mint); color: var(--tl-ink) !important; border: 1px solid var(--tl-mint);
  box-shadow: 0 6px 18px rgba(129, 216, 208, 0.22);
}
.btn--primary:hover, main a.btn--primary:hover { background: var(--tl-mint-2); border-color: var(--tl-mint-2); color: var(--tl-ink) !important; }
.btn--outline { background: transparent; color: #f4f7f7; border: 1px solid #3a4a4f; }
.btn--outline:hover { background: rgba(129, 216, 208, 0.10); color: var(--tl-mint-2); border-color: var(--tl-mint); }

/* ---------- Language switcher ---------- */
.lang-switcher__toggle { border-radius: 999px; border-color: var(--tl-line); }
.tl-code {
  display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--tl-tile-2); border: 1px solid #34444a;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; color: var(--tl-mint);
}
.lang-switcher__toggle .lang-switcher__code { display: none; }
.lang-switcher__menu {
  width: 240px; max-width: 92vw; display: grid !important; grid-template-columns: 1fr; gap: 2px;
  padding: 8px; max-height: 70vh; overflow-y: auto;
  background: var(--tl-tile); border: 1px solid var(--tl-line); border-radius: 16px;
}
.lang-switcher:not(.is-open) .lang-switcher__menu { display: none !important; }
.lang-switcher__menu a { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 7px 10px; }
.lang-switcher__menu li[aria-selected="true"] a { background: rgba(129, 216, 208, 0.12); }
.lang-switcher__menu li[aria-selected="true"] .tl-code { background: var(--tl-mint); color: var(--tl-ink); border-color: var(--tl-mint); }
.nav-mobile__langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.nav-mobile__lang { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; padding: 6px 8px; border-radius: 10px; }
.nav-mobile__lang.is-active { background: rgba(129, 216, 208, 0.12); }

/* ---------- Hero: copy left, glance card right ---------- */
.tl-hero {
  padding: 64px 0 34px; text-align: left; border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(10, 14, 15, 0.97) 0%, rgba(10, 14, 15, 0.82) 58%, rgba(10, 14, 15, 0.45) 100%),
    url("/assets/img/hero-bg.jpg") center / cover no-repeat, var(--color-bg);
}
.tl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.tl-hero .hero__content { max-width: none; margin: 0; text-align: left; align-items: flex-start; display: block; }
.tl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 5px 14px 5px 12px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 700; color: #e9efef; background: var(--tl-tile-2); border: 1px solid var(--tl-line);
}
.tl-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tl-green); box-shadow: 0 0 0 3px rgba(58, 208, 122, 0.18); }
.tl-hero h1 {
  margin: 0 0 18px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.16; color: #ffffff; letter-spacing: -0.005em;
}
.tl-mint { color: var(--tl-mint); }
.tl-hero__lead p { margin: 0; max-width: 62ch; color: #cfd8d8; font-size: 1.1rem; }
.tl-hero__ctas { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.tl-glance { padding: 20px; border-radius: 22px; background: rgba(20, 27, 29, 0.92); border: 1px solid var(--tl-line); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); }
.tl-glance__title { margin: 0 0 14px; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-mint); }
.tl-gl {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tag value" "note value";
  align-items: center; gap: 0 14px; padding: 13px 16px; margin-bottom: 10px; border-radius: 14px;
  background: var(--tl-tile-2); border: 1px solid #2c3a3d;
}
.tl-gl:last-child { margin-bottom: 0; }
.tl-gl__tag { grid-area: tag; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #e9efef; }
.tl-gl__note { grid-area: note; font-size: 0.9rem; color: var(--tl-faint); }
.tl-gl__value { grid-area: value; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--tl-mint); white-space: nowrap; }
.tl-gl--0 { background: linear-gradient(135deg, rgba(129, 216, 208, 0.22), rgba(129, 216, 208, 0.06)); border-color: rgba(129, 216, 208, 0.45); }
.tl-gl--0 .tl-gl__value { font-size: 1.8rem; }
@media (max-width: 920px) {
  .tl-hero { padding: 40px 0 26px; }
  .tl-hero__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Key figures: tiles with a live dot ---------- */
.tl-stats { padding: 22px 0 14px; }
.tl-stats__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tl-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; border-radius: 16px; background: var(--tl-tile); border: 1px solid var(--tl-line); }
.tl-stat__v { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; color: #ffffff; white-space: nowrap; }
.tl-stat__l { position: relative; padding-left: 14px; font-size: 0.86rem; line-height: 1.3; color: var(--tl-faint); }
.tl-stat__l::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 7px; height: 7px; border-radius: 50%; background: var(--tl-green); }
@media (max-width: 1060px) { .tl-stats__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .tl-stats__row { grid-template-columns: repeat(2, 1fr); } .tl-stat__v { font-size: 1.1rem; } }

/* ---------- Sections ---------- */
.content-section { padding: 54px 0 36px; background: transparent; border: 0; }
.content-section--alt { background: #0e1415; border-top: 1px solid #1b2426; border-bottom: 1px solid #1b2426; }
.content-section > .container { max-width: 1120px; }
.content-section h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.22;
  color: #ffffff; margin: 0 0 22px; padding: 0 0 0 18px; border: 0; max-width: none; position: relative;
}
.content-section h2::before { display: none !important; }
.content-section h2::after {
  content: ""; display: block !important; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 5px; border-radius: 4px;
  background: var(--tl-mint);
}
.content-section h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.26rem; line-height: 1.35;
  color: var(--tl-mint); margin: 32px 0 10px; padding: 0; border: 0; text-transform: none;
}
.content-section h3::before { display: none; }
.content-section p { margin-bottom: 1rem; color: var(--tl-text); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.4rem; color: var(--tl-text); }
.content-section ul li::marker { color: var(--tl-mint); }
.content-section a:not(.btn) { color: var(--tl-mint-2); }
@media (max-width: 900px) { .content-section { padding: 38px 0 24px; } }

/* ---------- Supplied artwork beside the text ---------- */
.content-section .section-illus--transparent {
  width: 350px; max-width: 350px; height: auto; background: transparent; box-shadow: none; border-radius: 0;
}
.content-section .section-illus--right { float: right; margin: -14px -12px 8px 26px; }
.content-section .section-illus--left { float: left; margin: -14px 26px 8px -12px; }
.tl-clear { clear: both; }
@media (max-width: 900px) {
  .content-section .section-illus--transparent,
  .content-section .section-illus--right,
  .content-section .section-illus--left { float: none; display: block; width: 300px; max-width: 82%; margin: 0 auto 12px; }
}

/* ---------- Tables: rounded tiles ---------- */
.tl-table-wrap { clear: none; display: flow-root; margin: 24px 0 28px; border: 1px solid var(--tl-line); border-radius: 18px; overflow: hidden; background: var(--tl-tile); }
.tl-table-wrap .tl-table-title {
  margin: 0; padding: 13px 20px; max-width: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; color: #ffffff;
  background: var(--tl-tile-2); border-bottom: 2px solid var(--tl-mint);
}
.tl-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .tl-table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; margin: 0; border: 0; display: table; font-size: 0.98rem; }
.content-section .tl-table-wrap th, .content-section .tl-table-wrap td { padding: 10px 18px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--tl-line); white-space: normal; }
.content-section .tl-table-wrap thead th { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tl-mint); background: var(--tl-tile); }
.content-section .tl-table-wrap tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.content-section .tl-table-wrap tbody tr:last-child td { border-bottom: 0; }
.content-section .tl-table-wrap td:first-child { color: #ffffff; font-weight: 700; }
.tl-table-note { font-size: 0.9rem; color: var(--tl-faint); padding: 12px 20px; margin: 0 !important; border-top: 1px solid var(--tl-line); max-width: none !important; }
@media (max-width: 600px) {
  .content-section .tl-table-wrap table { min-width: 0; table-layout: fixed; font-size: 0.9rem; }
  .content-section .tl-table-wrap th, .content-section .tl-table-wrap td { padding: 9px 10px; overflow-wrap: break-word; hyphens: auto; }
  .content-section .tl-table-wrap th:first-child, .content-section .tl-table-wrap td:first-child { width: 38%; }
}

/* ---------- Numbered steps: mint discs ---------- */
.tl-steps { display: flow-root; counter-reset: tlstep; list-style: none; margin: 16px 0 22px !important; padding: 0; }
.tl-steps li { counter-increment: tlstep; position: relative; padding: 4px 0 4px 50px; margin-bottom: 12px; }
.tl-steps li::before {
  content: counter(tlstep); position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-body); font-weight: 800; font-size: 0.98rem; color: var(--tl-ink); background: var(--tl-mint);
}

/* ---------- FAQ ---------- */
.tl-faq { clear: both; margin: 18px 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.tl-faq details { border: 1px solid var(--tl-line); border-radius: 16px; background: var(--tl-tile); }
.tl-faq summary { cursor: pointer; list-style: none; padding: 14px 48px 14px 18px; position: relative; font-weight: 700; font-size: 1.02rem; color: #ffffff; }
.tl-faq summary::-webkit-details-marker { display: none; }
.tl-faq summary::after {
  content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; background: var(--tl-tile-2); font-size: 1.1rem; line-height: 1; color: var(--tl-mint);
}
.tl-faq details[open] summary::after { content: "\2212"; background: var(--tl-mint); color: var(--tl-ink); }
.tl-faq details p { padding: 0 18px 16px; margin: 0; }
@media (max-width: 760px) { .tl-faq { grid-template-columns: 1fr; } }

/* ---------- Sign-up panel, footer, sticky bar ---------- */
.tl-signup { padding: 50px 0 54px; }
.tl-signup__panel {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px 38px; border-radius: 24px;
  background: radial-gradient(460px 220px at 100% 0%, rgba(129, 216, 208, 0.20), transparent 70%), var(--tl-tile);
  border: 1px solid rgba(129, 216, 208, 0.40);
}
.tl-signup__text h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: #ffffff; border: 0; padding: 0; }
.tl-signup__text p { margin: 0; max-width: 62ch; color: var(--tl-text); }
.tl-signup .btn { flex-shrink: 0; }
@media (max-width: 760px) { .tl-signup__panel { flex-direction: column; align-items: flex-start; padding: 24px 20px; } }
.site-footer.tl-footer { background: #070a0b; border-top: 1px solid #1b2426; }
.site-footer h5 { font-family: var(--font-body); font-weight: 800; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-mint); }
.site-footer .site-logo img { height: 38px; width: auto; }
.footer-badge { border-color: #34444a; border-radius: 999px; color: #e9efef; }
.sticky-cta { border-top: 1px solid rgba(129, 216, 208, 0.40); background: rgba(10, 14, 15, 0.97); }
.sticky-cta__text span:first-child { font-family: var(--font-display); font-weight: 700; color: #ffffff; }
.sticky-cta__bonus { color: var(--tl-mint); font-weight: 700; }

/* ---------- Anchors, mobile header ---------- */
.content-section[id] { scroll-margin-top: 80px; }
@media (max-width: 640px) {
  .site-header .container { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .site-header .site-logo img { height: 30px; }
  .site-header .site-logo { flex-shrink: 0; margin-right: 6px; }
  .nav-toggle { flex-shrink: 0; margin-left: 6px; }
  .btn--mobile-cta { margin-left: auto; font-size: 0.8rem !important; padding: 0.5rem 0.8rem !important; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .sticky-cta__text span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.95rem; line-height: 1.3; }
  .sticky-cta .btn { white-space: nowrap; }
  .tl-gl__value { font-size: 1.3rem; }
  .tl-gl--0 .tl-gl__value { font-size: 1.5rem; }
}
@media (max-width: 380px) { .btn--mobile-cta { font-size: 0.7rem !important; padding: 0.45rem 0.55rem !important; } }

.content-section p, .content-section li, .content-section ul, .content-section ol { max-width: none; }
.content-section h2 { clear: none; overflow: visible; }
.content-section h3 { clear: none; }
.content-section ul, .content-section ol.tl-steps { display: flow-root; padding-left: 1.2rem; margin-left: 0; }
.content-section .tl-clear + h2 { margin-top: 56px; }
.hero h1, .content-section h2, .content-section h3, .tl-signup h2, .tl-table-wrap .tl-table-title { text-transform: none; }