/* ---------------------------------------------------------------
   COMPONENTS — Jackpot Checklist
   Newspaper-style archetype, small-caps labels, single tangerine
   accent, 2px solid borders on key elements, rounded showcase cards.
--------------------------------------------------------------- */

/* ===== layout ===== */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.container--narrow{ max-width: var(--container-narrow); }

.section{ padding: var(--sp-8) 0; }
.section--tight{ padding: var(--sp-6) 0; }
.section--band{ background: var(--bg-band); }
.section--teal{ background: var(--teal-deep); color: var(--bg); }
.section--teal h1, .section--teal h2, .section--teal h3{ color: var(--bg); }
.section--teal p{ color: #D6E3DF; }

.eyebrow{
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-deep);
  display: block;
  margin-bottom: var(--sp-3);
}
.section--teal .eyebrow{ color: var(--accent); }

.mono{ font-family: var(--font-mono); }
.rule-top{ border-top: 2px solid var(--line-strong); padding-top: var(--sp-6); }

/* ===== age notice bar (persistent, non-blocking) ===== */
.age-bar{
  background: var(--teal-deep);
  color: #E8F0EE;
  font-family: var(--font-label);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}
.age-bar__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.age-bar__badge{
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.age-bar__text{ flex: 1 1 320px; margin: 0; }
.age-bar a{ color: #EFCBAE; font-weight: 700; }
.age-bar a:hover{ color: var(--accent); }
.age-bar__close{
  background: none;
  border: 1px solid #3B5A57;
  color: #E8F0EE;
  border-radius: 4px;
  padding: 3px 9px;
  font-family: var(--font-label);
  font-size: 0.78rem;
}
.age-bar__close:hover{ border-color: var(--accent); color: var(--accent); }
.age-bar[hidden]{ display: none; }

/* ===== masthead / header ===== */
.masthead{
  background: var(--bg);
  border-bottom: 2px solid var(--line-strong);
}
.masthead__top{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.brand{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--teal-deep);
}
.brand:hover{ color: var(--teal-deep); }
.brand__mark{ width: 42px; height: 42px; flex-shrink: 0; }
.brand__name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand__tagline{
  display: block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}
.masthead__meta{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: right;
  display: none;
}
@media (min-width: 720px){ .masthead__meta{ display: block; } }

.nav{
  border-top: 1px solid var(--line);
}
.nav__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  font-family: var(--font-label);
}
.nav__list a{
  color: var(--teal-deep);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.86rem;
}
.nav__list a:hover{ color: var(--accent-deep); }
.nav__toggle{
  display: none;
  border: 2px solid var(--line-strong);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin-left: auto;
}
/* Without JS: nav stays fully visible, stacked on narrow screens, no toggle. */
@media (max-width: 780px){
  .nav__list{ width: 100%; flex-direction: column; gap: var(--sp-3); }
}
/* With JS (html.js added by an early inline script): collapse behind a toggle on narrow screens. */
@media (max-width: 780px){
  html.js .nav__toggle{ display: inline-flex; }
  html.js .nav__list{ display: none; padding-top: var(--sp-3); }
  html.js .nav[data-open="true"] .nav__list{ display: flex; }
}

/* ===== buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  transition: transform 120ms var(--ease), background 120ms var(--ease), box-shadow 120ms var(--ease);
}
.btn:hover{ background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
.btn:active{ transform: scale(0.97); }
.btn--ghost{
  background: transparent;
  color: var(--teal-deep);
  border-color: var(--line-strong);
}
.btn--ghost:hover{ background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.btn--small{ padding: var(--sp-2) var(--sp-4); font-size: 0.8rem; }
.btn--block{ width: 100%; justify-content: center; }

/* ===== links with chevron / info style ===== */
.link-info{
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--teal-deep);
}
.link-info:hover{ color: var(--accent-deep); }

/* ===== badges ===== */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--accent-deep);
  color: var(--accent-deep);
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
}
.badge--muted{ border-color: var(--ink-soft); color: var(--ink-soft); }

/* ===== hero ===== */
.hero{
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/hero-arcs.svg");
  background-repeat: no-repeat;
  background-position: right -80px top -60px;
  background-size: 620px;
  opacity: 0.55;
  pointer-events: none;
}
.hero__inner{
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-7);
}
.hero__lede{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--teal-deep);
  max-width: 62ch;
  font-weight: 500;
}
.hero__note{
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--line-strong);
}
.hero__note-item{
  font-family: var(--font-label);
  font-size: 0.86rem;
  color: var(--ink-soft);
  max-width: 34ch;
}
.hero__note-item strong{ color: var(--teal-deep); display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }

