/* tpowerofficial.bet - .tp-* operator casino floor.
   The brand's own crimson as the single accent, over a near-black with a red cast rather than a
   cold slate. Silver for type, no gold anywhere. 4px radii, 1px hairlines, no gradients outside
   the hero scrim and the wheel. Spacing runs on a 6px step (6/12/18/24/36/48). The floor is ONE
   centred column at every width.

   House style for this sheet:
     - the shapes that repeat are named in :root - radii as --ui-rad*, type sizes as --ui-fs*
       and the three type weights as --ui-wt*; rules name the token, never the number;
     - padding and margin are written per physical edge (padding-top / -right / -bottom / -left),
       never as a one-to-four-value shorthand, so one edge can move on its own;
     - flex and animation are always longhand (flex-grow / -shrink / -basis, animation-name
       through animation-play-state): the shorthands reset properties a later rule had set and
       that is a whole class of bug this sheet does not have;
     - gap is row-gap plus column-gap, and overflow is overflow-x plus overflow-y.

   Static stylesheet: the build does NOT regenerate it. */

:root {
  --pg: #0d0507;
  --pn: #17090c;
  --ch: #1f0c10;
  --hl: #3a1a1f;
  --ac: #ff1a22;
  --ad: #c9000a;
  --ink: #fff;
  --mut: #a89098;
  --ok: #2fbf6a;
  --w: 1180px;
  --bar: 56px;
  --s1: 6px;
  --s2: 12px;
  --s3: 18px;
  --s4: 24px;
  --s5: 36px;
  --s6: 48px;

  /* token layer */
  --ui-rad1: 2px;
  --ui-rad2: 3px;
  --ui-rad3: 4px;
  --ui-fs1: 9px;
  --ui-fs2: 10px;
  --ui-fs3: 11px;
  --ui-fs4: 12px;
  --ui-fs5: 13px;
  --ui-fs6: 14px;
  --ui-fs7: 15px;
  --ui-fs8: 16px;
  --ui-fs9: 17px;
  --ui-fs10: 19px;
  --ui-fs11: 21px;
  --ui-wt1: 600;
  --ui-wt2: 700;
  --ui-wt3: 800;
}

* {box-sizing: border-box;}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  background: var(--pg);
  color: var(--ink);
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 15px;
  line-height: 1.65;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: calc(var(--bar) + 54px);
}

img {
  display: block;
  max-width: 100%;
  min-width: 0;
  height: auto;
}

a {color: inherit; text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}

h1, h2, h3, h4 {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-weight: var(--ui-wt2);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.w {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.tp-off {display: none !important;}

/* ---------------------------------------------------------------- buttons */
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--s1);
  column-gap: var(--s1);
  min-height: 38px;
  padding-top: 0;
  padding-right: var(--s3);
  padding-bottom: 0;
  padding-left: var(--s3);
  border: 1px solid transparent;
  border-radius: var(--ui-rad3);
  font-size: var(--ui-fs5);
  font-weight: var(--ui-wt2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition-property: background, border-color;
  transition-duration: .15s, .15s;
  transition-timing-function: linear, linear;
  transition-delay: 0s, 0s;
}

.tp-btn.p {background: var(--ac); color: #04181f;}
.tp-btn.p:hover {background: #2bc0f5;}
.tp-btn.q {background: #39414d; color: var(--ink);}
.tp-btn.q:hover {background: #46505e;}
.tp-btn.o {border-color: var(--hl); color: var(--ink); background: none;}
.tp-btn.o:hover {border-color: var(--ac); color: var(--ac);}
.tp-btn.g {background: none; border-color: var(--ac); color: var(--ac);}
.tp-btn.lg {min-height: 46px; padding-top: 0; padding-right: var(--s4); padding-bottom: 0; padding-left: var(--s4); font-size: var(--ui-fs6);}
.tp-btn.w {width: 100%;}

/* ---------------------------------------------------------------- header */
.tp-head {position: relative; z-index: 40;}

.tp-top {background: var(--pg); border-bottom: 1px solid var(--hl);}

.tp-top .w {
  display: flex;
  align-items: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  min-height: 62px;
}

.tp-logo {flex-grow: 0; flex-shrink: 0; flex-basis: auto; min-width: 0;}
.tp-logo svg {width: 118px; height: 32px; display: block;}

.tp-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  background: none;
  color: var(--ink);
  font-size: var(--ui-fs9);
  cursor: pointer;
}

.tp-auth {
  margin-left: auto;
  display: flex;
  row-gap: var(--s2);
  column-gap: var(--s2);
  min-width: 0;
}

.tp-chrome {background: var(--ch); border-bottom: 1px solid var(--hl);}

.tp-chrome .w {
  display: flex;
  align-items: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  min-height: 44px;
}

.tp-verts {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s4);
  column-gap: var(--s4);
  min-width: 0;
}

.tp-verts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--ui-fs4);
  font-weight: var(--ui-wt2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #c3ccd6;
  padding-top: var(--s2);
  padding-right: 0;
  padding-bottom: var(--s2);
  padding-left: 0;
  border-bottom: 2px solid transparent;
}

.tp-verts a:hover {color: var(--ac); border-bottom-color: var(--ac);}

.tp-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  font-size: var(--ui-fs3);
  color: var(--mut);
  min-width: 0;
}

.clk {font-variant-numeric: tabular-nums; white-space: nowrap;}

.tp-lang {display: flex; row-gap: 2px; column-gap: 2px;}

.tp-lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: 3px;
  padding-right: 9px;
  padding-bottom: 3px;
  padding-left: 9px;
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad2);
  font-size: var(--ui-fs3);
  color: var(--mut);
}

