/* ==========================================================================
   644 jll login - viewport mobile stylesheet
   Design tokens: dark navy canvas, lavender accents, square CTAs,
   technical headings + open Bengali body text, light-rounded cards.
   Class prefix: framef60ba-
   ========================================================================== */

:root {
  --framef60ba-ink: #212F3D;        /* primary dark background */
  --framef60ba-ink-deep: #182230;   /* deepest background band */
  --framef60ba-ink-soft: #2C3E50;   /* secondary panel dark */
  --framef60ba-lav: #D8BFD8;        /* lavender accent */
  --framef60ba-paper: #F8F8FF;      /* light body text */
  --framef60ba-mute: #808080;       /* muted secondary text */
  --framef60ba-blue: #6495ED;       /* cornflower action color */
  --framef60ba-line: rgba(216, 191, 216, 0.16);
  --framef60ba-head-font: 'Chakra Petch', 'Hind Siliguri', sans-serif;
  --framef60ba-body-font: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  background: var(--framef60ba-ink-deep);
  color: var(--framef60ba-paper);
  font-family: var(--framef60ba-body-font);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--framef60ba-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font-family: var(--framef60ba-body-font);
  cursor: pointer;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--framef60ba-lav);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Phone canvas: content lives inside a 430px shell, centered on wide screens
   -------------------------------------------------------------------------- */

.framef60ba-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--framef60ba-ink) 0%, var(--framef60ba-ink-soft) 58%, var(--framef60ba-ink) 100%);
  overflow-x: hidden;
}

@media (min-width: 431px) {
  body { background: #101823; }
  .framef60ba-shell {
    box-shadow: 0 0 42px rgba(0, 0, 0, 0.55);
    border-left: 1px solid var(--framef60ba-line);
    border-right: 1px solid var(--framef60ba-line);
  }
}

/* --------------------------------------------------------------------------
   Fixed top bar: two-layer layout (brand row above action row)
   -------------------------------------------------------------------------- */

.framef60ba-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 60;
  background: rgba(24, 34, 48, 0.97);
  border-bottom: 1px solid var(--framef60ba-line);
}

.framef60ba-brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 6px 12px 4px;
  background: linear-gradient(90deg, rgba(100, 149, 237, 0.14), rgba(216, 191, 216, 0.10));
}

.framef60ba-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--framef60ba-paper);
}

.framef60ba-logo {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid rgba(216, 191, 216, 0.35);
  background: #0f1622;
  object-fit: cover;
  flex: 0 0 auto;
}

.framef60ba-brandname {
  font-family: var(--framef60ba-head-font);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* action row: register / login / menu */

.framef60ba-actionrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 9px;
}

.framef60ba-btn {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: 2px;                 /* square-corner, high-contrast CTA */
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.framef60ba-btn:active { transform: translateY(1px); filter: brightness(1.12); }

.framef60ba-btn-register {
  background: var(--framef60ba-blue);
  color: #101a26;
}

.framef60ba-btn-login {
  background: transparent;
  color: var(--framef60ba-lav);
  border-color: var(--framef60ba-lav);
}

.framef60ba-menubtn {
  flex: 0 0 46px;
  width: 46px;
  min-height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(216, 191, 216, 0.08);
  border: 1px solid var(--framef60ba-line);
  border-radius: 2px;
  color: var(--framef60ba-paper);
}

.framef60ba-menubtn-ico {
  width: 20px;
  height: 16px;
  position: relative;
}

.framef60ba-menubtn-ico span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--framef60ba-lav);
  border-radius: 1px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.framef60ba-menubtn-ico span:nth-child(1) { top: 0; }
.framef60ba-menubtn-ico span:nth-child(2) { top: 7px; }
.framef60ba-menubtn-ico span:nth-child(3) { top: 14px; }

.framef60ba-menubtn[aria-expanded="true"] .framef60ba-menubtn-ico span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.framef60ba-menubtn[aria-expanded="true"] .framef60ba-menubtn-ico span:nth-child(2) { opacity: 0; }
.framef60ba-menubtn[aria-expanded="true"] .framef60ba-menubtn-ico span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* layered dropdown menu */

.framef60ba-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #131c29;
  border-bottom: 2px solid var(--framef60ba-blue);
  max-height: 72vh;
  overflow-y: auto;
  padding: 6px 12px 16px;
  animation: framef60bamenuDrop 0.18s ease;
}

