/* ==========================================================================
   Casino Apps — palette-compact base stylesheet (casino-apps.click)
   Mobile-first phone canvas: 320–430 px. Wide screens keep the canvas centred.
   Palette anchors: #00FA9A spring / #DEE2E6 mist / #34495E slate / #006400 pine
   Design tone: poster titles + narrow body, low-radius zones, grouped cover
   cards, step-advance rhythm, icon micro-states, full-width CTAs.
   ========================================================================== */

:root {
  --framea7d8e-spring: #00FA9A;
  --framea7d8e-mist: #DEE2E6;
  --framea7d8e-slate: #34495E;
  --framea7d8e-pine: #006400;

  /* Shades derived from the four anchors above. */
  --framea7d8e-bg: #26374B;
  --framea7d8e-bg-deep: #1C2938;
  --framea7d8e-panel: #30435A;
  --framea7d8e-panel-lift: #3A4F69;
  --framea7d8e-pine-deep: #0E3F21;
  --framea7d8e-line: rgba(222, 226, 230, 0.16);
  --framea7d8e-line-strong: rgba(222, 226, 230, 0.28);
  --framea7d8e-dim: #A9B8C6;
  --framea7d8e-faint: #8299AB;
  --framea7d8e-glow: rgba(0, 250, 154, 0.32);
  --framea7d8e-glow-soft: rgba(0, 250, 154, 0.14);
  --framea7d8e-ink: #06251A;
  --framea7d8e-danger: #E4A11B;

  --framea7d8e-font-body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --framea7d8e-font-poster: "Arial Black", "Segoe UI Black", "Helvetica Neue", Impact, sans-serif;
  --framea7d8e-font-narrow: "Arial Narrow", "Roboto Condensed", "Segoe UI", Arial, sans-serif;

  --framea7d8e-top-h: 58px;
  --framea7d8e-tab-h: 62px;
  --framea7d8e-r: 6px;
  --framea7d8e-r-lg: 10px;
  --framea7d8e-touch: 44px;
  --framea7d8e-gap: 6px;
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--framea7d8e-font-body);
  background: var(--framea7d8e-bg-deep);
  color: var(--framea7d8e-mist);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

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

a { color: var(--framea7d8e-spring); text-decoration: none; }
a:active { opacity: 0.85; }

ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--framea7d8e-spring);
  outline-offset: 2px;
  border-radius: 3px;
}

.framea7d8e-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--framea7d8e-spring);
  color: var(--framea7d8e-ink);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 0 0 var(--framea7d8e-r) 0;
}
.framea7d8e-skip:focus { left: 0; }

/* Phone canvas: centred column, hard stop at 430 px. */
.framea7d8e-shell {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--framea7d8e-bg);
  min-height: 100vh;
  position: relative;
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.55);
}