.tp-lang a.on {background: var(--ac); border-color: var(--ac); color: #04181f;}

.tp-tick {
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--pn);
  border-bottom: 1px solid var(--hl);
  padding-top: var(--s1);
  padding-right: 0;
  padding-bottom: var(--s1);
  padding-left: 0;
}

.tp-tick span {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  font-size: var(--ui-fs4);
  color: #a7b2bd;
  animation-name: m8scroll;
  animation-duration: 46s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes m8scroll { to {transform: translateX(-100%);} }

/* ---------------------------------------------------------------- hero */
.tp-hero {position: relative; margin-bottom: var(--s5);}

.tp-hero > img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.tp-hero .ov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(8,12,14,.94) 0%, rgba(8,12,14,.72) 46%, rgba(8,12,14,0) 78%);
}

.tp-hero .eb {
  display: inline-block;
  margin-bottom: var(--s2);
  padding-top: 5px;
  padding-right: 12px;
  padding-bottom: 5px;
  padding-left: 12px;
  border: 1px solid var(--ac);
  border-radius: var(--ui-rad2);
  font-size: var(--ui-fs4);
  font-weight: var(--ui-wt2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac);
}

.tp-hero strong {
  display: block;
  max-width: 18ch;
  font-size: clamp(25px, 5vw, 64px);
  font-weight: var(--ui-wt3);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.tp-hero .nums {
  display: flex;
  row-gap: var(--s5);
  column-gap: var(--s5);
  margin-top: var(--s4);
  margin-right: 0;
  margin-bottom: var(--s4);
  margin-left: 0;
}

.tp-hero .nums b {
  display: block;
  font-size: 36px;
  font-weight: var(--ui-wt3);
  color: var(--ac);
}

/* The hero carries the page's main offer, so its button is sized to the headline rather than
   to the sitewide .lg step. Scoped to .tp-hero: every other .lg button is unchanged. */
.tp-hero .tp-btn {
  min-height: 56px;
  padding-top: 0;
  padding-right: var(--s5);
  padding-bottom: 0;
  padding-left: var(--s5);
  font-size: var(--ui-fs8);
  letter-spacing: 0.04em;
}

.tp-hero .nums small {
  font-size: var(--ui-fs4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
}

/* ---------------------------------------------------------------- floor */
.tp-floor {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--s3);
  display: flex;
  flex-direction: column;
  row-gap: var(--s6);
  column-gap: var(--s6);
}

.tp-sh {
  display: flex;
  align-items: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hl);
}

.tp-sh h2 {font-size: var(--ui-fs9); letter-spacing: 0;}

.tp-sh > a {
  margin-left: auto;
  font-size: var(--ui-fs4);
  color: var(--ac);
  white-space: nowrap;
}

/* --- recommended, vertical tabs --- */
.tp-tabs {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s1);
  column-gap: var(--s1);
  margin-left: auto;
}

.tp-tabs button {
  padding-top: 5px;
  padding-right: 11px;
  padding-bottom: 5px;
  padding-left: 11px;
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad2);
  background: none;
  color: var(--mut);
  font-size: var(--ui-fs4);
  font-family: inherit;
  cursor: pointer;
}

.tp-tabs button.on {background: var(--ac); border-color: var(--ac); color: #04181f; font-weight: var(--ui-wt2);}

.tp-rec .bd {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  row-gap: var(--s4);
  column-gap: var(--s4);
  align-items: start;
}

.tp-feat {
  position: relative;
  display: block;
  min-width: 0;
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  overflow-x: hidden;
  overflow-y: hidden;
}

.tp-feat img {width: 100%; aspect-ratio: 3 / 4; object-fit: cover;}

.tp-feat .ov {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: var(--s4);
  padding-right: var(--s3);
  padding-bottom: var(--s3);
  padding-left: var(--s3);
  background: linear-gradient(0deg, rgba(8,12,14,.95), rgba(8,12,14,0));
}

.tp-feat .ov b {display: block; font-size: var(--ui-fs7);}
.tp-feat .ov small {font-size: var(--ui-fs3); color: var(--mut);}

.tp-rec .panes {min-width: 0;}

.tp-rec .pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
}