@keyframes framef60bamenuDrop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.framef60ba-mgroup + .framef60ba-mgroup { margin-top: 10px; }

.framef60ba-mlabel {
  margin: 8px 0 4px;
  font-family: var(--framef60ba-head-font);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--framef60ba-mute);
}

.framef60ba-mlinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.framef60ba-mlink {
  display: block;
  min-height: 44px;
  padding: 10px 10px;
  background: rgba(216, 191, 216, 0.05);
  border: 1px solid var(--framef60ba-line);
  border-left: 3px solid var(--framef60ba-blue);
  border-radius: 4px;
  color: var(--framef60ba-paper);
  font-size: 13px;
  line-height: 1.35;
}

.framef60ba-mlink:hover { text-decoration: none; background: rgba(100, 149, 237, 0.16); }

/* --------------------------------------------------------------------------
   Main flow
   -------------------------------------------------------------------------- */

main.framef60ba-main {
  padding: 104px 12px 0;
}

.framef60ba-h1 {
  font-family: var(--framef60ba-head-font);
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 14px 0 8px;
  color: var(--framef60ba-paper);
}

.framef60ba-lead {
  margin: 0 0 14px;
  color: rgba(248, 248, 255, 0.86);
  font-size: 14.5px;
}

/* promo banner carousel */

.framef60ba-stage {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--framef60ba-line);
  background: #0f1622;
}

.framef60ba-track {
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}

.framef60ba-slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  background: #0f1622;
  text-align: left;
  display: block;
}

.framef60ba-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.framef60ba-slide-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 10px;
  background: linear-gradient(180deg, rgba(24, 34, 48, 0) 0%, rgba(16, 24, 35, 0.92) 78%);
}

.framef60ba-slide-t {
  display: block;
  font-family: var(--framef60ba-head-font);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--framef60ba-paper);
}

.framef60ba-slide-s {
  display: block;
  font-size: 12.5px;
  color: var(--framef60ba-lav);
  margin-top: 2px;
}

.framef60ba-dots {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}

.framef60ba-dot {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
}

.framef60ba-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: rgba(216, 191, 216, 0.4);
  transition: background 0.15s ease, transform 0.15s ease;
}

.framef60ba-dot.framef60ba-dot-on::before {
  background: var(--framef60ba-blue);
  transform: scale(1.25);
}

/* content sections */

.framef60ba-section {
  margin-top: 22px;
  padding-top: 6px;
}

.framef60ba-h2 {
  font-family: var(--framef60ba-head-font);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 4px solid var(--framef60ba-blue);
  color: var(--framef60ba-paper);
  letter-spacing: 0.01em;
}

.framef60ba-h3 {
  font-family: var(--framef60ba-head-font);
  font-size: 14.5px;
  font-weight: 600;
  margin: 16px 0 6px;
  color: var(--framef60ba-lav);
  letter-spacing: 0.02em;
}

.framef60ba-section p {
  margin: 0 0 10px;
  font-size: 14.5px;
  color: rgba(248, 248, 255, 0.88);
}

.framef60ba-note {
  font-size: 13px;
  color: rgba(216, 191, 216, 0.8);
  background: rgba(216, 191, 216, 0.06);
  border: 1px dashed rgba(216, 191, 216, 0.28);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0 12px;
}

/* game decks: pure image cards with short caption under the art */

.framef60ba-deck {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 6px;
  margin: 10px 0 4px;
}

@media (min-width: 375px) {
  .framef60ba-deck { grid-template-columns: repeat(5, 1fr); }
}

.framef60ba-game {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px;
  background: rgba(216, 191, 216, 0.05);
  border: 1px solid var(--framef60ba-line);
  border-radius: 8px;                 /* light rounding on cards only */
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.framef60ba-game:hover,
.framef60ba-game:active {
  border-color: var(--framef60ba-blue);
  transform: translateY(-2px);
}

.framef60ba-game img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: #0f1622;
}

.framef60ba-game-name {
  font-size: 10.8px;
  line-height: 1.3;
  color: rgba(248, 248, 255, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 28px;
}

/* bullet and step lists */

.framef60ba-list {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
}

.framef60ba-list li {
  position: relative;
  padding: 6px 8px 6px 26px;
  font-size: 14px;
  color: rgba(248, 248, 255, 0.88);
  border-bottom: 1px solid rgba(216, 191, 216, 0.08);
}

.framef60ba-list li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 13px;
  width: 7px;
  height: 7px;
  background: var(--framef60ba-blue);
  border-radius: 1px;
}