.page-hero{
  padding: var(--sp-7) 0 var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.page-hero p{ font-size: 1.1rem; color: var(--ink-soft); }

/* ===== stats strip ===== */
.stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-top: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
}
.stat__value{
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-deep);
  display: block;
}
.stat__label{
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ===== disclosure note ===== */
.disclosure{
  font-family: var(--font-label);
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-left: 4px solid var(--accent);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-band);
  max-width: 68ch;
}
.disclosure strong{ color: var(--teal-deep); }

/* ===== ranked showcase ===== */
.showcase{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.op-card{
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg-raised);
  overflow: hidden;
}
@media (max-width: 640px){ .op-card{ grid-template-columns: 1fr; } }

.op-card__rank{
  background: var(--teal-deep);
  color: var(--bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--sp-5);
}
.op-card__rank-num{
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 640px){
  .op-card__rank{ padding: var(--sp-3) var(--sp-5); justify-content: flex-start; }
  .op-card__rank-num{ font-size: 1.6rem; }
}

.op-card__head{
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.op-card__id{ display: flex; align-items: center; gap: var(--sp-3); }
.op-card__logo{
  width: 46px; height: 46px;
  border-radius: 10px;
  background: var(--accent-ink);
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.op-card__name{
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-ink);
}
.op-card__stars{
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.stars{ display: inline-flex; gap: 2px; vertical-align: middle; }
.star{ width: 16px; height: 16px; }
.star svg{ display: block; width: 100%; height: 100%; }
.star--full path{ fill: var(--accent-ink); }
.star--half path.bg{ fill: rgba(255,253,248,0.35); }
.star--half path.fg{ fill: var(--accent-ink); }
.star--empty path{ fill: rgba(255,253,248,0.3); }

.op-card__body{ padding: var(--sp-5); }
.op-card__desc{ color: var(--ink); max-width: 66ch; }
.op-card__badges{ display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0; }

.op-card__facts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}
.op-card__fact-label{
  display: block;
  font-family: var(--font-label);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.op-card__fact-value{
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--teal-deep);
  font-weight: 600;
}

.op-card__offer{
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--teal-deep);
  background: var(--bg-band);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.op-card__offer .tag{ display: block; font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; color: var(--ink-soft); margin-top: 4px; }

.op-card__actions{ display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.op-card__legal{ font-family: var(--font-label); font-size: 0.76rem; color: var(--ink-soft); margin-top: var(--sp-3); }

/* card entrance micro-interaction (MOTION: button micro-interactions only; showcase itself stays static) */

/* ===== methodology / scorecards ===== */
.method-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-5);
}
.method-item{
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  background: var(--bg-raised);
}
.method-item h4{ margin-bottom: var(--sp-2); }
.method-item p{ font-size: 0.94rem; color: var(--ink-soft); margin: 0; }

.scorecards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
}
.scorecard{
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
  background: var(--bg-raised);
}
.scorecard__top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.scorecard__name{ font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.scorecard__overall{ font-family: var(--font-mono); color: var(--accent-deep); font-weight: 700; }
.scorecard__rows{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.scorecard__row{ display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 0.9rem; }
.scorecard__crit{ font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.78rem; color: var(--ink-soft); }
.scorecard__val{ font-family: var(--font-mono); color: var(--teal-deep); font-weight: 600; text-align: right; }

/* ===== sidebar callout (how UK licensing works) ===== */
.callout{
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
  background: var(--bg-band);
}
.callout h3{ margin-bottom: var(--sp-3); }
.callout p:last-child{ margin-bottom: 0; }

.two-col{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } }

/* ===== safety resource cards ===== */
.safety-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.safety-card{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
  background: var(--bg-raised);
  color: var(--ink);
  transition: border-color 120ms var(--ease);
}
.safety-card:hover{ border-color: var(--accent); color: var(--ink); }
.safety-card__name{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--teal-deep); }
.safety-card__desc{ font-size: 0.88rem; color: var(--ink-soft); margin: 0; }
.safety-card__go{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-deep); margin-top: auto; }