.tp-rec .sq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: var(--s1);
  column-gap: var(--s1);
  min-width: 0;
  min-height: 106px;
  padding-top: var(--s2);
  padding-right: var(--s2);
  padding-bottom: var(--s2);
  padding-left: var(--s2);
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  background: var(--pn);
  text-align: center;
}

.tp-rec .sq:hover {border-color: var(--ac);}

.tp-rec .sq .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 38px;
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 4px;
  padding-left: 8px;
  border-radius: var(--ui-rad2);
  background: #fff;
}

.tp-rec .sq .ic img {max-height: 28px; width: auto; min-width: 0; object-fit: contain;}
.tp-rec .sq .ic.t {
  font-size: var(--ui-fs4);
  font-weight: var(--ui-wt3);
  color: var(--ad);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: clip;
}
.tp-rec .sq > span:last-child {font-size: var(--ui-fs3); color: var(--mut);}

.tp-rec .dots {display: flex; justify-content: center; row-gap: var(--s1); column-gap: var(--s1); margin-top: var(--s3);}
.tp-rec .dots i {width: 6px; height: 6px; border-radius: 50%; background: var(--hl);}
.tp-rec .dots i.on {width: 20px; border-radius: var(--ui-rad2); background: var(--ac);}

/* --- game cards --- */
.tp-picks .gr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
}

.tp-game {display: block; min-width: 0;}

.tp-game .th {
  position: relative;
  display: block;
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  overflow-x: hidden;
  overflow-y: hidden;
}

.tp-game .th img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover;}
.tp-game:hover .th {border-color: var(--ac);}

.tp-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  padding-top: 2px;
  padding-right: 6px;
  padding-bottom: 2px;
  padding-left: 6px;
  border-radius: var(--ui-rad1);
  font-size: var(--ui-fs1);
  font-style: normal;
  font-weight: var(--ui-wt3);
  letter-spacing: 0.08em;
  color: #04181f;
  background: var(--ac);
}

.tp-tag.new {background: var(--ok);}

.tp-game b {display: block; margin-top: var(--s1); font-size: var(--ui-fs4); font-weight: var(--ui-wt1);}

.tp-game small {
  display: flex;
  justify-content: space-between;
  row-gap: var(--s1);
  column-gap: var(--s1);
  font-size: var(--ui-fs2);
  color: var(--mut);
}

.tp-game small i {font-style: normal; color: var(--ad);}

/* --- live dealer rail --- */
.tp-live .rail {
  display: flex;
  row-gap: var(--s2);
  column-gap: var(--s2);
  overflow-x: auto;
  padding-bottom: var(--s2);
  scroll-snap-type: x mandatory;
}

.tp-live .it {flex-grow: 0; flex-shrink: 0; flex-basis: 212px; min-width: 0; scroll-snap-align: start;}

.tp-live .im {
  position: relative;
  display: block;
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  overflow-x: hidden;
  overflow-y: hidden;
}

.tp-live .im img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 32%;}

.tp-live .pl {
  position: absolute;
  inset: 0;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  opacity: 0;
  transition-property: opacity;
  transition-duration: .15s;
  transition-timing-function: linear;
  transition-delay: 0s;
}

.tp-live .pl::after {
  content: "";
  position: absolute;
  inset: 0;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  width: 0;
  height: 0;
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: translateX(2px);
}

.tp-live .it:hover .pl {opacity: 1;}

.tp-live .nm {
  display: flex;
  align-items: center;
  row-gap: var(--s1);
  column-gap: var(--s1);
  margin-top: var(--s1);
  font-size: var(--ui-fs4);
  font-weight: var(--ui-wt1);
}

.tp-live .nm em {
  padding-top: 1px;
  padding-right: 5px;
  padding-bottom: 1px;
  padding-left: 5px;
  border-radius: var(--ui-rad1);
  font-size: var(--ui-fs1);
  font-style: normal;
  font-weight: var(--ui-wt3);
  color: #04181f;
  background: var(--ac);
}

.tp-live .nm em.new {background: var(--ok);}
.tp-live small {font-size: var(--ui-fs2); color: var(--mut);}

/* --- jackpot --- */
.tp-jp {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--s1);
  column-gap: var(--s1);
  padding-top: var(--s5);
  padding-right: var(--s3);
  padding-bottom: var(--s5);
  padding-left: var(--s3);
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  background: radial-gradient(ellipse at 50% 0%, rgba(0,174,239,.14), transparent 68%), var(--pn);
  text-align: center;
}