.framef60ba-steps {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: framef60bastep;
}

.framef60ba-steps li {
  counter-increment: framef60bastep;
  position: relative;
  padding: 8px 8px 8px 40px;
  margin-bottom: 7px;
  background: rgba(44, 62, 80, 0.5);
  border: 1px solid var(--framef60ba-line);
  border-radius: 6px;
  font-size: 14px;
  color: rgba(248, 248, 255, 0.9);
}

.framef60ba-steps li::before {
  content: counter(framef60bastep, decimal-leading-zero);
  position: absolute;
  left: 8px;
  top: 9px;
  font-family: var(--framef60ba-head-font);
  font-size: 13px;
  font-weight: 700;
  color: #101a26;
  background: var(--framef60ba-lav);
  padding: 1px 5px;
  border-radius: 2px;
}

/* inline CTA row */

.framef60ba-ctarow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.framef60ba-ctarow .framef60ba-btn { flex: 1 1 140px; }

.framef60ba-ctasolid {
  background: var(--framef60ba-lav);
  color: #182230;
}

.framef60ba-ctaflat {
  background: transparent;
  color: var(--framef60ba-blue);
  border-color: var(--framef60ba-blue);
}

/* FAQ accordion */

.framef60ba-faq {
  border: 1px solid var(--framef60ba-line);
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0 6px;
  background: rgba(24, 34, 48, 0.55);
}

.framef60ba-faq + .framef60ba-faq { margin-top: 8px; }

.framef60ba-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--framef60ba-paper);
  list-style: none;
}

.framef60ba-q::-webkit-details-marker { display: none; }

.framef60ba-q::after {
  content: "+";
  font-family: var(--framef60ba-head-font);
  font-size: 17px;
  color: var(--framef60ba-blue);
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.framef60ba-faq[open] .framef60ba-q::after { transform: rotate(45deg); }

.framef60ba-a {
  padding: 0 12px 12px;
  font-size: 13.8px;
  color: rgba(248, 248, 255, 0.85);
}

.framef60ba-a p { margin: 0 0 8px; }

/* comparison table */

.framef60ba-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--framef60ba-line);
  border-radius: 8px;
  margin: 10px 0;
  -webkit-overflow-scrolling: touch;
}

.framef60ba-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 300px;
}

.framef60ba-table th,
.framef60ba-table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(216, 191, 216, 0.1);
  vertical-align: top;
  color: rgba(248, 248, 255, 0.88);
}

.framef60ba-table th {
  font-family: var(--framef60ba-head-font);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--framef60ba-lav);
  background: rgba(216, 191, 216, 0.07);
}

.framef60ba-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Extended homepage footer: brand intro > two-column directory >
   promo actions > short disclaimer
   -------------------------------------------------------------------------- */

.framef60ba-xfoot {
  margin: 26px -12px 0;
  border-top: 1px solid var(--framef60ba-line);
  padding: 16px 12px 10px;
  background: rgba(16, 24, 35, 0.6);
}

.framef60ba-xfoot-brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.framef60ba-xfoot-brand .framef60ba-logo { width: 40px; height: 40px; }

.framef60ba-xfoot-brand p {
  margin: 0;
  font-size: 13px;
  color: rgba(248, 248, 255, 0.8);
}

.framef60ba-dirgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0 4px;
  padding: 0;
  list-style: none;
}

.framef60ba-dirgrid a {
  display: block;
  min-height: 44px;
  padding: 9px 9px;
  font-size: 12.5px;
  line-height: 1.3;
  color: rgba(248, 248, 255, 0.88);
  background: rgba(216, 191, 216, 0.05);
  border: 1px solid var(--framef60ba-line);
  border-radius: 5px;
}

.framef60ba-dirgrid a:hover { text-decoration: none; border-color: var(--framef60ba-blue); }

.framef60ba-promorow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 4px;
}

.framef60ba-promoact {
  min-height: 48px;
  padding: 8px 10px;
  font-size: 12.8px;
  font-weight: 700;
  line-height: 1.3;
  color: #101a26;
  background: var(--framef60ba-blue);
  border: 1px solid rgba(16, 26, 38, 0.4);
  border-radius: 2px;
  text-align: center;
}

.framef60ba-promoact:nth-child(even) {
  background: var(--framef60ba-lav);
}

.framef60ba-promoact:active { transform: translateY(1px); }