.framea7d8e-main {
  padding-top: calc(var(--framea7d8e-top-h) + 8px);
  /* Keep content clear of the fixed bottom action bar. */
  padding-bottom: calc(var(--framea7d8e-tab-h) + 30px + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   Typography: poster voice for headings, narrow measure for body copy
   -------------------------------------------------------------------------- */
.framea7d8e-h1,
.framea7d8e-h2,
.framea7d8e-h3 {
  font-family: var(--framea7d8e-font-poster);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.2px;
  text-wrap: balance;
}

.framea7d8e-h1 {
  font-size: clamp(26px, 8vw, 34px);
  text-transform: uppercase;
}

.framea7d8e-h2 {
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.framea7d8e-h3 {
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.framea7d8e-copy {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 15.5px;
  line-height: 1.68;
  max-width: 42ch;
  color: var(--framea7d8e-mist);
}
.framea7d8e-copy + .framea7d8e-copy { margin-top: 10px; }
.framea7d8e-copy a { text-decoration: underline; text-underline-offset: 3px; }
.framea7d8e-copy strong { color: #FFFFFF; font-weight: 700; }

/* Section shell: low-radius zoned blocks divided by rules, not shadows. */
.framea7d8e-section {
  padding: 20px 14px 24px;
  border-bottom: 1px solid var(--framea7d8e-line);
  scroll-margin-top: calc(var(--framea7d8e-top-h) + 6px);
}
.framea7d8e-section:last-of-type { border-bottom: 0; }
.framea7d8e-section--deep { background: var(--framea7d8e-bg-deep); }
.framea7d8e-section--pine { background: linear-gradient(180deg, var(--framea7d8e-pine-deep), var(--framea7d8e-bg-deep) 78%); }

.framea7d8e-kicker {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--framea7d8e-spring);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.framea7d8e-kicker::before {
  content: "";
  width: 18px;
  height: 3px;
  background: var(--framea7d8e-spring);
  flex: none;
}

/* --------------------------------------------------------------------------
   Top action band (minimal title band + action cluster)
   -------------------------------------------------------------------------- */
.framea7d8e-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 430px;
  height: var(--framea7d8e-top-h);
  z-index: 90;
  background: linear-gradient(180deg, rgba(28, 41, 56, 0.98), rgba(28, 41, 56, 0.94));
  border-bottom: 1px solid var(--framea7d8e-line-strong);
  backdrop-filter: blur(6px);
}

.framea7d8e-band {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 10px 0 12px;
}

.framea7d8e-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-right: auto;
}

.framea7d8e-logo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 7px;
  border: 1px solid var(--framea7d8e-line-strong);
  background: var(--framea7d8e-panel);
  object-fit: cover;
}

.framea7d8e-name {
  font-family: var(--framea7d8e-font-poster);
  font-weight: 900;
  font-size: 16.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
}
.framea7d8e-name em {
  font-style: normal;
  color: var(--framea7d8e-spring);
}

/* Register / Login cluster */
.framea7d8e-btnmini {
  font-family: var(--framea7d8e-font-narrow);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--framea7d8e-r);
  white-space: nowrap;
  flex: none;
}

.framea7d8e-btnmini--join {
  background: linear-gradient(180deg, var(--framea7d8e-spring), #00C87C);
  color: var(--framea7d8e-ink);
  box-shadow: 0 2px 10px var(--framea7d8e-glow);
}
.framea7d8e-btnmini--join:active {
  box-shadow: 0 0 18px var(--framea7d8e-glow);
  transform: translateY(1px);
}

.framea7d8e-btnmini--login {
  color: var(--framea7d8e-mist);
  border: 1px solid var(--framea7d8e-line-strong);
  background: rgba(48, 67, 90, 0.55);
}
.framea7d8e-btnmini--login:active { border-color: var(--framea7d8e-spring); }

/* Hamburger toggle */
.framea7d8e-burger {
  width: var(--framea7d8e-touch);
  height: var(--framea7d8e-touch);
  flex: none;
  display: grid;
  place-items: center;
  gap: 0;
  margin-right: -8px;
}
.framea7d8e-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--framea7d8e-mist);
  margin: 2.5px 0;
  border-radius: 1px;
  transition: transform 0.22s ease, opacity 0.18s ease, background 0.22s ease;
}
.framea7d8e-burger.framea7d8e-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--framea7d8e-spring); }
.framea7d8e-burger.framea7d8e-open span:nth-child(2) { opacity: 0; }
.framea7d8e-burger.framea7d8e-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--framea7d8e-spring); }

/* --------------------------------------------------------------------------
   Expandable navigation drawer
   -------------------------------------------------------------------------- */
.framea7d8e-drawer {
  position: fixed;
  top: var(--framea7d8e-top-h);
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 430px;
  z-index: 85;
  background: var(--framea7d8e-bg-deep);
  border-bottom: 1px solid var(--framea7d8e-line-strong);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.framea7d8e-drawer.framea7d8e-open { max-height: 72vh; overflow-y: auto; }

.framea7d8e-drawer-inner { padding: 12px 12px 16px; }

.framea7d8e-drawer-group + .framea7d8e-drawer-group { margin-top: 12px; }

.framea7d8e-drawer-label {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--framea7d8e-faint);
  padding: 6px 4px 4px;
}

