/* CasinoFinderHub - finder.css */

/* Figtree, self-hosted. Google served all four weights from ONE file per subset - it is a
   variable font (fvar/avar/STAT present), so a single face per subset covers 400-800 and a
   single preload warms the whole type system. Self-hosting kills the two extra DNS+TLS hops
   to googleapis/gstatic, which were the site's only render-blocking request and its only
   third party. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/finderhub-type-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/finderhub-type.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* silver system - bright, not grey. the base the whole page reads as */
  --sheet: #F4F7FC;
  --panel: #FFFFFF;
  --panel-2: #EAF0F9;
  --panel-3: #DCE5F2;
  --edge: #C9D5E8;
  --edge-hi: #A5B6D2;
  --chrome: linear-gradient(180deg, #FFFFFF 0%, #EAF0F9 100%);
  --chrome-2: linear-gradient(180deg, #FBFDFF 0%, #E2EAF7 100%);

  /* blue - first accent. royal and alive, never slate */
  --navy: #0A1C46;
  --navy-2: #12327E;
  --navy-3: #1B4FD8;
  --navy-4: #3D74F5;
  --navy-wash: #E4EDFF;

  /* gold - second accent, reserved for the money */
  --brass: #8A5300;
  --brass-2: #FFC24D;
  --brass-3: #F0A020;
  --brass-wash: #FFF5DC;
  --brass-edge: #F5D89A;

  /* emerald - third accent, only for genuinely good terms */
  --leaf: #0B7A4B;
  --leaf-2: #16C177;
  --leaf-wash: #DFF7EC;

  --ink: #0C1626;
  --ink-2: #364559;
  --faint: #5F6E85;   /* 4.52:1 on --panel-2, the lightest ground it is used on */

  --font-main: 'Figtree', 'Segoe UI', Arial, sans-serif;
  --bar-h: 76px;   /* the floating panel's track: 54px panel + 11px above and below */
  --span-w: 1340px;
  --bend: 12px;
  --bend-sm: 7px;
  --glide: cubic-bezier(0.4, 0, 0.2, 1);
  --lift: 0 1px 2px rgba(18,37,66,0.06), 0 4px 14px rgba(18,37,66,0.06);
  --lift-hi: 0 2px 6px rgba(18,37,66,0.10), 0 14px 34px rgba(18,37,66,0.13);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 74px); }

body {
  font-family: var(--font-main);
  background: var(--sheet);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--navy-3); }

.hold { max-width: var(--span-w); margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { line-height: 1.22; font-weight: 800; letter-spacing: -0.015em; }

/* header - a floating glass panel, not a bar welded to the viewport. It rides on its own
   transparent track, tightens on scroll, and the nav borrows the mark's brackets for its
   hover state so the logo's idea carries into the interface. */
.deckbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 11px 22px;
  pointer-events: none;          /* the track is dead space; only the panel takes clicks */
  transition: padding 0.24s var(--glide);
}

.deckbar-core {
  pointer-events: auto;
  max-width: var(--span-w);
  margin: 0 auto;
  height: 54px;
  padding: 0 10px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(201, 213, 232, 0.85);
  border-radius: 15px;
  /* opaque enough to read on its own - the blur below is an enhancement, never the thing
     holding the contrast up. Where backdrop-filter is unsupported or fails to composite,
     this is what ships. */
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, var(--lift);
  transition: height 0.24s var(--glide), border-radius 0.24s var(--glide),
              background 0.24s var(--glide), box-shadow 0.24s var(--glide);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .deckbar-core {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
  }
  body.bar-tight .deckbar-core { background: rgba(255, 255, 255, 0.88); }
  .mainrail .dropsheet {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
  }
}

/* past the fold the panel pulls in and firms up, so it reads as a tool rather than a lid */
body.bar-tight .deckbar { padding: 6px 16px; }
body.bar-tight .deckbar-core {
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, var(--lift-hi);
}