.framef60ba-disclaimer {
  margin: 12px 0 4px;
  padding: 9px 11px;
  border-left: 3px solid var(--framef60ba-mute);
  background: rgba(128, 128, 128, 0.1);
  font-size: 11.8px;
  line-height: 1.6;
  color: rgba(248, 248, 255, 0.66);
}

/* --------------------------------------------------------------------------
   Common footer: copyright line + five-role mobile bottom nav
   -------------------------------------------------------------------------- */

.framef60ba-foot {
  text-align: center;
  margin: 0 -12px;
  padding: 12px 12px calc(86px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--framef60ba-line);
}

.framef60ba-copyright {
  margin: 0;
  font-size: 11.5px;
  color: var(--framef60ba-mute);
  letter-spacing: 0.03em;
}

.framef60ba-bnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 70;
  display: flex;
  align-items: stretch;
  background: rgba(19, 28, 41, 0.98);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
}

/* brand accent band across the top edge of the bottom nav */
.framef60ba-bnav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--framef60ba-lav), var(--framef60ba-blue) 55%, var(--framef60ba-lav));
}

.framef60ba-bnav-item {
  flex: 1 1 0;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: 0;
  padding: 4px 2px;
  color: rgba(248, 248, 255, 0.72);
  position: relative;
}

.framef60ba-bnav-item:hover { text-decoration: none; }

.framef60ba-bnav-ico {
  width: 23px;
  height: 23px;
  display: block;
}

.framef60ba-bnav-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* light activation mark under the icon */
.framef60ba-bnav-mark {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.16s ease;
}

.framef60ba-bnav-label {
  font-size: 10.6px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  transition: color 0.16s ease, transform 0.16s ease;
}

.framef60ba-bnav-item:active .framef60ba-bnav-label { transform: translateY(-1px); }

.framef60ba-bnav-item.framef60ba-bnav-on {
  color: var(--framef60ba-lav);
}

.framef60ba-bnav-item.framef60ba-bnav-on .framef60ba-bnav-mark {
  background: var(--framef60ba-blue);
}

