/* ============================================================
   Westio (westio.co) - site overrides
   Alfa Slab One headings, Mukta text, Rye in the logo image.
   Charcoal ground, saloon brown cards, cream type, the amber of
   Claim Bonus and Sign in, copper trim and the rust sunset of the
   lobby banner, all taken from the seven supplied Westio screens.
   Centred column, 1140 px. Sunset hero panel with a poster card.
   ============================================================ */
:root {
  --font-display: "Alfa Slab One", Rockwell, "Courier New", serif;
  --font-body: "Mukta", "Segoe UI", Arial, sans-serif;
  --wt-amber: #f6b84a;
  --wt-gold: #facf72;
  --wt-copper: #d09754;
  --wt-copper-2: #a4703f;
  --wt-rust: #4f2c21;
  --wt-rust-2: #4a281a;
  --wt-ink: #141311;
  --wt-on-amber: #2a1608;
  --wt-card: #1b1916;
  --wt-card-2: #23201c;
  --wt-card-3: #2d2822;
  --wt-rule: #3a332b;
  --wt-cream: #f3ead8;
  --wt-text: #ddd2bd;
  --wt-faint: #a89c87;
  --wt-green: #232b23;
}

body {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--wt-text);
  background: var(--wt-ink);
}
.container { max-width: 1140px; }

/* ---------- Header: plank buttons ---------- */
.site-header.wt-header {
  background: rgba(20, 19, 17, 0.96); backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--wt-copper-2);
  box-shadow: 0 1px 0 rgba(250, 207, 114, 0.08) inset;
}
.site-header .site-logo img { height: 34px; width: auto; }
.nav-main--desktop { gap: 4px; }
.nav-main--desktop a {
  position: relative; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 0.36rem 0.78rem; border-radius: 6px; color: var(--wt-cream);
  background: linear-gradient(180deg, var(--wt-card-3), var(--wt-card-2));
  border: 1px solid var(--wt-rule); border-bottom: 2px solid #191612;
}
.nav-main--desktop a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--wt-amber); transform: scaleX(0); transition: transform 0.18s ease;
}
.nav-main--desktop a:hover { color: var(--wt-gold); background: linear-gradient(180deg, #3a3129, var(--wt-card-3)); }
.nav-main--desktop a:hover::after { transform: scaleX(1); }
.btn { font-family: var(--font-body); font-weight: 800; letter-spacing: 0.01em; border-radius: 10px; }
.btn--primary, main a.btn--primary, .wt-register {
  background: linear-gradient(180deg, var(--wt-gold), var(--wt-amber)); color: var(--wt-on-amber) !important;
  border: 1px solid #c98d2c; box-shadow: 0 3px 0 #9b6a24, 0 8px 18px rgba(246, 184, 74, 0.16);
}
.btn--primary:hover, main a.btn--primary:hover { background: var(--wt-gold); border-color: var(--wt-gold); color: var(--wt-on-amber) !important; }
.btn--outline { background: transparent; color: var(--wt-cream); border: 1px solid var(--wt-copper-2); }
.btn--outline:hover { background: rgba(208, 151, 84, 0.12); color: #ffffff; border-color: var(--wt-copper); }

/* ---------- Language switcher: ten languages ---------- */
.lang-switcher__toggle { border-radius: 8px; border-color: var(--wt-rule); background: var(--wt-card-2); }
.wt-code {
  display: inline-grid; place-items: center; min-width: 32px; height: 22px; padding: 0 6px;
  border-radius: 5px; background: var(--wt-rust); border: 1px solid var(--wt-copper-2);
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; color: var(--wt-gold);
}
.lang-switcher__toggle .lang-switcher__code { display: none; }
.lang-switcher__menu {
  width: 380px; max-width: 92vw; display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px;
  padding: 8px; background: var(--wt-card); border: 1px solid var(--wt-copper-2); border-radius: 12px;
  right: 0; left: auto;
}
.lang-switcher:not(.is-open) .lang-switcher__menu { display: none !important; }
.lang-switcher__menu a { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 6px 10px; color: var(--wt-cream); }
.lang-switcher__menu a:hover { background: rgba(246, 184, 74, 0.08); }
.lang-switcher__menu li[aria-selected="true"] a { background: rgba(246, 184, 74, 0.12); }
.lang-switcher__menu li[aria-selected="true"] .wt-code { background: var(--wt-amber); color: var(--wt-on-amber); border-color: var(--wt-amber); }
.nav-mobile { left: auto; }
.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.95rem; padding: 6px 8px; border-radius: 8px; }
.nav-mobile__lang.is-active { background: rgba(246, 184, 74, 0.12); }

/* ---------- Hero: sunset panel inside the column ---------- */
.wt-hero { padding: 30px 0 18px; background: transparent; border: 0; text-align: left; }
.wt-hero__panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; align-items: center;
  padding: 46px 44px; border-radius: 20px; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(20, 19, 17, 0.92) 0%, rgba(20, 19, 17, 0.7) 46%, rgba(20, 19, 17, 0.1) 100%),
    url("/assets/img/hero-bg.jpg") right bottom / cover no-repeat, var(--wt-rust);
  border: 1px solid var(--wt-copper-2); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}