.brandline {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brandline img {
  display: block;
  height: 32px;
  width: auto;
  transition: height 0.24s var(--glide);
}
body.bar-tight .brandline img { height: 28px; }

/* Phones. The full-size lockup leaves about 24px between itself and the menu button, which
   reads as crowded rather than considered. The whole panel comes in a step: shorter, tighter
   gutter, smaller mark. --bar-h is redefined with it so the hero still clears the header. */
@media (max-width: 520px) {
  :root { --bar-h: 68px; }
  .deckbar { padding: 9px 13px; }
  .deckbar-core {
    height: 50px;
    padding: 0 8px 0 14px;
    border-radius: 13px;
    gap: 12px;
  }
  .brandline img { height: 27px; }
  body.bar-tight .deckbar { padding: 6px 10px; }
  body.bar-tight .deckbar-core { height: 46px; }
  body.bar-tight .brandline img { height: 24px; }
  .nav-toggle { width: 38px; height: 38px; border-radius: 10px; }
}

.mainrail { display: none; }
.mainrail ul { list-style: none; display: flex; gap: 2px; }
.mainrail a {
  display: block;
  padding: 9px 18px;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  transition: color 0.15s var(--glide);
}
.mainrail a:hover, .mainrail a[aria-current="page"] { color: var(--navy-3); }

/* the bracket cursor: the mark's own shape closes around whatever the pointer is on */
.mainrail > ul > li > a, .dropflip { position: relative; }
.mainrail > ul > li > a::before, .mainrail > ul > li > a::after,
.dropflip::before, .dropflip::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -10px;
  width: 7px;
  height: 20px;
  border: 2px solid var(--navy-3);
  opacity: 0;
  transition: opacity 0.18s var(--glide), transform 0.18s var(--glide);
}
.mainrail > ul > li > a::before, .dropflip::before {
  left: 4px;
  border-right: 0;
  border-radius: 3px 0 0 3px;
  transform: translateX(6px);
}
.mainrail > ul > li > a::after, .dropflip::after {
  right: 4px;
  border-left: 0;
  border-radius: 0 3px 3px 0;
  transform: translateX(-6px);
}
.mainrail > ul > li > a:hover::before, .mainrail > ul > li > a:hover::after,
.mainrail > ul > li > a[aria-current="page"]::before,
.mainrail > ul > li > a[aria-current="page"]::after,
.dropflip:hover::before, .dropflip:hover::after,
.raildrop.spread-open .dropflip::before, .raildrop.spread-open .dropflip::after,
.dropflip.on-branch::before, .dropflip.on-branch::after {
  opacity: 1;
  transform: translateX(0);
}

/* Bonuses menu. The money pages outgrew a flat rail, so they collect behind one button. */
.raildrop { position: relative; }
.dropflip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 17px 9px 18px;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.15s var(--glide);
}
.dropflip img { transition: transform 0.18s var(--glide); }
.dropflip:hover, .raildrop.spread-open .dropflip, .dropflip.on-branch { color: var(--navy-3); }
.raildrop.spread-open .dropflip img { transform: rotate(180deg); }

.mainrail .dropsheet {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 252px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid rgba(201, 213, 232, 0.9);
  border-radius: var(--bend);
  box-shadow: var(--lift-hi);
  display: block;
}
.mainrail .dropsheet[hidden] { display: none; }
/* The track above is pointer-events:none, so the gap between the button and this sheet is a
   HOLE - the pointer falls through to the page behind, the header's mouseleave fires, and the
   menu shuts before you can reach it. This bridges the gap with hit area that still belongs
   to the header. It spans the sheet's own width, so it cannot drift out of alignment. */
.mainrail .dropsheet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
}
.mainrail .dropsheet li { display: block; }
.mainrail .dropsheet a {
  padding: 10px 14px;
  font-size: 0.93rem;
  white-space: nowrap;
  border-radius: var(--bend-sm);
}
.mainrail .dropsheet a:hover { background: var(--navy-wash); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--edge);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.15s var(--glide), border-color 0.15s var(--glide);
}
.nav-toggle:hover { background: var(--navy-wash); border-color: var(--edge-hi); }
.flip-shut { display: none; }
body.fold-open .flip-open { display: none; }
body.fold-open .flip-shut { display: block; }