.framea7d8e-drawer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.framea7d8e-drawer-links a {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--framea7d8e-mist);
  min-height: var(--framea7d8e-touch);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--framea7d8e-line);
  border-radius: var(--framea7d8e-r);
  background: rgba(48, 67, 90, 0.35);
}
.framea7d8e-drawer-links a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--framea7d8e-faint);
  flex: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.framea7d8e-drawer-links a:hover,
.framea7d8e-drawer-links a:focus-visible { border-color: var(--framea7d8e-spring); }
.framea7d8e-drawer-links a:hover::before,
.framea7d8e-drawer-links a:focus-visible::before {
  background: var(--framea7d8e-spring);
  box-shadow: 0 0 6px var(--framea7d8e-glow);
}
.framea7d8e-drawer-links a.framea7d8e-here { color: #FFFFFF; border-color: var(--framea7d8e-spring); }
.framea7d8e-drawer-links a.framea7d8e-here::before { background: var(--framea7d8e-spring); }

.framea7d8e-drawer-cta {
  margin-top: 14px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.framea7d8e-hero {
  padding: 22px 14px 20px;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(0, 250, 154, 0.14), transparent 55%),
    linear-gradient(180deg, var(--framea7d8e-bg-deep), var(--framea7d8e-bg));
  border-bottom: 1px solid var(--framea7d8e-line);
}

.framea7d8e-hero-rule {
  width: 46px;
  height: 4px;
  background: var(--framea7d8e-spring);
  margin: 12px 0 12px;
}

.framea7d8e-hero .framea7d8e-copy { margin-top: 2px; }

.framea7d8e-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 16px;
}

.framea7d8e-chip {
  border: 1px solid var(--framea7d8e-line-strong);
  border-radius: var(--framea7d8e-r);
  background: rgba(48, 67, 90, 0.5);
  padding: 8px 6px 7px;
  text-align: center;
}
.framea7d8e-chip b {
  display: block;
  font-family: var(--framea7d8e-font-poster);
  font-size: 18px;
  color: var(--framea7d8e-spring);
  line-height: 1.1;
}
.framea7d8e-chip small {
  display: block;
  font-family: var(--framea7d8e-font-narrow);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--framea7d8e-dim);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Carousel
   -------------------------------------------------------------------------- */
.framea7d8e-stage {
  position: relative;
  border: 1px solid var(--framea7d8e-line-strong);
  border-radius: var(--framea7d8e-r-lg);
  overflow: hidden;
  background: var(--framea7d8e-bg-deep);
  aspect-ratio: 2 / 1;
}

.framea7d8e-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.framea7d8e-slide.framea7d8e-on { opacity: 1; visibility: visible; position: relative; }

.framea7d8e-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.framea7d8e-slide-cap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 26px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(14, 63, 33, 0.92) 62%);
  display: block;
}
.framea7d8e-slide-cap b {
  display: block;
  font-family: var(--framea7d8e-font-poster);
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #FFFFFF;
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.framea7d8e-slide-cap span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-family: var(--framea7d8e-font-narrow);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--framea7d8e-spring);
}
.framea7d8e-slide-cap span::after {
  content: "\2192";
  transition: transform 0.2s ease;
}
a.framea7d8e-slide:focus-visible .framea7d8e-slide-cap span::after,
a.framea7d8e-slide:hover .framea7d8e-slide-cap span::after { transform: translateX(4px); }