.framef60ba-bnav-item.framef60ba-bnav-on .framef60ba-bnav-label {
  color: var(--framef60ba-lav);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Help-page reading tools: route maps, audit rows and compact fact blocks
   -------------------------------------------------------------------------- */

.framef60ba-pageintro {
  padding: 14px 12px 15px;
  border: 1px solid rgba(100, 149, 237, 0.34);
  border-top: 3px solid var(--framef60ba-blue);
  background: linear-gradient(135deg, rgba(100, 149, 237, 0.14), rgba(216, 191, 216, 0.06));
  box-shadow: 8px 8px 0 rgba(15, 22, 34, 0.32);
}

.framef60ba-pageintro .framef60ba-h1 { margin-top: 0; }

.framef60ba-kicker {
  margin: 0 0 5px;
  color: var(--framef60ba-lav);
  font-family: var(--framef60ba-head-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.framef60ba-route {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: framef60baroute;
}

.framef60ba-route li {
  counter-increment: framef60baroute;
  position: relative;
  min-height: 48px;
  padding: 8px 9px 8px 42px;
  border-left: 2px solid var(--framef60ba-blue);
  background: rgba(15, 22, 34, 0.62);
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(248, 248, 255, 0.9);
}

.framef60ba-route li::before {
  content: counter(framef60baroute, decimal-leading-zero);
  position: absolute;
  left: 9px;
  top: 10px;
  color: var(--framef60ba-ink-deep);
  background: var(--framef60ba-lav);
  padding: 1px 5px;
  font-family: var(--framef60ba-head-font);
  font-size: 12px;
  font-weight: 700;
}

.framef60ba-callout {
  margin: 10px 0;
  padding: 11px 12px;
  border: 1px solid rgba(216, 191, 216, 0.28);
  border-radius: 6px;
  background: rgba(216, 191, 216, 0.08);
  color: rgba(248, 248, 255, 0.9);
  font-size: 14px;
}

.framef60ba-callout strong { color: var(--framef60ba-lav); }

.framef60ba-branchgrid {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.framef60ba-branch {
  padding: 10px 11px;
  border-top: 2px solid var(--framef60ba-lav);
  background: rgba(44, 62, 80, 0.56);
}

.framef60ba-branch h3 {
  margin: 0 0 4px;
  color: var(--framef60ba-lav);
  font-family: var(--framef60ba-head-font);
  font-size: 14px;
}

.framef60ba-branch p { margin: 0; font-size: 13.6px; }

.framef60ba-termgrid {
  display: grid;
  gap: 7px;
  margin: 10px 0;
}

.framef60ba-term {
  display: grid;
  grid-template-columns: minmax(92px, 0.7fr) 1.3fr;
  gap: 8px;
  padding: 9px;
  border-bottom: 1px solid rgba(216, 191, 216, 0.14);
  background: rgba(15, 22, 34, 0.38);
}

.framef60ba-term dt {
  color: var(--framef60ba-lav);
  font-family: var(--framef60ba-head-font);
  font-size: 12.5px;
  font-weight: 700;
}

.framef60ba-term dd { margin: 0; font-size: 13.2px; color: rgba(248, 248, 255, 0.84); }

.framef60ba-qalist {
  margin: 10px 0;
  padding: 0;
  list-style: none;
  counter-reset: framef60baqa;
}

.framef60ba-qalist li {
  counter-increment: framef60baqa;
  margin: 0 0 8px;
  padding: 10px 10px 10px 38px;
  position: relative;
  border: 1px solid var(--framef60ba-line);
  background: rgba(24, 34, 48, 0.58);
  font-size: 13.7px;
}

.framef60ba-qalist li::before {
  content: "Q" counter(framef60baqa);
  position: absolute;
  left: 9px;
  top: 10px;
  color: var(--framef60ba-blue);
  font-family: var(--framef60ba-head-font);
  font-weight: 700;
  font-size: 12px;
}

.framef60ba-split {
  display: grid;
  gap: 9px;
  margin: 10px 0;
}

.framef60ba-pane {
  padding: 11px;
  border: 1px solid var(--framef60ba-line);
  background: rgba(44, 62, 80, 0.5);
}

.framef60ba-pane h3 {
  margin: 0 0 6px;
  color: var(--framef60ba-lav);
  font-family: var(--framef60ba-head-font);
  font-size: 14px;
}

.framef60ba-pane ul { margin: 0; padding-left: 18px; }
.framef60ba-pane li { margin: 3px 0; font-size: 13.3px; color: rgba(248, 248, 255, 0.86); }

.framef60ba-promo-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 12px 0;
  padding: 10px;
  border-left: 4px solid var(--framef60ba-blue);
  background: linear-gradient(90deg, rgba(100, 149, 237, 0.18), rgba(216, 191, 216, 0.05));
}

.framef60ba-promo-band p { margin: 0; font-size: 13.5px; }
.framef60ba-promo-band .framef60ba-btn { flex: 0 0 auto; min-width: 92px; min-height: 44px; }

/* Review-specific evidence blocks use a different reading order from the guide. */
.framef60ba-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  align-items: center;
  margin: 9px 0;
  padding: 9px 10px;
  border: 1px solid var(--framef60ba-line);
  background: rgba(15, 22, 34, 0.5);
}

.framef60ba-meter span { font-size: 13.2px; }
.framef60ba-meter b { color: var(--framef60ba-lav); font-family: var(--framef60ba-head-font); font-size: 12px; }
.framef60ba-meter i {
  grid-column: 1 / -1;
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--framef60ba-blue) 0 72%, rgba(216, 191, 216, 0.18) 72% 100%);
}

.framef60ba-symptom {
  margin: 9px 0;
  border-left: 3px solid var(--framef60ba-blue);
  padding: 9px 10px;
  background: rgba(44, 62, 80, 0.52);
}

.framef60ba-symptom h3 { margin: 0 0 4px; color: var(--framef60ba-paper); font-size: 14px; }
.framef60ba-symptom p { margin: 0; font-size: 13.5px; }

.framef60ba-evidence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 10px 0;
}

.framef60ba-evidence div {
  min-height: 70px;
  padding: 9px;
  border-top: 2px solid var(--framef60ba-lav);
  background: rgba(216, 191, 216, 0.07);
}

.framef60ba-evidence strong { display: block; color: var(--framef60ba-lav); font-family: var(--framef60ba-head-font); font-size: 12px; }
.framef60ba-evidence span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: rgba(248, 248, 255, 0.84); }

.framef60ba-js .framef60ba-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.34s ease, transform 0.34s ease;
}

.framef60ba-js .framef60ba-reveal.framef60ba-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .framef60ba-js .framef60ba-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .framef60ba-track { transition: none; }
  .framef60ba-menu { animation: none; }
}

/* helper: visually hidden captions for screen readers */
.framef60ba-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}