.tp-jp .k {
  font-size: var(--ui-fs3);
  font-weight: var(--ui-wt2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac);
}

.tp-jp b {
  font-size: clamp(30px, 6vw, 54px);
  font-weight: var(--ui-wt3);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tp-jp b i {font-style: normal;}
.tp-jp .s {font-size: var(--ui-fs4); color: var(--mut);}
.tp-jp .tp-btn {margin-top: var(--s3);}

/* --- paired boards --- */
.tp-boards .bd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s4);
  column-gap: var(--s4);
}

.tp-board {
  min-width: 0;
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  background: var(--pn);
  overflow-x: hidden;
  overflow-y: hidden;
}

.tp-board .h {
  display: flex;
  align-items: center;
  row-gap: var(--s2);
  column-gap: var(--s2);
  padding-top: var(--s2);
  padding-right: var(--s3);
  padding-bottom: var(--s2);
  padding-left: var(--s3);
  border-bottom: 1px solid var(--hl);
  background: var(--ch);
  font-size: var(--ui-fs4);
  font-weight: var(--ui-wt2);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tp-board .live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  row-gap: 4px;
  column-gap: 4px;
  font-size: var(--ui-fs2);
  color: var(--ok);
}

.tp-board .live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation-name: m8pulse;
  animation-duration: 1.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes m8pulse { 50% {opacity: .25;} }

.tp-board table {width: 100%; border-collapse: collapse; font-size: var(--ui-fs4);}
.tp-board td {padding-top: var(--s1); padding-right: var(--s3); padding-bottom: var(--s1); padding-left: var(--s3); border-top: 1px solid rgba(42,49,59,.6);}
.tp-board td.a {text-align: right; font-variant-numeric: tabular-nums; color: var(--ac);}
.tp-board.wd td.a {color: var(--ok);}
.tp-board td.p {text-align: right; width: 34%; color: var(--mut);}

/* --- app block --- */
.tp-app .bd {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  row-gap: var(--s5);
  column-gap: var(--s5);
  align-items: center;
  justify-items: center;
  padding-top: var(--s5);
  padding-right: var(--s3);
  padding-bottom: var(--s5);
  padding-left: var(--s3);
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  background: var(--pn);
}

.tp-app .qr {display: block; text-align: center; min-width: 0; color: inherit;}
.tp-app .qr:hover img {border-color: var(--ink);}

.tp-app .qr img {
  display: block;
  width: 104px;
  height: 104px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: var(--s2);
  margin-left: auto;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  border: 2px solid var(--ac);
  border-radius: var(--ui-rad3);
  background: #fff;
}

.tp-app .qr b {display: block; font-size: var(--ui-fs5);}
.tp-app .qr small {font-size: var(--ui-fs3); color: var(--mut);}

.tp-app .ph {
  min-width: 0;
  width: 182px;
  padding-top: 9px;
  padding-right: 7px;
  padding-bottom: 9px;
  padding-left: 7px;
  border: 2px solid #39414d;
  border-radius: 22px;
  background: #05090b;
}

.tp-app .ph img {width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px;}

.tp-app .fts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
  margin-top: var(--s4);
}

.tp-app .ft {
  min-width: 0;
  padding-top: var(--s3);
  padding-right: var(--s3);
  padding-bottom: var(--s3);
  padding-left: var(--s3);
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  text-align: center;
}

.tp-app .ft .i {display: block; font-size: var(--ui-fs11); margin-bottom: var(--s1);}
.tp-app .ft b {display: block; font-size: var(--ui-fs5);}
.tp-app .ft small {font-size: var(--ui-fs3); color: var(--mut);}

/* --- provider wall --- */
.tp-wall .gr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
}

.tp-prov {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 62px;
  padding-top: var(--s2);
  padding-right: var(--s2);
  padding-bottom: var(--s2);
  padding-left: var(--s2);
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  background: var(--pn);
}

.tp-prov:hover .lg {box-shadow: 0 0 0 2px var(--ac);}

.tp-prov:hover {border-color: var(--ac);}

/* ONE treatment for every mark: a white chip, the logo in its own colour, no silhouetting.
   Three treatments at once (lifted / bare / solid badge) read as three different walls. */
.tp-prov .lg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding-top: 6px;
  padding-right: 10px;
  padding-bottom: 6px;
  padding-left: 10px;
  border-radius: var(--ui-rad2);
  background: #fff;
}

.tp-prov .lg img {max-height: 26px; width: auto; min-width: 0; object-fit: contain;}
.tp-prov .lg.t {font-size: 12.5px; font-weight: var(--ui-wt3); color: var(--ad); letter-spacing: -0.2px; white-space: nowrap;}

/* --- testimonials --- */
.tp-testi .gr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
}