.framea7d8e-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 2px;
}
.framea7d8e-dot {
  width: 22px;
  height: 10px;
  border-radius: 5px;
  background: var(--framea7d8e-panel-lift);
  border: 1px solid var(--framea7d8e-line);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.framea7d8e-dot.framea7d8e-on {
  background: var(--framea7d8e-spring);
  box-shadow: 0 0 8px var(--framea7d8e-glow);
}

/* --------------------------------------------------------------------------
   Zone jump strip (horizontal scroll chips)
   -------------------------------------------------------------------------- */
.framea7d8e-jump {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px 14px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.framea7d8e-jump::-webkit-scrollbar { display: none; }

.framea7d8e-jump a {
  flex: none;
  font-family: var(--framea7d8e-font-narrow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--framea7d8e-mist);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--framea7d8e-line-strong);
  border-radius: 999px;
  background: rgba(48, 67, 90, 0.5);
}
.framea7d8e-jump a b { color: var(--framea7d8e-spring); font-weight: 800; }
.framea7d8e-jump a:active { border-color: var(--framea7d8e-spring); box-shadow: 0 0 10px var(--framea7d8e-glow-soft); }

/* --------------------------------------------------------------------------
   Game zones: grouped cover cards
   -------------------------------------------------------------------------- */
.framea7d8e-zone {
  border: 1px solid var(--framea7d8e-line-strong);
  border-radius: var(--framea7d8e-r-lg);
  background: linear-gradient(180deg, rgba(48, 67, 90, 0.55), rgba(28, 41, 56, 0.65));
  margin-top: 14px;
  overflow: hidden;
}

.framea7d8e-zone-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 11px;
  border-bottom: 2px solid var(--framea7d8e-pine);
  background: rgba(14, 63, 33, 0.35);
}

.framea7d8e-zone-no {
  font-family: var(--framea7d8e-font-poster);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--framea7d8e-spring);
  opacity: 0.85;
  flex: none;
}

.framea7d8e-zone-title {
  min-width: 0;
  flex: 1;
}
.framea7d8e-zone-title h3 {
  color: #FFFFFF;
}
.framea7d8e-zone-title p {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 12.5px;
  color: var(--framea7d8e-dim);
  margin-top: 2px;
  line-height: 1.4;
}

.framea7d8e-zone-count {
  flex: none;
  font-family: var(--framea7d8e-font-narrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--framea7d8e-ink);
  background: var(--framea7d8e-spring);
  border-radius: 999px;
  padding: 3px 9px;
}

.framea7d8e-zone-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--framea7d8e-gap);
  padding: 10px;
}

/* 5 per row once the canvas approaches its 430 px ceiling. */
@media (min-width: 400px) {
  .framea7d8e-zone-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
}

.framea7d8e-gtile {
  display: block;
  min-width: 0;
  border-radius: var(--framea7d8e-r);
  transition: transform 0.16s ease;
}
.framea7d8e-gtile:active { transform: translateY(-2px) scale(0.98); }

.framea7d8e-gcover {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--framea7d8e-r);
  border: 1px solid var(--framea7d8e-line);
  overflow: hidden;
  background: var(--framea7d8e-panel);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.framea7d8e-gcover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.framea7d8e-gtile:hover .framea7d8e-gcover,
.framea7d8e-gtile:focus-visible .framea7d8e-gcover {
  border-color: var(--framea7d8e-spring);
  box-shadow: 0 0 12px var(--framea7d8e-glow-soft);
}

.framea7d8e-gname {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--framea7d8e-font-narrow);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--framea7d8e-mist);
  text-align: center;
  margin-top: 4px;
  min-height: 27px;
}
@media (min-width: 400px) { .framea7d8e-gname { font-size: 11px; min-height: 28px; } }

/* --------------------------------------------------------------------------
   Full-width CTAs
   -------------------------------------------------------------------------- */