.wt-hero .hero__content { max-width: none; margin: 0; text-align: left; display: block; }
.wt-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 4px 12px; border-radius: 6px;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wt-gold); background: rgba(79, 44, 33, 0.75); border: 1px solid var(--wt-copper-2);
}
.wt-kicker__star { color: var(--wt-amber); font-size: 0.9rem; }
.wt-hero h1 {
  margin: 0 0 18px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 3.1vw, 2.7rem); line-height: 1.16; color: var(--wt-cream); letter-spacing: 0.005em;
}
.wt-gold { color: var(--wt-gold); }
.wt-hero__lead p { margin: 0; max-width: 58ch; color: #e6dcc8; font-size: 1.15rem; }
.wt-hero__ctas { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }

/* Poster card: cream paper, slab type, dashed inner frame */
.wt-poster {
  position: relative; padding: 22px 22px 18px; border-radius: 6px; color: #3a2414;
  background: linear-gradient(170deg, #f6ecd6, #ead8b4); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
  transform: rotate(1.2deg);
}
.wt-poster::before { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(122, 72, 36, 0.45); border-radius: 4px; pointer-events: none; }
.wt-poster__eyebrow { margin: 0 0 4px; text-align: center; font-family: var(--font-body); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #8a4f22; }
.wt-poster__total { margin: 0 0 14px; text-align: center; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; color: #4a281a; }
.wt-poster__list { margin: 0; padding: 0; display: grid; gap: 6px; }
.wt-poster__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 4px; border-top: 1px solid rgba(122, 72, 36, 0.28); }
.wt-poster__row dt { font-size: 0.92rem; font-weight: 600; color: #6b4426; }
.wt-poster__row dd { margin: 0; text-align: right; font-weight: 800; font-size: 0.98rem; line-height: 1.25; color: #2a1608; }
.wt-poster__note { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.4; color: #6b4426; }
@media (max-width: 900px) {
  .wt-hero { padding: 18px 0 10px; }
  .wt-hero__panel { grid-template-columns: 1fr; gap: 26px; padding: 30px 22px; background:
    linear-gradient(180deg, rgba(20, 19, 17, 0.88) 0%, rgba(20, 19, 17, 0.72) 60%, rgba(20, 19, 17, 0.5) 100%),
    url("/assets/img/hero-bg.jpg") 72% bottom / cover no-repeat, var(--wt-rust); }
  .wt-poster { transform: none; }
}

/* ---------- Key figures: one badge strip ---------- */
.wt-stats { padding: 8px 0 18px; }
.wt-stats__row {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--wt-card); border: 1px solid var(--wt-rule); border-radius: 14px; overflow: hidden;
}
.wt-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 10px 12px; border-left: 1px solid var(--wt-rule); }
.wt-stat:first-child { border-left: 0; }
.wt-stat__v { font-family: var(--font-display); font-size: 1.32rem; line-height: 1.2; color: var(--wt-gold); white-space: nowrap; }
.wt-stat__l { font-size: 0.88rem; line-height: 1.25; color: var(--wt-faint); }
@media (max-width: 1000px) {
  .wt-stats__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wt-stat:nth-child(4) { border-left: 0; }
  .wt-stat:nth-child(n+4) { border-top: 1px solid var(--wt-rule); }
}
@media (max-width: 520px) {
  .wt-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wt-stat { border-left: 0; border-top: 1px solid var(--wt-rule); padding: 12px 8px; }
  .wt-stat:nth-child(even) { border-left: 1px solid var(--wt-rule); }
  .wt-stat:nth-child(-n+2) { border-top: 0; }
  .wt-stat__v { font-size: 1.14rem; }
}

/* ---------- Sections ---------- */
.content-section { padding: 52px 0 32px; background: transparent; border: 0; }
.content-section--alt { background: #191714; border-top: 1px solid #2a251f; border-bottom: 1px solid #2a251f; }
.content-section > .container { max-width: 1140px; }
.content-section h2 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.5vw, 2.1rem); line-height: 1.22;
  color: var(--wt-cream); margin: 0 0 22px; padding: 0 0 12px; border: 0; max-width: none; position: relative;
  border-bottom: 2px solid transparent;
  background: linear-gradient(90deg, var(--wt-copper) 0, var(--wt-copper) 64px, var(--wt-rule) 64px, transparent 70%) left bottom / 100% 2px no-repeat;
}
.content-section h2::after { display: none !important; }
.content-section h2::before { content: "\2605" !important; display: inline-block !important; margin-right: 12px; color: var(--wt-amber); font-size: 0.8em; vertical-align: 0.08em; }
.content-section h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.22rem; line-height: 1.34;
  color: var(--wt-gold); margin: 30px 0 10px; padding: 0; border: 0; text-transform: none;
}
.content-section p { margin-bottom: 1rem; color: var(--wt-text); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.4rem; color: var(--wt-text); }
.content-section ul li::marker { color: var(--wt-amber); }
.content-section a:not(.btn) { color: var(--wt-gold); }
.content-section strong { color: #ffffff; }
.wt-callout {
  display: flow-root; margin: 6px 0 20px !important; padding: 14px 18px; border-radius: 10px;
  background: var(--wt-green); border: 1px solid #36443a; border-left: 4px solid var(--wt-amber); color: #e8e3d0 !important;
}
@media (max-width: 900px) { .content-section { padding: 38px 0 22px; } }

/* ---------- Figures row inside Home ---------- */
.wt-figs { margin: 18px 0 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wt-fig { padding: 12px 14px; border-radius: 10px; background: var(--wt-card-2); border: 1px solid var(--wt-rule); border-top: 3px solid var(--wt-copper); }
.wt-fig__v { display: block; font-family: var(--font-display); font-size: 1.24rem; line-height: 1.2; color: var(--wt-gold); }
.wt-fig__l { display: block; font-size: 0.9rem; line-height: 1.3; color: var(--wt-faint); }

/* ---------- Supplied artwork beside the text ---------- */
.content-section .section-illus--transparent {
  width: 250px; max-width: 250px; height: auto; background: transparent; box-shadow: none; border-radius: 0;
}
.content-section .section-illus--right { float: right; margin: 4px 0 14px 32px; }
.content-section .section-illus--left { float: left; margin: 4px 32px 14px 0; }
.wt-clear { clear: both; }
@media (max-width: 1000px) { .wt-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .content-section .section-illus--transparent,
  .content-section .section-illus--right,
  .content-section .section-illus--left { float: none; display: block; width: 220px; max-width: 64%; margin: 0 auto 16px; }
}

/* ---------- Tables: amber head ---------- */
.wt-table-wrap { clear: none; display: flow-root; margin: 22px 0 26px; border: 1px solid var(--wt-rule); border-radius: 12px; overflow: hidden; background: var(--wt-card); }
.wt-table-wrap .wt-table-title {
  margin: 0; padding: 11px 16px; max-width: none;
  font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--wt-cream); background: var(--wt-rust-2);
}
.wt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .wt-table-wrap table { width: 100%; min-width: 480px; border-collapse: collapse; margin: 0; border: 0; display: table; font-size: 1rem; }
.content-section .wt-table-wrap th, .content-section .wt-table-wrap td { padding: 9px 16px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--wt-rule); white-space: normal; }
.content-section .wt-table-wrap tbody tr:last-child td { border-bottom: 0; }
.content-section .wt-table-wrap thead th {
  font-family: var(--font-body); font-size: 0.84rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--wt-on-amber); background: var(--wt-amber);
}
.content-section .wt-table-wrap tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
.content-section .wt-table-wrap tbody tr:hover td { background: rgba(246, 184, 74, 0.06); }
.content-section .wt-table-wrap td:first-child { color: var(--wt-cream); font-weight: 700; }
.wt-table-note { font-size: 0.94rem; color: var(--wt-faint); padding: 10px 16px; margin: 0 !important; border-top: 1px solid var(--wt-rule); max-width: none !important; }
@media (max-width: 600px) {
  .content-section .wt-table-wrap table { min-width: 0; table-layout: fixed; font-size: 0.9rem; }
  .content-section .wt-table-wrap th, .content-section .wt-table-wrap td { padding: 8px 8px; overflow-wrap: break-word; hyphens: auto; }
  .content-section .wt-table-wrap thead th { font-size: 0.74rem; letter-spacing: 0.02em; }
}

/* ---------- Numbered steps: sheriff squares ---------- */
.wt-steps { display: flow-root; counter-reset: wtstep; list-style: none; margin: 14px 0 22px !important; padding: 0; }
.wt-steps li { counter-increment: wtstep; position: relative; padding: 3px 0 6px 46px; margin-bottom: 10px; }
.wt-steps li::before {
  content: counter(wtstep); position: absolute; left: 0; top: 2px; width: 34px; height: 34px;
  display: grid; place-items: center; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-family: var(--font-display); font-size: 0.92rem; color: var(--wt-on-amber); background: var(--wt-amber);
}

/* ---------- FAQ ---------- */
.wt-faq { clear: both; margin: 18px 0 8px; display: grid; gap: 8px; }
.wt-faq details { border: 1px solid var(--wt-rule); border-radius: 10px; background: var(--wt-card); border-left: 3px solid var(--wt-copper-2); }
.wt-faq summary { cursor: pointer; list-style: none; padding: 14px 50px 14px 18px; position: relative; font-weight: 700; font-size: 1.06rem; color: var(--wt-cream); }
.wt-faq summary::-webkit-details-marker { display: none; }
.wt-faq summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 6px; background: var(--wt-card-3); color: var(--wt-amber); font-size: 1.1rem; line-height: 1;
}
.wt-faq details[open] summary::after { content: "\2212"; background: var(--wt-amber); color: var(--wt-on-amber); }
.wt-faq details[open] { border-left-color: var(--wt-amber); }
.wt-faq details p { padding: 0 18px 16px; margin: 0; }

