/* ==========================================================================
   q880 baji - viewport compact stylesheet
   Canvas: 320-430px mobile first, wide screens keep a centered phone canvas.
   Palette: #20B2AA accent / #1E1E1E deep ground / #999999 quiet ink
   Design voice: display headings + readable body, round buttons, square
   cards, grouped cover tiles, fact-first rhythm, color-only motion.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --frameaaf9f-teal: #20B2AA;
  --frameaaf9f-teal-soft: rgba(32, 178, 170, 0.16);
  --frameaaf9f-teal-line: rgba(32, 178, 170, 0.42);
  --frameaaf9f-ground: #1E1E1E;
  --frameaaf9f-ground-deep: #141414;
  --frameaaf9f-ground-raise: #262626;
  --frameaaf9f-quiet: #999999;
  --frameaaf9f-ink: #F2F2F2;
  --frameaaf9f-ink-dim: #C9C9C9;
  --frameaaf9f-line: #333333;
  --frameaaf9f-warn: #D9A441;
  --frameaaf9f-radius-btn: 999px;
  --frameaaf9f-radius-card: 4px;
  --frameaaf9f-gap: 10px;
  --frameaaf9f-font-display: "Anek Bangla", "Nirmala UI", "Noto Sans Bengali", sans-serif;
  --frameaaf9f-font-body: "Noto Sans Bengali", "Nirmala UI", "Segoe UI", sans-serif;
  --frameaaf9f-header-h: 56px;
  --frameaaf9f-bnav-h: calc(62px + env(safe-area-inset-bottom, 0px));
}

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: #0D0D0D;
  color: var(--frameaaf9f-ink-dim);
  font-family: var(--frameaaf9f-font-body);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.1px;
  min-height: 100vh;
}
img { display: block; max-width: 100%; height: auto; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--frameaaf9f-teal); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--frameaaf9f-font-display); color: var(--frameaaf9f-ink); line-height: 1.32; font-weight: 700; }
:focus-visible { outline: 2px solid var(--frameaaf9f-teal); outline-offset: 2px; }

/* ---------- phone canvas ---------- */
.frameaaf9f-canvas {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--frameaaf9f-ground);
  min-height: 100vh;
  overflow-x: hidden;
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.55);
}

/* ---------- skip link ---------- */
.frameaaf9f-skip {
  position: absolute;
  left: 8px;
  top: -52px;
  z-index: 120;
  background: var(--frameaaf9f-teal);
  color: #10221F;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--frameaaf9f-radius-btn);
  transition: top 0.15s linear;
}
.frameaaf9f-skip:focus { top: 8px; }

/* ==========================================================================
   Header - minimal title + action strip
   ========================================================================== */