.framea7d8e-cta {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border-radius: var(--framea7d8e-r);
  background: linear-gradient(180deg, var(--framea7d8e-spring), #00C87C);
  color: var(--framea7d8e-ink);
  font-family: var(--framea7d8e-font-poster);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 3px 16px var(--framea7d8e-glow-soft);
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}
.framea7d8e-cta:active {
  transform: translateY(1px);
  box-shadow: 0 0 20px var(--framea7d8e-glow);
}

.framea7d8e-cta--ghost {
  background: transparent;
  color: var(--framea7d8e-spring);
  border: 1px solid var(--framea7d8e-spring);
  box-shadow: none;
  font-family: var(--framea7d8e-font-narrow);
  font-weight: 700;
  font-size: 14px;
}
.framea7d8e-cta--ghost:active { background: var(--framea7d8e-glow-soft); }

.framea7d8e-cta + .framea7d8e-cta { margin-top: 8px; }
.framea7d8e-cta-note {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 12.5px;
  color: var(--framea7d8e-dim);
  text-align: center;
  margin-top: 9px;
}
.framea7d8e-cta-note a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Step-advance blocks (numbered rhythm)
   -------------------------------------------------------------------------- */
.framea7d8e-steps { margin-top: 14px; display: grid; gap: 10px; }

.framea7d8e-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  border: 1px solid var(--framea7d8e-line);
  border-left: 3px solid var(--framea7d8e-pine);
  border-radius: var(--framea7d8e-r);
  background: rgba(48, 67, 90, 0.4);
  padding: 10px 12px 11px;
}
.framea7d8e-step:nth-child(2n) { border-left-color: var(--framea7d8e-spring); }

.framea7d8e-step-no {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--framea7d8e-spring);
  color: var(--framea7d8e-spring);
  font-family: var(--framea7d8e-font-poster);
  font-weight: 900;
  font-size: 14px;
  display: grid;
  place-items: center;
  background: var(--framea7d8e-bg-deep);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.framea7d8e-step:hover .framea7d8e-step-no { box-shadow: 0 0 10px var(--framea7d8e-glow-soft); }

.framea7d8e-step h4 {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1.3;
}
.framea7d8e-step p {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 13.5px;
  color: var(--framea7d8e-dim);
  margin-top: 4px;
  line-height: 1.55;
}
.framea7d8e-step p a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Category highlight tiles (2-up)
   -------------------------------------------------------------------------- */
.framea7d8e-picks { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.framea7d8e-pick {
  border: 1px solid var(--framea7d8e-line-strong);
  border-radius: var(--framea7d8e-r);
  background: rgba(48, 67, 90, 0.45);
  padding: 11px 11px 12px;
}
.framea7d8e-pick b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--framea7d8e-font-poster);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--framea7d8e-spring);
  line-height: 1.2;
}
.framea7d8e-pick p {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 13px;
  color: var(--framea7d8e-mist);
  line-height: 1.5;
  margin-top: 6px;
}
.framea7d8e-pick p a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Fact ledger (Page Fact Summary)
   -------------------------------------------------------------------------- */
.framea7d8e-ledger {
  margin-top: 14px;
  border: 1px solid var(--framea7d8e-line-strong);
  border-radius: var(--framea7d8e-r-lg);
  overflow: hidden;
}
.framea7d8e-ledger-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 11px 12px;
  background: rgba(48, 67, 90, 0.38);
  border-bottom: 1px solid var(--framea7d8e-line);
}
.framea7d8e-ledger-row:last-child { border-bottom: 0; }
.framea7d8e-ledger-row:nth-child(2n) { background: rgba(28, 41, 56, 0.55); }