/* ---------- Sign up strip, footer, sticky bar ---------- */
.wt-join { padding: 44px 0 50px; }
.wt-join__panel {
  display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-radius: 16px;
  background: linear-gradient(100deg, #6b3a22 0%, var(--wt-rust) 42%, var(--wt-card) 100%);
  border: 1px solid var(--wt-copper-2);
}
.wt-join__star { flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(20, 19, 17, 0.5); border: 2px solid var(--wt-amber); color: var(--wt-amber); font-size: 1.7rem; line-height: 1; }
.wt-join__text { flex: 1 1 auto; min-width: 0; }
.wt-join__text .wt-join__title { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; color: var(--wt-cream); }
.wt-join__text p { margin: 0; max-width: 64ch; color: #eadfca; }
.wt-join .btn { flex-shrink: 0; }
@media (max-width: 760px) { .wt-join__panel { flex-direction: column; align-items: flex-start; padding: 22px 20px; } }
.site-footer.wt-footer { background: #0e0d0b; border-top: 2px solid var(--wt-copper-2); }
.site-footer h5 { font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: none; color: var(--wt-copper); }
.site-footer .site-logo img { height: 32px; width: auto; }
.footer-badge { border-color: var(--wt-copper-2); border-radius: 6px; color: var(--wt-cream); }
.sticky-cta { border-top: 2px solid var(--wt-copper-2); background: rgba(20, 19, 17, 0.97); }
.sticky-cta__text span:first-child { font-family: var(--font-display); color: var(--wt-cream); }
.sticky-cta__bonus { color: var(--wt-gold); font-weight: 700; }

/* ---------- Anchors, mobile header ---------- */
.content-section[id] { scroll-margin-top: 80px; }
@media (max-width: 1180px) {
  .nav-main--desktop a { padding: 0.32rem 0.56rem; font-size: 0.88rem; }
  .nav-actions .wt-login { display: none; }
}
@media (max-width: 640px) {
  .site-header .container { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .site-header .site-logo img { height: 26px; width: auto; }
  .site-header .site-logo { min-width: 0; flex-shrink: 0; margin-right: 2px; }
  .nav-toggle { flex-shrink: 0; margin-left: 2px; }
  .btn--mobile-cta { margin-left: auto; font-size: 0.82rem !important; padding: 0.45rem 0.85rem !important; white-space: nowrap; max-width: 50vw; 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; }
  .wt-figs { gap: 8px; }
}
@media (max-width: 380px) { .btn--mobile-cta { font-size: 0.72rem !important; padding: 0.42rem 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; display: flow-root; }
.content-section ul, .content-section ol.wt-steps { display: flow-root; padding-left: 1.2rem; margin-left: 0; }
.content-section ol.wt-steps { padding-left: 0; }
.hero h1, .content-section h2, .content-section h3, .wt-table-wrap .wt-table-title { text-transform: none; }