/* ===== FAQ (data-accordion) ===== */
.faq{ display: flex; flex-direction: column; }
.faq-item{ border-top: 1px solid var(--line); }
.faq-item:last-child{ border-bottom: 1px solid var(--line); }
.faq-item__q{
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--teal-deep);
  text-align: left;
}
.faq-item__icon{
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--accent-deep);
  flex-shrink: 0;
  transition: transform 150ms var(--ease);
}
html.js .faq-item[data-open="true"] .faq-item__icon{ transform: rotate(45deg); }
/* Without JS: every answer stays visible — nothing here should depend on script. */
.faq-item__a{
  padding: 0 0 var(--sp-4);
  color: var(--ink-soft);
  max-width: 68ch;
}
html.js .faq-item__a{ display: none; }
html.js .faq-item[data-open="true"] .faq-item__a{ display: block; }

/* ===== timeline / list numerals for guides ===== */
.numbered-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.numbered-list li{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  margin: 0;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.numbered-list li:last-child{ border-bottom: none; padding-bottom: 0; }
.numbered-list .num{
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-deep);
}
.numbered-list h4{ margin-bottom: var(--sp-2); }
.numbered-list p{ margin: 0; }

/* ===== articles / content pages ===== */
.article{ max-width: var(--container-narrow); margin: 0 auto; }
.article h2{ margin-top: var(--sp-8); }
.article h2:first-child{ margin-top: 0; }
.article figure{ margin: var(--sp-6) 0; }
.article figure img{ border-radius: var(--radius-sm); border: 1px solid var(--line); }
.article figcaption{
  font-family: var(--font-label);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}

.definition-list{ display: flex; flex-direction: column; gap: var(--sp-5); }
.definition-list dt{ font-family: var(--font-display); font-weight: 700; color: var(--teal-deep); font-size: 1.05rem; }
.definition-list dd{ margin: var(--sp-1) 0 0; color: var(--ink-soft); }

/* ===== comparison table (legal/table use) ===== */
.data-table{ font-size: 0.92rem; }
.data-table th, .data-table td{
  border: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
}
.data-table th{
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  background: var(--bg-band);
  color: var(--teal-deep);
}
.data-table td.num{ font-family: var(--font-mono); text-align: right; }
.table-scroll{ overflow-x: auto; }

/* ===== forms ===== */
.form-row{ margin-bottom: var(--sp-5); }
.form-row label{ display: block; margin-bottom: var(--sp-2); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ===== cookie banner ===== */
.cookie-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--teal-deep);
  color: #E8F0EE;
  border-top: 2px solid var(--accent);
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.cookie-banner p{ margin: 0; flex: 1 1 320px; font-size: 0.9rem; color: #DCE7E3; }
.cookie-banner a{ color: var(--accent); }
.cookie-banner__actions{ display: flex; gap: var(--sp-3); flex-shrink: 0; }
.cookie-banner .btn--ghost{ color: #E8F0EE; border-color: #3B5A57; }
.cookie-banner .btn--ghost:hover{ background: #3B5A57; border-color: #3B5A57; color: #fff; }

/* ===== footer ===== */
.footer{
  background: var(--teal-deep);
  color: #C9D9D5;
  padding: var(--sp-8) 0 var(--sp-6);
  margin-top: var(--sp-8);
}
.footer a{ color: #E8F0EE; }
.footer a:hover{ color: var(--accent); }
.footer__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid #274B47;
}
@media (max-width: 780px){ .footer__grid{ grid-template-columns: 1fr 1fr; } }
.footer__brand{ display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.footer__brand .brand__mark{ width: 34px; height: 34px; }
.footer__brand-name{ font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.footer__desc{ font-size: 0.88rem; color: #A9C1BC; max-width: 30ch; }
.footer h5{
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  color: #A9C1BC;
  margin: 0 0 var(--sp-3);
}
.footer__links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__links a{ font-size: 0.92rem; font-weight: 600; }
.footer__bottom{
  padding-top: var(--sp-5);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #7FA098;
}
.footer__disclaimer{
  max-width: 78ch;
  font-size: 0.84rem;
  color: #8FADA6;
  margin: var(--sp-5) 0 0;
}

/* ===== utility ===== */
.visually-hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.stack{ display: flex; flex-direction: column; gap: var(--sp-5); }
.cluster{ display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.text-center{ text-align: center; }
.mt-0{ margin-top: 0; }