.framea7d8e-ledger-key {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--framea7d8e-spring);
  line-height: 1.35;
  padding-top: 2px;
}
.framea7d8e-ledger-val {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 13.5px;
  color: var(--framea7d8e-mist);
  line-height: 1.55;
}
.framea7d8e-ledger-val strong { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Scenario routes
   -------------------------------------------------------------------------- */
.framea7d8e-routes { margin-top: 14px; display: grid; gap: 10px; }

.framea7d8e-route {
  border: 1px solid var(--framea7d8e-line-strong);
  border-radius: var(--framea7d8e-r);
  background: linear-gradient(135deg, rgba(14, 63, 33, 0.4), rgba(48, 67, 90, 0.35));
  padding: 12px 12px 13px;
}
.framea7d8e-route-tag {
  display: inline-block;
  font-family: var(--framea7d8e-font-narrow);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--framea7d8e-ink);
  background: var(--framea7d8e-spring);
  border-radius: 3px;
  padding: 2px 7px;
}
.framea7d8e-route h4 {
  font-family: var(--framea7d8e-font-poster);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-top: 8px;
  line-height: 1.25;
}
.framea7d8e-route p {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 13.5px;
  color: var(--framea7d8e-mist);
  line-height: 1.55;
  margin-top: 5px;
}
.framea7d8e-route p a { text-decoration: underline; text-underline-offset: 3px; }
.framea7d8e-route ol {
  margin-top: 8px;
  border-top: 1px dashed var(--framea7d8e-line-strong);
  padding-top: 8px;
  display: grid;
  gap: 5px;
}
.framea7d8e-route ol li {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 13px;
  color: var(--framea7d8e-dim);
  display: flex;
  gap: 8px;
  line-height: 1.5;
}
.framea7d8e-route ol li::before {
  content: counter(framea7d8e-route-step);
  counter-increment: framea7d8e-route-step;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid var(--framea7d8e-spring);
  color: var(--framea7d8e-spring);
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.framea7d8e-route ol { counter-reset: framea7d8e-route-step; }

/* --------------------------------------------------------------------------
   Extended footer (home only): promotions > brand > directory > disclaimer
   -------------------------------------------------------------------------- */
.framea7d8e-ext {
  border-top: 2px solid var(--framea7d8e-pine);
  background: var(--framea7d8e-bg-deep);
  padding: 20px 14px 22px;
}

.framea7d8e-ext-title {
  font-family: var(--framea7d8e-font-poster);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}
.framea7d8e-ext-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--framea7d8e-line-strong);
}

.framea7d8e-ext-promos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.framea7d8e-ext-promo {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid var(--framea7d8e-line-strong);
  border-radius: var(--framea7d8e-r);
  background: linear-gradient(180deg, rgba(48, 67, 90, 0.6), rgba(14, 63, 33, 0.45));
  color: var(--framea7d8e-mist);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.framea7d8e-ext-promo:hover, .framea7d8e-ext-promo:focus-visible {
  border-color: var(--framea7d8e-spring);
  box-shadow: 0 0 12px var(--framea7d8e-glow-soft);
}
.framea7d8e-ext-promo svg { flex: none; }
.framea7d8e-ext-promo b {
  display: block;
  font-family: var(--framea7d8e-font-narrow);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1.25;
}
.framea7d8e-ext-promo small {
  display: block;
  font-family: var(--framea7d8e-font-narrow);
  font-size: 11px;
  color: var(--framea7d8e-dim);
  margin-top: 2px;
  line-height: 1.35;
}

.framea7d8e-ext-brand {
  margin-top: 16px;
  font-family: var(--framea7d8e-font-narrow);
  font-size: 13.5px;
  color: var(--framea7d8e-dim);
  line-height: 1.6;
  border-left: 3px solid var(--framea7d8e-pine);
  padding-left: 10px;
}
.framea7d8e-ext-brand strong { color: var(--framea7d8e-mist); }

.framea7d8e-ext-dir {
  margin-top: 16px;
  border: 1px solid var(--framea7d8e-line);
  border-radius: var(--framea7d8e-r);
  padding: 10px 12px 12px;
  background: rgba(48, 67, 90, 0.3);
}
.framea7d8e-ext-dir-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin-top: 8px;
}
.framea7d8e-ext-dir a {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--framea7d8e-mist);
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border-bottom: 1px dotted var(--framea7d8e-line);
}
.framea7d8e-ext-dir a::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: none;
  background: var(--framea7d8e-spring);
  transform: rotate(45deg);
}
.framea7d8e-ext-dir a:hover, .framea7d8e-ext-dir a:focus-visible { color: #FFFFFF; }

.framea7d8e-ext-note {
  margin-top: 14px;
  font-family: var(--framea7d8e-font-narrow);
  font-size: 12px;
  color: var(--framea7d8e-faint);
  line-height: 1.55;
  border-top: 1px solid var(--framea7d8e-line);
  padding-top: 10px;
}

/* --------------------------------------------------------------------------
   Common footer bar
   -------------------------------------------------------------------------- */
.framea7d8e-foot {
  padding: 14px;
  text-align: center;
  background: #14202C;
  border-top: 1px solid var(--framea7d8e-line);
}
.framea7d8e-foot p {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--framea7d8e-faint);
}
.framea7d8e-foot p b { color: var(--framea7d8e-dim); }