.foldnav {
  position: fixed;
  top: var(--bar-h); left: 0; right: 0; bottom: 0;
  z-index: 490;
  background: var(--panel);
  display: none;
  overflow-y: auto;
  padding: 12px 22px 40px;
}
body.fold-open .foldnav { display: block; }
.foldnav ul { list-style: none; }
.foldnav a {
  display: block;
  padding: 15px 4px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--edge);
}
.foldgroup-h {
  padding: 16px 4px 7px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.foldgroup ul a { padding-left: 15px; font-size: 1rem; }

@media (min-width: 900px) {
  .mainrail { display: block; }
  .nav-toggle { display: none; }
}

/* hero band - the finder console itself. The H1 and the intro paragraph stay in the
   document for search engines but are lifted off-screen: the band's job on screen is to
   put the filters in front of the visitor immediately. */
.offscreen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skyband {
  position: relative;
  /* padding, not margin: the header floats, so this section's background has to
     run up underneath it instead of starting below it */
  padding-top: var(--bar-h);
  background: var(--navy) url('/images/finderhub-sky.webp') center / cover no-repeat;
  color: #EEF3FA;
  overflow: hidden;
}
/* the veil sinks toward the bottom: the sky stays visible up top, and the ground under the
   controls goes deep enough that they read on their own - no panel drawn around them */
.skyband-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 86% 2%, rgba(61,116,245,0.52) 0%, rgba(10,28,70,0) 62%),
    radial-gradient(600px 320px at 0% 4%, rgba(240,160,32,0.20) 0%, rgba(10,28,70,0) 56%),
    linear-gradient(180deg, rgba(6,17,46,0.70) 0%, rgba(4,12,33,0.91) 44%, rgba(3,9,26,0.97) 100%);
}
.skyband .hold { position: relative; padding-top: 40px; padding-bottom: 48px; }

/* filter console - no card. The controls themselves carry the contrast, so the band reads
   as part of the hero instead of a box floating on it. */