.frameaaf9f-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: var(--frameaaf9f-header-h);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: rgba(30, 30, 30, 0.94);
  border-bottom: 1px solid var(--frameaaf9f-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.frameaaf9f-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-right: auto;
}
.frameaaf9f-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--frameaaf9f-teal-line);
  flex: 0 0 auto;
}
.frameaaf9f-brandname {
  font-family: var(--frameaaf9f-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--frameaaf9f-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frameaaf9f-brandname em {
  font-style: normal;
  color: var(--frameaaf9f-teal);
}
.frameaaf9f-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* compact round CTA buttons */
.frameaaf9f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 7px 13px;
  border-radius: var(--frameaaf9f-radius-btn);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--frameaaf9f-font-display);
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.frameaaf9f-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.frameaaf9f-btn-cta {
  background: var(--frameaaf9f-teal);
  color: #10221F;
}
.frameaaf9f-btn-cta:hover { background: #2AD0C6; text-decoration: none; }
.frameaaf9f-btn-ghost {
  border: 1px solid var(--frameaaf9f-teal-line);
  color: var(--frameaaf9f-teal);
  background: transparent;
}
.frameaaf9f-btn-ghost:hover { background: var(--frameaaf9f-teal-soft); text-decoration: none; }
.frameaaf9f-menubtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--frameaaf9f-ink);
  border: 1px solid var(--frameaaf9f-line);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.frameaaf9f-menubtn:hover { border-color: var(--frameaaf9f-teal); color: var(--frameaaf9f-teal); }
.frameaaf9f-menubtn svg { width: 20px; height: 20px; }
.frameaaf9f-menubtn .frameaaf9f-ico-x { display: none; }
.frameaaf9f-menubtn.is-open .frameaaf9f-ico-x { display: block; }
.frameaaf9f-menubtn.is-open .frameaaf9f-ico-bars { display: none; }

/* ==========================================================================
   Side drawer menu
   ========================================================================== */
.frameaaf9f-scrim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(8, 8, 8, 0.66);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.frameaaf9f-scrim.is-on { opacity: 1; visibility: visible; }
.frameaaf9f-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: min(84vw, 320px);
  background: var(--frameaaf9f-ground-deep);
  border-right: 1px solid var(--frameaaf9f-line);
  transform: translateX(-102%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 24px;
}
.frameaaf9f-drawer.is-open { transform: translateX(0); }
.frameaaf9f-drawerhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--frameaaf9f-line);
}
.frameaaf9f-drawerhead img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; border: 1px solid var(--frameaaf9f-teal-line); }
.frameaaf9f-drawerhead-t { font-family: var(--frameaaf9f-font-display); font-weight: 800; color: var(--frameaaf9f-ink); font-size: 17px; }
.frameaaf9f-drawerhead-s { font-size: 11px; color: var(--frameaaf9f-quiet); letter-spacing: 0.4px; }
.frameaaf9f-drawergroup { padding: 14px 12px 4px; }
.frameaaf9f-drawerlabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--frameaaf9f-quiet);
  text-transform: uppercase;
  padding: 0 10px 8px;
  font-family: var(--frameaaf9f-font-display);
}
.frameaaf9f-drawerlink {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: var(--frameaaf9f-radius-card);
  color: var(--frameaaf9f-ink-dim);
  font-size: 14.5px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.frameaaf9f-drawerlink svg { width: 18px; height: 18px; color: var(--frameaaf9f-teal); flex: 0 0 auto; }
.frameaaf9f-drawerlink:hover { background: var(--frameaaf9f-teal-soft); color: var(--frameaaf9f-ink); text-decoration: none; }
.frameaaf9f-drawerlink[aria-current="page"] {
  background: var(--frameaaf9f-teal);
  color: #10221F;
  font-weight: 700;
}
.frameaaf9f-drawerlink[aria-current="page"] svg { color: #10221F; }
.frameaaf9f-drawercta {
  margin: 18px 14px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.frameaaf9f-drawercta .frameaaf9f-btn { min-height: 42px; }

/* ==========================================================================
   Main flow
   ========================================================================== */
.frameaaf9f-main {
  padding: var(--frameaaf9f-header-h) 0 calc(var(--frameaaf9f-bnav-h) + 26px);
}
.frameaaf9f-wrap { padding: 0 14px; }

/* ---------- hero carousel ---------- */
.frameaaf9f-hero {
  position: relative;
  margin: 10px 10px 0;
  border: 1px solid var(--frameaaf9f-line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--frameaaf9f-ground-deep);
}
.frameaaf9f-track {
  display: flex;
  transition: transform 0.32s ease;
  touch-action: pan-y;
}
.frameaaf9f-slide {
  flex: 0 0 100%;
  width: 100%;
  display: block;
}
.frameaaf9f-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.frameaaf9f-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.frameaaf9f-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
  background: rgba(242, 242, 242, 0.38);
  transition: background-color 0.2s ease, width 0.2s ease;
}
.frameaaf9f-dot.is-on { background: var(--frameaaf9f-teal); width: 18px; border-radius: 99px; }

/* ---------- intro ---------- */
.frameaaf9f-intro { padding: 18px 14px 4px; }
.frameaaf9f-h1 {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}
.frameaaf9f-h1 mark {
  background: none;
  color: var(--frameaaf9f-teal);
}
.frameaaf9f-lead { font-size: 15px; color: var(--frameaaf9f-ink-dim); }
.frameaaf9f-lead + .frameaaf9f-lead { margin-top: 10px; }
.frameaaf9f-lead a { border-bottom: 1px dashed var(--frameaaf9f-teal-line); }
.frameaaf9f-heroline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.frameaaf9f-heroline .frameaaf9f-btn { min-height: 40px; }

/* ---------- fact strip ---------- */
.frameaaf9f-facts {
  margin: 16px 14px 0;
  border: 1px solid var(--frameaaf9f-line);
  border-left: 3px solid var(--frameaaf9f-teal);
  border-radius: var(--frameaaf9f-radius-card);
  background: var(--frameaaf9f-ground-raise);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.frameaaf9f-fact {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.frameaaf9f-fact + .frameaaf9f-fact { border-left: 1px solid var(--frameaaf9f-line); }
.frameaaf9f-fact:nth-child(n+3) { border-top: 1px solid var(--frameaaf9f-line); }
.frameaaf9f-fact b {
  font-family: var(--frameaaf9f-font-display);
  color: var(--frameaaf9f-ink);
  font-size: 15px;
  line-height: 1.4;
}
.frameaaf9f-fact span { font-size: 11.5px; color: var(--frameaaf9f-quiet); line-height: 1.5; }

/* ==========================================================================
   Sections and game grids
   ========================================================================== */
.frameaaf9f-section { padding: 26px 14px 0; }
.frameaaf9f-sechead { margin-bottom: 10px; }
.frameaaf9f-secttl {
  font-size: 18.5px;
  font-weight: 800;
  padding-left: 10px;
  border-left: 3px solid var(--frameaaf9f-teal);
}
.frameaaf9f-secnote {
  font-size: 13.5px;
  color: var(--frameaaf9f-quiet);
  margin-top: 6px;
  padding-left: 13px;
}
.frameaaf9f-secnote strong { color: var(--frameaaf9f-ink-dim); font-weight: 600; }

/* grouped cover tiles: 4 cols at 320px, 5 cols from 375px+ */
.frameaaf9f-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--frameaaf9f-gap);
}
.frameaaf9f-card {
  border: 1px solid var(--frameaaf9f-line);
  border-radius: var(--frameaaf9f-radius-card);
  background: var(--frameaaf9f-ground-raise);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.frameaaf9f-card:hover { border-color: var(--frameaaf9f-teal-line); }
.frameaaf9f-play {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 44px;
}
.frameaaf9f-cover {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--frameaaf9f-ground-deep);
}
.frameaaf9f-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frameaaf9f-name {
  display: block;
  padding: 6px 5px 7px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--frameaaf9f-ink-dim);
  text-align: center;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.frameaaf9f-card:hover .frameaaf9f-name { color: var(--frameaaf9f-teal); }

/* category chip inside section head */
.frameaaf9f-chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-left: 13px; }
.frameaaf9f-chip {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--frameaaf9f-font-display);
  color: var(--frameaaf9f-teal);
  border: 1px solid var(--frameaaf9f-teal-line);
  border-radius: var(--frameaaf9f-radius-btn);
  padding: 2px 9px;
}