/* --------------------------------------------------------------------------
   Fixed bottom action bar (segmented, two-tone icons)
   -------------------------------------------------------------------------- */
.framea7d8e-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 430px;
  height: calc(var(--framea7d8e-tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 95;
  background: linear-gradient(180deg, rgba(20, 32, 44, 0.97), rgba(14, 23, 32, 0.99));
  border-top: 1px solid var(--framea7d8e-line-strong);
  backdrop-filter: blur(6px);
}

.framea7d8e-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--framea7d8e-tab-h);
}

.framea7d8e-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--framea7d8e-touch);
  color: var(--framea7d8e-dim);
  position: relative;
  transition: color 0.2s ease;
}
.framea7d8e-tab span {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

/* Two-tone icon: base stroke + accent detail. */
.framea7d8e-ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.framea7d8e-ic .framea7d8e-ic-dot { fill: var(--framea7d8e-faint); stroke: none; }

.framea7d8e-tab:hover { color: var(--framea7d8e-mist); }

.framea7d8e-tab.framea7d8e-on { color: var(--framea7d8e-spring); }
.framea7d8e-tab.framea7d8e-on .framea7d8e-ic-dot { fill: var(--framea7d8e-spring); }
.framea7d8e-tab.framea7d8e-on::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 2px;
  background: var(--framea7d8e-spring);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 10px var(--framea7d8e-glow);
}
.framea7d8e-tab:active .framea7d8e-ic { transform: translateY(-1px) scale(1.06); }
.framea7d8e-ic { transition: transform 0.18s ease; }

/* --------------------------------------------------------------------------
   Micro layout helpers
   -------------------------------------------------------------------------- */
.framea7d8e-lead {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 14px;
  color: var(--framea7d8e-mist);
  margin-top: 6px;
}

.framea7d8e-note {
  font-family: var(--framea7d8e-font-narrow);
  font-size: 12.5px;
  color: var(--framea7d8e-dim);
  border: 1px dashed var(--framea7d8e-line-strong);
  border-radius: var(--framea7d8e-r);
  padding: 9px 11px;
  margin-top: 14px;
  line-height: 1.55;
  background: rgba(28, 41, 56, 0.4);
}

.framea7d8e-headline { margin-bottom: 8px; }
.framea7d8e-headside {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Wide-screen note: keep the phone canvas centred and legible.
   -------------------------------------------------------------------------- */
@media (min-width: 431px) {
  body { background: radial-gradient(120% 100% at 50% 0%, #22303F, #101821); }
}

@media (max-width: 359px) {
  .framea7d8e-chips { grid-template-columns: 1fr 1fr; }
  .framea7d8e-picks { grid-template-columns: 1fr; }
  .framea7d8e-ext-promos { grid-template-columns: 1fr; }
  .framea7d8e-name { font-size: 15px; }
  .framea7d8e-btnmini { font-size: 11.5px; padding: 6px 7px; }
  .framea7d8e-ledger-row { grid-template-columns: 84px 1fr; gap: 8px; }
}