.sift-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 24px;
}
.sift-lede {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 0.8rem;
  color: #A7C5FF;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.sift-lede img { filter: invert(78%) sepia(18%) saturate(900%) hue-rotate(184deg) brightness(103%); }
.sift-count {
  font-weight: 800;
  font-size: 1.44rem;
  line-height: 1.2;
  color: var(--brass-2);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(3,9,26,0.7);
}

.sift-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px 26px;
}
.sift-group { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.sift-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: #B4CEFF;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

/* segmented track, not loose pills: one rail per question, the answer slides into it.
   The rail is near-solid so it separates from the sky behind it on its own */
.sift-track {
  display: inline-flex;
  align-self: start;
  max-width: 100%;
  gap: 4px;
  padding: 5px;
  background: rgba(3, 10, 26, 0.74);
  border: 1px solid rgba(168, 206, 255, 0.40);
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(2, 7, 20, 0.46), 0 1px 0 rgba(255,255,255,0.10) inset;
}
.sift-track-wide { flex-wrap: wrap; }


.sift-chip {
  font-family: var(--font-main);
  font-size: 0.94rem;
  font-weight: 700;
  color: #E8F1FF;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
  /* the label colour is NOT transitioned - a chip that flips to a white ground has to take
     its dark text with it in the same frame, or the label washes out mid-fade */
  transition: background 0.16s var(--glide), box-shadow 0.16s var(--glide);
}
.sift-chip:hover { background: rgba(255,255,255,0.13); color: #FFFFFF; }
/* white on deep blue is the loudest a selected state can be here, and it leaves gold
   free to mean money everywhere else on the page */
.sift-chip.on {
  background: linear-gradient(180deg, #FFFFFF 0%, #E4EDFC 100%);
  color: var(--navy-2);
  box-shadow: 0 6px 18px rgba(2, 8, 24, 0.55), 0 1px 0 rgba(255,255,255,0.9) inset;
}
.sift-chip:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 2px; }

/* Four chips at full padding need ~273px and a 320px phone offers 266px inside the console,
   so "200+" fell out of its own pill group. Tighten the padding instead - four chips on one
   line IS the control - and keep wrapping only as a last resort.
   NOTE: this has to sit AFTER the .sift-chip declarations above. Same specificity, so the
   later rule wins; placed before them the media queries are silently ignored. */
@media (max-width: 430px) {
  .sift-track { flex-wrap: wrap; }
  .sift-chip { padding: 9px 12px; font-size: 0.9rem; }
}
@media (max-width: 360px) {
  .sift-chip { padding: 8px 9px; font-size: 0.85rem; }
}

.sift-meta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sift-note { font-size: 0.84rem; color: #B4C9EC; margin: 0; }
.sift-clear {
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 700;
  color: #E6EEFC;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(160, 200, 255, 0.32);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.15s var(--glide), border-color 0.15s var(--glide);
}
.sift-clear:hover { background: rgba(255,255,255,0.19); border-color: rgba(200, 224, 255, 0.55); }

@media (min-width: 700px) {
  .sift-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .sift-rows { grid-template-columns: auto auto auto minmax(0, 1fr); gap: 0 30px; }
}

/* Once the console scrolls away the count still has to be reachable. A full-width bar was
   the obvious answer and the wrong one - directly under a floating header it reads as a
   second header. This is one pill instead, parked bottom-left where the back-to-top button
   is not, and the whole pill is the link back to the filters. */
.siftdock {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 450;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 13px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--edge);
  border-radius: 999px;
  box-shadow: var(--lift-hi);
  transition: transform 0.18s var(--glide), border-color 0.18s var(--glide),
              background 0.18s var(--glide);
}
.siftdock[hidden] { display: none; }
.siftdock:hover {
  transform: translateY(-2px);
  border-color: var(--edge-hi);
  background: var(--panel);
}
.siftdock img { display: block; opacity: 0.62; }
.siftdock-count {
  font-weight: 800;
  font-size: 0.94rem;
  color: var(--navy-2);
  white-space: nowrap;
}
/* the action label reads as the quieter half - the count is what the eye wants first */
.siftdock-act {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--navy-3);
  white-space: nowrap;
  padding-left: 9px;
  border-left: 1px solid var(--edge);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .siftdock {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
  }
}

/* narrow phones: the count alone carries it, the label would push the pill off-screen.
   Clipped rather than display:none, so the link still announces what it does. */
@media (max-width: 420px) {
  .siftdock { left: 12px; bottom: 12px; padding: 8px 13px 8px 11px; }
  .siftdock-act {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* entry cards */
.deckzone {
  padding: 26px 0 54px;
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(61,116,245,0.10) 0%, rgba(244,247,252,0) 62%),
    radial-gradient(620px 380px at 4% 34%, rgba(240,160,32,0.10) 0%, rgba(244,247,252,0) 58%);
}

.entrygrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* the filter hides cards with the hidden attribute, and an author `display` rule beats the
   browser's own [hidden] { display: none } - without this line the chips change the count
   and nothing else */
.entrycard[hidden] { display: none; }
/* a money page can deep-link a card, so it must not land under the fixed bar */
.entrycard { scroll-margin-top: calc(var(--bar-h) + 18px); }

.entrycard {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--bend);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--lift);
  transition: box-shadow 0.18s var(--glide), transform 0.18s var(--glide), border-color 0.18s var(--glide);
}
.entrycard:hover {
  box-shadow: var(--lift-hi);
  transform: translateY(-2px);
  border-color: var(--navy-4);
}

/* logo plate - silver tile the mark sits on */
.entry-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--chrome);
  border-bottom: 1px solid var(--edge);
}
.entry-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.entry-lic {
  font-size: 0.72rem;
  color: var(--faint);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
/* every mark is the same tile: 160x80 on the same dark ground, no exceptions */
.entry-mark {
  flex: 0 0 auto;
  width: 160px; height: 80px;
  max-width: 46%;
  border-radius: var(--bend-sm);
  display: block;
  object-fit: contain;
  background: #0A1424;
}
.entry-markfall {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px; height: 80px;
  max-width: 46%;
  background: #0A1424;
  color: #FFFFFF;
  border-radius: var(--bend-sm);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}
.entry-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy-2);
  letter-spacing: -0.015em;
  min-width: 0;
}