.tp-testi .bx {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  min-width: 0;
  padding-top: var(--s3);
  padding-right: var(--s3);
  padding-bottom: var(--s3);
  padding-left: var(--s3);
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  background: var(--pn);
}

.tp-testi .av {font-size: var(--ui-fs11);}
.tp-testi figcaption b {display: block; font-size: var(--ui-fs5);}
.tp-testi figcaption small {font-size: var(--ui-fs3); color: var(--mut);}
.tp-testi .st {display: block; margin-top: var(--s1); margin-right: 0; margin-bottom: var(--s1); margin-left: 0; font-size: var(--ui-fs3); color: var(--ac); letter-spacing: 1px;}
.tp-testi blockquote {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: var(--ui-fs4); line-height: 1.6; color: #c3ccd6;}

/* ---------------------------------------------------------------- article */
.tp-content {
  width: 100%;
  max-width: 900px;
  margin-top: var(--s6);
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-inline: var(--s3);
}

.tp-content h1 {
  font-size: clamp(23px, 3.4vw, 34px);
  font-weight: var(--ui-wt3);
  margin-bottom: var(--s3);
}

.tp-content .lead {font-size: var(--ui-fs8); line-height: 1.7; color: #c3ccd6;}

.tp-content h2 {
  margin-top: var(--s6);
  margin-right: 0;
  margin-bottom: var(--s2);
  margin-left: 0;
  padding-left: var(--s2);
  border-left: 3px solid var(--ac);
  font-size: var(--ui-fs10);
}

.tp-content h3 {margin-top: var(--s4); margin-right: 0; margin-bottom: var(--s1); margin-left: 0; font-size: var(--ui-fs7);}
.tp-content p {margin-top: 0; margin-right: 0; margin-bottom: var(--s3); margin-left: 0; color: #c3ccd6;}
.tp-content a {color: var(--ac); text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; text-underline-offset: 2px;}
.tp-content ul, .tp-content ol {margin-top: 0; margin-right: 0; margin-bottom: var(--s3); margin-left: 0; padding-left: var(--s4); color: #c3ccd6;}
.tp-content li {margin-bottom: var(--s1);}

.tp-ph {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  row-gap: var(--s5);
  column-gap: var(--s5);
  align-items: center;
  margin-bottom: var(--s5);
}

.tp-ph img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ui-rad3);}

.tp-ph .eb {
  display: inline-block;
  margin-bottom: var(--s2);
  font-size: var(--ui-fs3);
  font-weight: var(--ui-wt2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac);
}

.tp-ph .act, .tp-content .act {display: flex; flex-wrap: wrap; row-gap: var(--s2); column-gap: var(--s2); margin-top: var(--s4);}
.tp-content .act.utl {margin-bottom: var(--s5);}

.tp-kpis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s2);
  column-gap: var(--s2);
  margin-top: var(--s5);
  margin-right: 0;
  margin-bottom: var(--s5);
  margin-left: 0;
}

.tp-kpis > div {
  min-width: 0;
  padding-top: var(--s3);
  padding-right: var(--s3);
  padding-bottom: var(--s3);
  padding-left: var(--s3);
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  background: var(--pn);
}

.tp-kpis b {display: block; font-size: 23px; font-weight: var(--ui-wt3); color: var(--ac);}
.tp-kpis span {font-size: var(--ui-fs3); color: var(--mut);}

.tp-steps {counter-reset: m8s; margin-top: var(--s4); margin-right: 0; margin-bottom: var(--s4); margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style: none;}

.tp-steps li {
  position: relative;
  counter-increment: m8s;
  margin-bottom: var(--s3);
  padding-left: var(--s6);
  color: #c3ccd6;
}

.tp-steps li::before {
  content: counter(m8s);
  position: absolute;
  left: 0;
  top: 0;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ac);
  border-radius: var(--ui-rad3);
  font-size: var(--ui-fs4);
  font-weight: var(--ui-wt3);
  color: var(--ac);
}

.tp-tw {overflow-x: auto; margin-top: var(--s4); margin-right: 0; margin-bottom: var(--s4); margin-left: 0;}

.tp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-fs5);
  border: 1px solid var(--hl);
}

.tp-tbl th {
  padding-top: var(--s2);
  padding-right: var(--s3);
  padding-bottom: var(--s2);
  padding-left: var(--s3);
  background: var(--ch);
  border-bottom: 1px solid var(--hl);
  text-align: left;
  font-size: var(--ui-fs3);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ac);
}