/* ==========================================================================
   Content modules
   ========================================================================== */
.frameaaf9f-body { font-size: 14.5px; color: var(--frameaaf9f-ink-dim); }
.frameaaf9f-body p + p { margin-top: 10px; }
.frameaaf9f-body strong { color: var(--frameaaf9f-ink); font-weight: 600; }
.frameaaf9f-sumline {
  border: 1px solid var(--frameaaf9f-teal-line);
  border-radius: var(--frameaaf9f-radius-card);
  background: var(--frameaaf9f-teal-soft);
  color: var(--frameaaf9f-ink);
  padding: 9px 12px;
  font-size: 13.5px;
  margin: 10px 0 12px;
}
.frameaaf9f-sumline b { color: var(--frameaaf9f-teal); }

/* play style comparison rows */
.frameaaf9f-styles { display: grid; gap: 10px; margin-top: 12px; }
.frameaaf9f-style {
  border: 1px solid var(--frameaaf9f-line);
  border-radius: var(--frameaaf9f-radius-card);
  padding: 11px 12px;
  background: var(--frameaaf9f-ground-raise);
}
.frameaaf9f-style h3 {
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.frameaaf9f-style h3 svg { width: 16px; height: 16px; color: var(--frameaaf9f-teal); flex: 0 0 auto; }
.frameaaf9f-style p { font-size: 13.5px; color: var(--frameaaf9f-quiet); }

/* trick list */
.frameaaf9f-tips { counter-reset: frameaaf9f-tip; margin-top: 12px; display: grid; gap: 9px; }
.frameaaf9f-tip {
  counter-increment: frameaaf9f-tip;
  position: relative;
  padding: 9px 12px 9px 44px;
  border: 1px solid var(--frameaaf9f-line);
  border-radius: var(--frameaaf9f-radius-card);
  background: var(--frameaaf9f-ground-raise);
  font-size: 13.5px;
  color: var(--frameaaf9f-quiet);
}
.frameaaf9f-tip::before {
  content: counter(frameaaf9f-tip, decimal-leading-zero);
  position: absolute;
  left: 12px;
  top: 11px;
  font-family: var(--frameaaf9f-font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--frameaaf9f-teal);
}
.frameaaf9f-tip b { color: var(--frameaaf9f-ink-dim); font-weight: 600; display: block; }

/* use case cards */
.frameaaf9f-cases { display: grid; grid-template-columns: 1fr 1fr;; gap: 10px; margin-top: 12px; }
.frameaaf9f-case {
  border: 1px solid var(--frameaaf9f-line);
  border-radius: var(--frameaaf9f-radius-card);
  background: var(--frameaaf9f-ground-raise);
  padding: 10px 11px;
}
.frameaaf9f-case h3 { font-size: 13.5px; margin-bottom: 3px; color: var(--frameaaf9f-teal); font-weight: 700; font-family: var(--frameaaf9f-font-body); }
.frameaaf9f-case p { font-size: 12.5px; color: var(--frameaaf9f-quiet); line-height: 1.6; }

/* takeaways */
.frameaaf9f-takes { margin-top: 12px; display: grid; gap: 8px; }
.frameaaf9f-take {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 11px;
  border: 1px solid var(--frameaaf9f-line);
  border-radius: var(--frameaaf9f-radius-card);
  font-size: 13.5px;
  color: var(--frameaaf9f-quiet);
}
.frameaaf9f-take svg { width: 16px; height: 16px; color: var(--frameaaf9f-teal); flex: 0 0 auto; margin-top: 4px; }
.frameaaf9f-take b { color: var(--frameaaf9f-ink-dim); font-weight: 600; }

/* ==========================================================================
   Extended footer: directory > brand > promotions > disclaimer
   ========================================================================== */
.frameaaf9f-extfoot {
  margin: 30px 10px 0;
  border: 1px solid var(--frameaaf9f-line);
  border-radius: 8px;
  background: var(--frameaaf9f-ground-deep);
  padding: 16px 12px 14px;
}
.frameaaf9f-exttl {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.frameaaf9f-exttl svg { width: 17px; height: 17px; color: var(--frameaaf9f-teal); }
.frameaaf9f-dirlabel {
  font-family: var(--frameaaf9f-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--frameaaf9f-quiet);
  margin: 12px 0 7px;
}
.frameaaf9f-dirgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.frameaaf9f-dirlink {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--frameaaf9f-line);
  border-radius: var(--frameaaf9f-radius-card);
  background: var(--frameaaf9f-ground-raise);
  color: var(--frameaaf9f-ink-dim);
  font-size: 12.5px;
  line-height: 1.4;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.frameaaf9f-dirlink svg { width: 14px; height: 14px; color: var(--frameaaf9f-teal); flex: 0 0 auto; }
.frameaaf9f-dirlink:hover { border-color: var(--frameaaf9f-teal-line); color: var(--frameaaf9f-teal); text-decoration: none; }
.frameaaf9f-brandnote {
  margin-top: 14px;
  padding: 10px 11px;
  border-left: 3px solid var(--frameaaf9f-teal);
  background: var(--frameaaf9f-teal-soft);
  border-radius: var(--frameaaf9f-radius-card);
  font-size: 13px;
  color: var(--frameaaf9f-ink-dim);
}
.frameaaf9f-brandnote b { color: var(--frameaaf9f-ink); }
/* promotion shortcuts - horizontal rail */
.frameaaf9f-promos {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  margin-top: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.frameaaf9f-promos::-webkit-scrollbar { display: none; }
.frameaaf9f-shortcut {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--frameaaf9f-radius-btn);
  border: 1px solid var(--frameaaf9f-teal-line);
  background: var(--frameaaf9f-teal-soft);
  color: var(--frameaaf9f-ink);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--frameaaf9f-font-display);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.frameaaf9f-shortcut svg { width: 15px; height: 15px; color: var(--frameaaf9f-teal); flex: 0 0 auto; }
.frameaaf9f-shortcut:hover { background: var(--frameaaf9f-teal); color: #10221F; }
.frameaaf9f-shortcut:hover svg { color: #10221F; }
.frameaaf9f-disclaim {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--frameaaf9f-line);
  font-size: 11.5px;
  color: var(--frameaaf9f-quiet);
  line-height: 1.7;
}
.frameaaf9f-disclaim b { color: var(--frameaaf9f-warn); font-weight: 600; }

/* ==========================================================================
   Common footer + bottom nav
   ========================================================================== */
.frameaaf9f-footer {
  padding: 22px 14px 16px;
  text-align: center;
  border-top: 1px solid var(--frameaaf9f-line);
  margin-top: 26px;
}
.frameaaf9f-footer p { font-size: 11.5px; color: var(--frameaaf9f-quiet); line-height: 1.7; }
.frameaaf9f-footer b { color: var(--frameaaf9f-ink-dim); font-weight: 600; }

/* outlined function bar */
.frameaaf9f-bnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: var(--frameaaf9f-bnav-h);
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(20, 20, 20, 0.96);
  border-top: 1px solid var(--frameaaf9f-teal-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.frameaaf9f-bitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  color: var(--frameaaf9f-quiet);
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.frameaaf9f-bitem svg {
  width: 21px;
  height: 21px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.frameaaf9f-bitem .frameaaf9f-blbl {
  font-size: 10.5px;
  font-family: var(--frameaaf9f-font-display);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.frameaaf9f-bitem:hover { color: var(--frameaaf9f-ink); }
/* active = contrast inversion, icon morphs stroke to fill */
.frameaaf9f-bitem.is-on { color: #10221F; background: var(--frameaaf9f-teal); border-radius: 10px 10px 0 0; }
.frameaaf9f-bitem.is-on svg { color: #10221F; }
.frameaaf9f-bitem.is-on .frameaaf9f-ico-fill { display: block; }
.frameaaf9f-bitem.is-on .frameaaf9f-ico-line { display: none; }
.frameaaf9f-bitem .frameaaf9f-ico-fill { display: none; }

/* ==========================================================================
   Responsive ladder
   ========================================================================== */
@media (min-width: 375px) {
  .frameaaf9f-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .frameaaf9f-h1 { font-size: 25px; }
  .frameaaf9f-secttl { font-size: 20px; }
  .frameaaf9f-name { font-size: 12px; }
}
@media (min-width: 414px) {
  .frameaaf9f-body, .frameaaf9f-lead { font-size: 15px; }
  .frameaaf9f-case p { font-size: 13px; }
}
@media (max-width: 359px) {
  .frameaaf9f-btn { padding: 6px 10px; font-size: 12px; }
  .frameaaf9f-brandname { font-size: 15.5px; }
}

/* respects users who prefer calm rendering */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .frameaaf9f-track, .frameaaf9f-drawer, .frameaaf9f-scrim, .frameaaf9f-bitem svg { transition: none; }
}

/* print keeps text readable */
@media print {
  .frameaaf9f-header, .frameaaf9f-bnav, .frameaaf9f-drawer, .frameaaf9f-scrim, .frameaaf9f-hero { display: none; }
  body { background: #fff; color: #111; }
  .frameaaf9f-canvas { box-shadow: none; max-width: none; }
}