/* the lobby preview runs the full height of the body, offer above stats beside it */
.entry-body {
  padding: 14px 16px 14px;
  flex: 1;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 11px 13px;
}

.entry-lobby {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  width: 124px; height: 100%; min-height: 232px; max-height: 400px;
  border-radius: 9px;
  border: 1px solid var(--edge);
  background: var(--panel-3);
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 2px 8px rgba(18,37,66,0.13);
}
/* The lobby shot is a 264x528 portrait shown through a crop, so most of the operator's own
   home screen never gets seen. This pans it top to bottom and back, holding at each end long
   enough to read, so the whole screenshot is visible across one cycle.
   Only cards the visitor can actually see get the class - 88 images animating at once would
   repaint the whole page every frame. */
@keyframes lobbyscan {
  0%, 12%    { object-position: center top; }
  46%, 58%   { object-position: center bottom; }
  92%, 100%  { object-position: center top; }
}
.entrycard.in-sight .entry-lobby {
  animation: lobbyscan 17s ease-in-out infinite;
  /* a negative delay starts each card mid-cycle, so a column of them is never in lockstep */
  animation-delay: var(--scan-lag, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .entrycard.in-sight .entry-lobby { animation: none; }
}

.entry-lobbyfall {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  width: 124px; min-height: 232px;
  border-radius: 9px;
  border: 1px dashed var(--edge-hi);
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--faint);
  line-height: 1.35;
}
.entry-stack { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }

/* the offer - brass, the single loudest thing on the card */
.entry-give {
  grid-column: 2;
  border-radius: 10px;
  padding: 12px 14px 13px;
  background:
    linear-gradient(180deg, #FFFCF3 0%, var(--brass-wash) 100%);
  border: 1px solid var(--brass-edge);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
  position: relative;
  overflow: hidden;
}
.entry-give::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brass-2) 0%, var(--brass-3) 100%);
}
.give-k {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brass);   /* #A9711A was 3.82:1 on the brass wash */
  margin-bottom: 5px;
}
.give-v {
  font-size: 1.03rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--brass);
  letter-spacing: -0.012em;
}

/* terms live here as pills, never twice on the same card */
.entry-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.entry-flag {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--navy-2);
  background: var(--navy-wash);
  border: 1px solid rgba(27,79,216,0.16);
  border-radius: 999px;
  padding: 4px 11px;
  letter-spacing: 0.01em;
}
.entry-flag.is-term {
  color: var(--ink-2);
  background: var(--panel-2);
  border-color: var(--edge);
}
.entry-flag.is-soft {
  color: var(--leaf);
  background: var(--leaf-wash);
  border-color: rgba(11,122,75,0.22);
}
.entry-flag.is-eu {
  color: #FFFFFF;
  background: var(--navy-3);
  border-color: var(--navy-3);
}

.entry-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--panel-2);
  border-top: 1px solid var(--edge);
}
.entry-checked { font-size: 0.75rem; color: var(--faint); font-weight: 600; }

.go-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--navy-3);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 9px 19px;
  border-radius: var(--bend-sm);
  box-shadow: 0 2px 8px rgba(27,79,216,0.32);
  transition: background 0.15s var(--glide), box-shadow 0.15s var(--glide);
}
.go-cta:hover { background: var(--navy-2); box-shadow: 0 5px 16px rgba(27,79,216,0.42); }
.go-cta img { filter: invert(1); }