.tp-tbl td {padding-top: var(--s2); padding-right: var(--s3); padding-bottom: var(--s2); padding-left: var(--s3); border-top: 1px solid var(--hl); color: #c3ccd6;}
.tp-tbl tbody tr:nth-child(odd) {background: rgba(22,26,32,.6);}

.tp-faq {margin-top: var(--s4); margin-right: 0; margin-bottom: var(--s4); margin-left: 0;}

.tp-faq details {
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  margin-bottom: var(--s1);
  background: var(--pn);
}

.tp-faq summary {
  padding-top: var(--s2);
  padding-right: var(--s3);
  padding-bottom: var(--s2);
  padding-left: var(--s3);
  font-size: var(--ui-fs6);
  font-weight: var(--ui-wt1);
  cursor: pointer;
}

.tp-faq p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: var(--s3); padding-bottom: var(--s3); padding-left: var(--s3); font-size: var(--ui-fs5);}

.tp-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  margin-top: var(--s6);
  margin-right: 0;
  margin-bottom: var(--s4);
  margin-left: 0;
  padding-top: var(--s4);
  padding-right: var(--s4);
  padding-bottom: var(--s4);
  padding-left: var(--s4);
  border: 1px solid var(--ac);
  border-radius: var(--ui-rad3);
  background: rgba(0,174,239,.07);
}

.tp-band b {flex-grow: 1; flex-shrink: 1; flex-basis: 260px; min-width: 0; font-size: var(--ui-fs7); font-weight: var(--ui-wt1);}

/* ---------------------------------------------------------------- chrome overlays */
.tp-util {
  position: fixed;
  left: 0;
  top: 46%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  column-gap: 2px;
}

.tp-util a {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2px;
  column-gap: 2px;
  width: 58px;
  padding-top: var(--s2);
  padding-right: 4px;
  padding-bottom: var(--s2);
  padding-left: 4px;
  border: 1px solid var(--hl);
  border-left: none;
  border-radius: 0 4px 4px 0;
  background: var(--ch);
  font-size: var(--ui-fs1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mut);
}

.tp-util a:hover {color: var(--ac); border-color: var(--ac);}
.tp-util .i {font-size: var(--ui-fs8); color: var(--ac);}

.tp-spin {
  position: fixed;
  right: var(--s3);
  bottom: calc(var(--bar) + 66px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--s1);
  column-gap: var(--s1);
}

.tp-spin .wh {
  position: relative;
  width: 76px;
  height: 76px;
  border: 3px solid var(--ac);
  border-radius: 50%;
  background: conic-gradient(#12303b 0 45deg, #0e2531 45deg 90deg, #12303b 90deg 135deg,
    #0e2531 135deg 180deg, #12303b 180deg 225deg, #0e2531 225deg 270deg,
    #12303b 270deg 315deg, #0e2531 315deg 360deg);
  transition-property: transform;
  transition-duration: 4s;
  transition-timing-function: cubic-bezier(.17,.67,.2,1);
  transition-delay: 0s;
}

.tp-spin .wh ul {display: none;}

.tp-spin .pin {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--ac);
  transform: translateX(-50%);
}

.tp-spin .tp-btn {min-height: 28px; padding-top: 0; padding-right: var(--s2); padding-bottom: 0; padding-left: var(--s2); font-size: var(--ui-fs2);}

/* Retire the floating extras once the footer is on screen. A fixed element passing over content
   while you scroll is what a fixed element does; one still sitting on top of a trust mark when
   the page has STOPPED is covered content, and that is a defect. At 320 the spin badge covered
   godaddy 90% and the util rail covered gamcare 41% and gamstop 52% at scroll-end.
   The sticky register bar and the bottom nav deliberately stay: they are the CTA. */
.tp-atfoot .tp-util,
.tp-atfoot .tp-spin {display: none;}

/* ---------------------------------------------------------------- popup */
.tp-pop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: var(--s3);
  padding-right: var(--s3);
  padding-bottom: var(--s3);
  padding-left: var(--s3);
  background: rgba(4,8,10,.84);
}

.tp-pop.on {display: flex;}

.tp-pop .bx {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: 92vh;
  overflow: hidden auto;
  border: 1px solid var(--hl);
  border-radius: 6px;
  background: var(--pn);
}

.tp-pop .x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  background: rgba(12,17,19,.85);
  color: var(--ink);
  font-size: var(--ui-fs10);
  line-height: 1;
  cursor: pointer;
}

.tp-pop .ix {
  display: flex;
  row-gap: 2px;
  column-gap: 2px;
  /* The close button is absolutely positioned over this row's top-right. padding-right only
     adds trailing scroll space, so the box still extended under the X and clipped the last tab
     on a 320px screen. margin-right ends the box itself before the button. */
  margin-right: 46px;
  padding: var(--s2) 0 0 var(--s2);
  overflow-x: auto;
  scrollbar-width: none;;
}

.tp-pop .ix button {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  padding-top: 5px;
  padding-right: 9px;
  padding-bottom: 5px;
  padding-left: 9px;
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad2);
  background: none;
  color: var(--mut);
  font-size: var(--ui-fs3);
  font-family: inherit;
  cursor: pointer;
}

.tp-pop .ix button.on {background: var(--ac); border-color: var(--ac); color: #04181f;}
.tp-pop .ix i {display: none;}
.tp-pop .pane {padding-top: var(--s2); padding-right: var(--s2); padding-bottom: var(--s2); padding-left: var(--s2);}
.tp-pop .pane > span {display: block;}
.tp-pop .pane img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ui-rad3);}
.tp-pop .cap {display: block; padding-top: var(--s3); padding-right: var(--s1); padding-bottom: 0; padding-left: var(--s1); text-align: center;}
.tp-pop .cap b {display: block; font-size: 18px; font-weight: var(--ui-wt3); color: var(--ac);}
.tp-pop .cap span {display: block; margin-top: var(--s1); margin-right: 0; margin-bottom: var(--s3); margin-left: 0; font-size: var(--ui-fs5); color: #c3ccd6;}

.tp-pop .pg {
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--s3);
  column-gap: var(--s3);
  padding-top: var(--s3);
  padding-right: 0;
  padding-bottom: var(--s1);
  padding-left: 0;
}

.tp-pop .pg button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--hl);
  border-radius: var(--ui-rad3);
  background: none;
  color: var(--ink);
  font-size: var(--ui-fs7);
  cursor: pointer;
}

.tp-pop .pg .n {font-size: var(--ui-fs4); color: var(--mut); font-variant-numeric: tabular-nums;}

/* ---------------------------------------------------------------- footer */
.tp-foot {margin-top: var(--s6); border-top: 1px solid var(--hl); background: #0a0e10;}

.tp-foot .r1, .tp-foot .r2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  row-gap: var(--s5);
  column-gap: var(--s5);
  padding-block: var(--s5);
}

.tp-foot .r2 {border-top: 1px solid var(--hl); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
.tp-foot .c {min-width: 0;}

.tp-foot h4 {
  margin-bottom: var(--s2);
  font-size: var(--ui-fs4);
  font-weight: var(--ui-wt2);
  letter-spacing: 0.06em;
  color: var(--ac);
}

.tp-foot .c > a {display: block; font-size: var(--ui-fs4); color: var(--mut); margin-bottom: var(--s1);}
.tp-foot .c > a:hover {color: var(--ink);}
.tp-foot .brand svg {width: 86px; height: 36px; margin-bottom: var(--s2);}
.tp-foot .brand p {margin-top: 0; margin-right: 0; margin-bottom: var(--s3); margin-left: 0; font-size: var(--ui-fs4); line-height: 1.7; color: var(--mut);}

.tp-foot .lic {
  display: inline-flex;
  flex-direction: column;
  padding-top: var(--s1);
  padding-right: var(--s2);
  padding-bottom: var(--s1);
  padding-left: var(--s2);
  border-radius: var(--ui-rad2);
  background: #0f7a3d;
  font-size: var(--ui-fs9);
  font-weight: var(--ui-wt3);
  line-height: 1.1;
  color: #fff;
}

.tp-foot .lic i {font-size: 8px; font-style: normal; font-weight: 400; letter-spacing: 0.04em;}

.tp-foot .pay, .tp-foot .bd, .tp-foot .soc {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s2);
  column-gap: var(--s2);
  align-items: center;
  min-width: 0;
}

.tp-foot .pay span, .tp-foot .bd span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  padding-top: 4px;
  padding-right: 7px;
  padding-bottom: 4px;
  padding-left: 7px;
  border-radius: var(--ui-rad2);
  background: #fff;
}

.tp-foot .pay img, .tp-foot .bd img {
  max-height: 18px;
  width: auto;
  min-width: 0;
  object-fit: contain;
}

.tp-foot .soc a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--hl);
  border-radius: 50%;
}

.tp-foot .soc svg {width: 15px; height: 15px; fill: var(--mut);}
.tp-foot .soc a:hover {border-color: var(--ac);}
.tp-foot .soc a:hover svg {fill: var(--ac);}

.tp-foot .legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--s2);
  column-gap: var(--s2);
  padding-block: var(--s3);
  border-top: 1px solid var(--hl);
  font-size: var(--ui-fs3);
  color: var(--mut);
}

.tp-foot .age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 1px solid #d4524a;
  border-radius: 50%;
  font-size: var(--ui-fs2);
  font-weight: var(--ui-wt3);
  color: #d4524a;
}

.tp-foot .cp {margin-left: auto;}

/* ---------------------------------------------------------------- fixed bars */
.tp-scta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--bar);
  z-index: 35;
  display: none;
  padding-top: var(--s1);
  padding-right: var(--s3);
  padding-bottom: var(--s1);
  padding-left: var(--s3);
  border-top: 1px solid var(--hl);
  background: rgba(12,17,19,.96);
}