@media (min-width: 660px) {
  .entrygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .entrygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phones. Squeezing a portrait phone screenshot next to the offer leaves the offer about
   145px to live in, so it wraps to shreds and the pills stack one per line. Below 520px the
   body stacks instead: the offer takes the full width, the pills get a row to flow along,
   and the lobby shot becomes a wide band cropped to its top - which is the part that shows
   the operator's own header and hero anyway. */
@media (max-width: 520px) {
  .entry-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 13px 14px 14px;
  }
  .entry-stack { order: 1; gap: 10px; }
  .entry-lobby, .entry-lobbyfall {
    order: 2;
    width: 100%;
    height: 136px;
    min-height: 0;
    max-height: none;
    object-position: top center;
  }
  .entry-lobbyfall { height: auto; min-height: 76px; }
  /* the offer finally has room to be read in one or two lines */
  .give-v { font-size: 1.08rem; }
  .entry-head { padding: 12px 14px; gap: 12px; }
  .entry-mark { width: 132px; height: 66px; }
  .entry-foot { padding: 11px 14px; }
}

.deck-empty {
  margin-top: 8px;
  padding: 30px 24px;
  text-align: center;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px dashed var(--edge-hi);
  border-radius: var(--bend);
}

/* prose strips */
.strip { padding: 50px 0; }
.strip-alt {
  background: var(--panel);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.strip h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: 16px; color: var(--navy-2); }
.strip p { max-width: 74ch; margin-bottom: 13px; color: var(--ink-2); }
.strip p:last-child { margin-bottom: 0; }
.strip ul { max-width: 74ch; margin: 0 0 13px 20px; color: var(--ink-2); }
.strip li { margin-bottom: 7px; }

.stripe-rg { background: var(--navy); color: #C6D8F5; }
.stripe-rg h2 { color: #FFFFFF; }
.stripe-rg p { color: #B3C4D9; }
.stripe-rg a { color: #9CC2F0; }

/* prose left, supporting panel right - keeps the strips from running as one long column */
.twin { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.twin-main { min-width: 0; }
.twin-side { min-width: 0; }
.side-h {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy-3);
  margin-bottom: 14px;
}
.side-list { list-style: none; margin: 0; display: grid; gap: 10px; }
.side-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 13px 15px;
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: var(--bend-sm);
}
.side-list img { margin-top: 2px; }
.side-list span { font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.side-list strong { display: block; color: var(--navy-2); font-size: 0.95rem; margin-bottom: 2px; }

.rg-side .side-h { color: var(--brass-2); }
.rg-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.rg-wall a, .rg-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--bend-sm);
  transition: background 0.15s var(--glide), border-color 0.15s var(--glide);
}
.rg-wall a:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.3); }
.rg-wall img { width: 112px; height: auto; }

@media (min-width: 900px) {
  .twin { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 46px; }
}

/* back to top */
.back-to-top {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 450;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-3);
  border: 1px solid var(--navy-4);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--lift-hi);
  transition: opacity 0.2s var(--glide);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top img { filter: invert(1); }

/* footer */
.basefold { background: var(--navy); color: #B7CAEA; margin-top: 0; }
.basefold-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 32px;
}
.base-brand img { height: 31px; }
.basefold-brand p { margin-top: 13px; font-size: 0.91rem; max-width: 46ch; }
.basefold-h {
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 12px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.basefold ul { list-style: none; }
.basefold li { margin-bottom: 9px; font-size: 0.91rem; }
.basefold a { color: var(--brass-2); text-decoration: none; }
.basefold a:hover { text-decoration: underline; }
.basefold-rg p { font-size: 0.91rem; margin-bottom: 11px; max-width: 46ch; }

.basefold-legal {
  border-top: 1px solid rgba(255,255,255,0.11);
  padding-top: 24px;
  padding-bottom: 36px;
  font-size: 0.83rem;
  color: #8397AF;
}
.basefold-legal p { margin-bottom: 11px; max-width: 92ch; }
.agemark {
  display: inline-block;
  background: var(--brass-3);
  color: var(--navy);
  font-weight: 800;
  border-radius: 3px;
  padding: 1px 7px;
  margin-right: 8px;
  font-size: 0.79rem;
}
.basefold-legal-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 4px 0 14px;
}
.basefold-legal-nav li { margin-bottom: 0; font-size: 0.83rem; }

.basefold-cc { margin-top: 8px; }

@media (min-width: 860px) {
  .basefold-grid { grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr; }
}