.tp-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 36;
  display: none;
  padding-top: 9px;
  border-top: 1px solid var(--hl);
  background: var(--ch);
}

.tp-nav a {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1px;
  column-gap: 1px;
  min-width: 0;
  min-height: 44px;
  padding-bottom: 5px;
  font-size: var(--ui-fs1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mut);
}

.tp-nav .i {font-size: var(--ui-fs7);}

.tp-nav .coin .i {
  position: absolute;
  top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--ch);
  border-radius: 50%;
  background: var(--ac);
  color: #04181f;
  font-size: var(--ui-fs11);
}

.tp-nav .coin {color: var(--ac); padding-top: 25px;}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .tp-rec .bd {grid-template-columns: 220px minmax(0, 1fr);}
  .tp-picks .gr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .tp-wall .gr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .tp-testi .gr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .tp-foot .r1 {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .tp-foot .r2 {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
}

@media (max-width: 860px) {
  .tp-burger {display: block;}
  .tp-verts {
    display: none;
    width: 100%;
    flex-direction: column;
    row-gap: 0;
    column-gap: 0;
  }
  .tp-head.open .tp-verts {display: flex;}
  .tp-head.open .tp-chrome .w {flex-wrap: wrap; padding-bottom: var(--s2);}
  .tp-verts a {width: 100%; padding-top: var(--s2); padding-right: 0; padding-bottom: var(--s2); padding-left: 0; border-bottom: 1px solid var(--hl);}
  .tp-meta {margin-left: auto;}
  .clk {display: none;}
  .tp-auth .tp-btn.q {display: none;}
  .tp-hero > img {aspect-ratio: 4 / 3;}
  .tp-hero .ov {background: linear-gradient(0deg, rgba(8,12,14,.96) 22%, rgba(8,12,14,.42) 100%); align-items: flex-end;}
  .tp-hero .ov .w {padding-bottom: var(--s4);}
  .tp-hero .nums {row-gap: var(--s4); column-gap: var(--s4); margin-top: var(--s3); margin-right: 0; margin-bottom: var(--s3); margin-left: 0;}
  /* The desktop step would crowd a 375px screen; hold the phone at its old size. */
  .tp-hero .nums b {font-size: 26px;}
  .tp-hero .tp-btn {min-height: 46px; padding-top: 0; padding-right: var(--s4); padding-bottom: 0; padding-left: var(--s4); font-size: var(--ui-fs6);}
  .tp-rec .bd {grid-template-columns: minmax(0, 1fr);}
  .tp-feat img {aspect-ratio: 16 / 9;}
  .tp-boards .bd {grid-template-columns: minmax(0, 1fr);}
  .tp-app .bd {grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); column-gap: var(--s4);}
  .tp-app .fts {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .tp-ph {grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); column-gap: var(--s4);}
  .tp-kpis {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .tp-scta {display: block;}
  .tp-nav {display: flex;}
  .tp-util {top: auto; bottom: calc(var(--bar) + 66px);}
  .tp-util a:nth-child(n+2) {display: none;}
  .tp-spin {right: var(--s2); bottom: calc(var(--bar) + 150px);}
  .tp-spin .wh {width: 58px; height: 58px;}
  .tp-foot .cp {margin-left: 0; width: 100%;}
}

@media (max-width: 520px) {
  .tp-picks .gr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .tp-wall .gr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .tp-testi .gr {grid-template-columns: minmax(0, 1fr);}
  .tp-rec .pane {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .tp-foot .r1, .tp-foot .r2 {grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); column-gap: var(--s4);}
  .tp-floor {row-gap: var(--s5); column-gap: var(--s5);}
  .tp-live .it {flex-basis: 170px;}
}

@media (prefers-reduced-motion: reduce) {
  .tp-tick span {animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; padding-left: 0;}
  .tp-board .live::before {animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; animation-play-state: running;}
  .tp-spin .wh {transition-property: none; transition-duration: 0s; transition-timing-function: ease; transition-delay: 0s;}
  * {scroll-behavior: auto !important;}
}

/* --- 44px touch targets on a phone -----------------------------------------------------------
   The footer column links and the section-header link render around 20px tall, which the mobile
   audit flags on every site in this network. Raise the hit area, not the type size: the design is
   unchanged and only the area a thumb can land on moves. Phone widths only, because a 44px footer
   row on a desktop just stretches the columns. */
@media (max-width: 760px) {
  /* a short label like "4D" passed on height and failed on width */
  .tp-verts a {min-width: 44px; justify-content: center;}

  .tp-foot .soc a {width: 44px; height: 44px;}

  /* the room tabs: "4D" is the shortest label and the only one that failed */
  .tp-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .tp-foot .c > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 0;
  }

  .tp-sh > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-left: var(--s2);
  }
}