/* ==========================================================================
   colorplus.sbs — palette-compact-bf3537.css
   Mobile-first color-game strategy hub (320-430px canvas).
   Class prefix:  framebf353-
   Variable prefix: --framebf353-*
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Brand palette (deep = background, light = text) */
  --framebf353-ink:        #0E1621;   /* deep navy background */
  --framebf353-ink-2:      #142031;   /* lifted panel */
  --framebf353-ink-3:      #1c2a40;   /* card surface */
  --framebf353-slate:      #5D5D5D;   /* muted gray */
  --framebf353-coral:      #FF7F50;   /* primary accent / CTA */
  --framebf353-coral-soft: rgba(255,127,80,0.16);
  --framebf353-silver:     #C0C0C0;   /* secondary text */
  --framebf353-cream:      #FFFACD;   /* highlight text */
  --framebf353-line:       rgba(192,192,192,0.14);
  --framebf353-line-soft:  rgba(192,192,192,0.08);

  /* Type */
  --framebf353-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Shape */
  --framebf353-r-sm: 8px;
  --framebf353-r-md: 12px;
  --framebf353-r-lg: 16px;
  --framebf353-r-pill: 999px;

  /* Motion */
  --framebf353-ease: cubic-bezier(0.32, 0.72, 0.18, 1);
  --framebf353-fast: 160ms;
  --framebf353-mid:  260ms;

  /* Layout */
  --framebf353-canvas: 480px;
  --framebf353-header-h: 60px;
  --framebf353-bottomnav-h: 68px;
  --framebf353-safe-bottom: 18px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  font-family:var(--framebf353-font);
  background:var(--framebf353-ink);
  color:var(--framebf353-silver);
  line-height:1.6;
  font-size:15px;
  min-height:100vh;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
h1,h2,h3,h4{ color:var(--framebf353-cream); font-weight:700; line-height:1.3; }

/* ---------- Mobile canvas ---------- */
.framebf353-shell{
  width:100%;
  max-width:var(--framebf353-canvas);
  margin:0 auto;
  min-height:100vh;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(255,127,80,0.10), transparent 60%),
    linear-gradient(180deg, var(--framebf353-ink) 0%, #0b121c 100%);
  position:relative;
  box-shadow:0 0 0 1px rgba(0,0,0,0.4);
  overflow:hidden;
}
.framebf353-shell::before{
  /* subtle coral hairline on canvas edge for non-sym brand frame */
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--framebf353-coral) 0%, var(--framebf353-coral) 38%, transparent 38%, transparent 60%, var(--framebf353-cream) 60%, var(--framebf353-cream) 72%, transparent 72%);
  z-index:60;
}

/* ==========================================================================
   HEADER — non-symmetrical brand header
   ========================================================================== */
.framebf353-header{
  position:sticky; top:0; z-index:50;
  height:var(--framebf353-header-h);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:0 14px;
  background:rgba(14,22,33,0.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--framebf353-line);
}
.framebf353-brand{
  display:flex; align-items:center; gap:9px;
  min-width:0;
}
.framebf353-logo{
  width:38px; height:38px; border-radius:10px; object-fit:cover;
  border:1px solid var(--framebf353-coral);
  box-shadow:0 2px 8px rgba(255,127,80,0.30);
  flex:0 0 auto;
}
.framebf353-brand-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.framebf353-brand-name{
  font-size:17px; font-weight:800; letter-spacing:.2px;
  color:var(--framebf353-cream);
  white-space:nowrap;
}
.framebf353-brand-tag{
  font-size:10.5px; color:var(--framebf353-coral); font-weight:600;
  text-transform:uppercase; letter-spacing:.6px;
}

/* Action zone */
.framebf353-actions{ display:flex; align-items:center; gap:8px; justify-self:end; }
.framebf353-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px;
  border-radius:var(--framebf353-r-pill);
  font-size:13.5px; font-weight:700;
  transition:transform var(--framebf353-fast) var(--framebf353-ease),
             filter var(--framebf353-fast) var(--framebf353-ease),
             background var(--framebf353-fast) var(--framebf353-ease);
  white-space:nowrap;
  min-height:44px;
}
.framebf353-btn:active{ transform:scale(0.94); }
.framebf353-btn-primary{
  background:linear-gradient(135deg, var(--framebf353-coral), #ff9d6c);
  color:#1a0f08;
  box-shadow:0 4px 14px rgba(255,127,80,0.45);
}
.framebf353-btn-ghost{
  background:transparent;
  color:var(--framebf353-cream);
  border:1px solid var(--framebf353-line);
}
.framebf353-btn-ghost:active{ background:var(--framebf353-coral-soft); }

.framebf353-menu-btn{
  width:44px; height:44px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--framebf353-ink-2);
  border:1px solid var(--framebf353-line);
  transition:transform var(--framebf353-fast) var(--framebf353-ease),
             background var(--framebf353-fast) var(--framebf353-ease);
}
.framebf353-menu-btn:active{ transform:scale(0.92); background:var(--framebf353-coral-soft); }
.framebf353-menu-btn svg{ width:22px; height:22px; stroke:var(--framebf353-cream); }

/* ==========================================================================
   EXPANDABLE MENU — partition menu page (slide-down panel)
   ========================================================================== */
.framebf353-menu{
  position:fixed; top:0; left:50%; transform:translate(-50%, -104%);
  width:100%; max-width:var(--framebf353-canvas);
  background:linear-gradient(180deg, #0b121c 0%, #0E1621 100%);
  z-index:70;
  padding:14px 16px calc(var(--framebf353-safe-bottom) + 12px);
  border-bottom:1px solid var(--framebf353-line);
  box-shadow:0 24px 50px rgba(0,0,0,0.55);
  transition:transform var(--framebf353-mid) var(--framebf353-ease);
  max-height:88vh; overflow-y:auto;
}
.framebf353-menu[data-open="true"]{ transform:translate(-50%, 0); }
.framebf353-menu-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 2px 14px;
  border-bottom:1px dashed var(--framebf353-line);
  margin-bottom:14px;
}
.framebf353-menu-top h3{ font-size:14px; color:var(--framebf353-cream); letter-spacing:.3px; }
.framebf353-menu-top h3 span{ color:var(--framebf353-coral); }
.framebf353-menu-close{
  width:38px; height:38px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--framebf353-ink-2); border:1px solid var(--framebf353-line);
  color:var(--framebf353-cream);
}
.framebf353-menu-close:active{ transform:scale(0.92); }

.framebf353-menu-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.framebf353-menu-link{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px;
  background:var(--framebf353-ink-2);
  border:1px solid var(--framebf353-line-soft);
  border-radius:var(--framebf353-r-md);
  color:var(--framebf353-silver);
  font-size:13px; font-weight:600;
  min-height:44px;
  transition:transform var(--framebf353-fast) var(--framebf353-ease),
             background var(--framebf353-fast) var(--framebf353-ease),
             color var(--framebf353-fast) var(--framebf353-ease);
}
.framebf353-menu-link:active{ transform:scale(0.96); background:var(--framebf353-coral-soft); color:var(--framebf353-cream); }
.framebf353-menu-link .framebf353-dot{
  width:8px; height:8px; border-radius:50%; background:var(--framebf353-coral); flex:0 0 auto;
}
.framebf353-menu-link[data-kind="promo"]{ color:var(--framebf353-cream); }
.framebf353-menu-link[data-kind="promo"] .framebf353-dot{ background:var(--framebf353-cream); }
.framebf353-menu-promo-row{
  grid-column:1 / -1;
  display:flex; gap:8px; margin-top:6px;
}
.framebf353-menu-promo-row .framebf353-btn{ flex:1; height:42px; }

.framebf353-menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  z-index:65; opacity:0; pointer-events:none;
  transition:opacity var(--framebf353-mid) var(--framebf353-ease);
}
.framebf353-menu-backdrop[data-open="true"]{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   MAIN
   ========================================================================== */
.framebf353-main{
  padding:14px 14px calc(var(--framebf353-bottomnav-h) + var(--framebf353-safe-bottom) + 16px);
}

/* ---------- Hero ---------- */
.framebf353-hero{
  position:relative;
  border-radius:var(--framebf353-r-lg);
  overflow:hidden;
  padding:18px 16px 16px;
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(255,127,80,0.22), transparent 55%),
    linear-gradient(135deg, #16233a 0%, #0d1626 100%);
  border:1px solid var(--framebf353-line);
  margin-bottom:14px;
}
.framebf353-hero h1{
  font-size:24px; line-height:1.18;
  background:linear-gradient(120deg, var(--framebf353-cream), var(--framebf353-coral));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:8px;
}
.framebf353-hero p{
  font-size:13.5px; color:var(--framebf353-silver); max-width:32em;
}
.framebf353-hero-cta{ display:flex; gap:8px; margin-top:14px; }
.framebf353-hero-cta .framebf353-btn{ flex:1; height:42px; }

/* ---------- Promo carousel ---------- */
.framebf353-carousel{
  position:relative;
  border-radius:var(--framebf353-r-lg);
  overflow:hidden;
  margin-bottom:18px;
  border:1px solid var(--framebf353-line);
  background:#000;
}
.framebf353-carousel-track{
  display:flex; transition:transform var(--framebf353-mid) var(--framebf353-ease);
  will-change:transform;
}
.framebf353-slide{
  flex:0 0 100%; position:relative;
}
.framebf353-slide img{
  width:100%; height:170px; object-fit:cover;
}
.framebf353-slide-overlay{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
}
.framebf353-slide-caption{
  background:rgba(14,22,33,0.78);
  padding:7px 11px; border-radius:10px;
  border:1px solid var(--framebf353-coral-soft);
  max-width:72%;
}
.framebf353-slide-caption strong{
  color:var(--framebf353-cream); font-size:13px; display:block;
}
.framebf353-slide-caption span{ color:var(--framebf353-coral); font-size:11px; font-weight:600; }
.framebf353-slide-cta{
  height:40px; padding:0 14px; border-radius:var(--framebf353-r-pill);
  background:var(--framebf353-coral); color:#1a0f08; font-weight:800; font-size:12.5px;
  min-height:44px; display:inline-flex; align-items:center;
  transition:transform var(--framebf353-fast) var(--framebf353-ease);
}
.framebf353-slide-cta:active{ transform:scale(0.92); }
.framebf353-carousel-dots{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:3;
}
.framebf353-carousel-dots button{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,250,205,0.35); transition:all var(--framebf353-fast) var(--framebf353-ease);
}
.framebf353-carousel-dots button.is-active{ background:var(--framebf353-coral); width:18px; border-radius:4px; }

/* ---------- Section header ---------- */
.framebf353-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:22px 0 10px; gap:10px;
}
.framebf353-section-title{
  font-size:16px; color:var(--framebf353-cream); font-weight:800;
  display:flex; align-items:center; gap:8px;
}
.framebf353-section-title::before{
  content:""; width:4px; height:18px; border-radius:2px;
  background:linear-gradient(180deg, var(--framebf353-coral), #ff9d6c);
}
.framebf353-section-tag{
  font-size:10.5px; color:var(--framebf353-silver);
  background:var(--framebf353-ink-2); padding:3px 8px; border-radius:var(--framebf353-r-pill);
  border:1px solid var(--framebf353-line-soft);
}

/* ---------- Category chip strip ---------- */
.framebf353-catbar{
  display:flex; gap:7px; overflow-x:auto;
  padding-bottom:8px; margin:0 -14px 10px; padding-left:14px; padding-right:14px;
  scrollbar-width:none;
}
.framebf353-catbar::-webkit-scrollbar{ display:none; }
.framebf353-chip{
  flex:0 0 auto;
  padding:7px 12px; border-radius:var(--framebf353-r-pill);
  background:var(--framebf353-ink-2);
  border:1px solid var(--framebf353-line-soft);
  color:var(--framebf353-silver);
  font-size:12.5px; font-weight:600;
  transition:all var(--framebf353-fast) var(--framebf353-ease);
}
.framebf353-chip:active,
.framebf353-chip[data-active="true"]{
  background:var(--framebf353-coral); color:#1a0f08; border-color:transparent;
}

/* ---------- Game grid (compact, 4 cols at 320 / 4-5 at 375+) ---------- */
.framebf353-game-section{
  margin-bottom:24px;
  scroll-margin-top:calc(var(--framebf353-header-h) + 8px);
}
.framebf353-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.framebf353-card{
  position:relative;
  background:var(--framebf353-ink-2);
  border:1px solid var(--framebf353-line-soft);
  border-radius:var(--framebf353-r-md);
  overflow:hidden;
  transition:transform var(--framebf353-fast) var(--framebf353-ease),
             border-color var(--framebf353-fast) var(--framebf353-ease);
  cursor:pointer;
  display:block;
}
.framebf353-card:active{
  transform:scale(0.95);
  border-color:var(--framebf353-coral);
}
.framebf353-card-media{
  position:relative; aspect-ratio:1/1; background:#0a121f;
}
.framebf353-card-media img{ width:100%; height:100%; object-fit:cover; }
.framebf353-card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.framebf353-card-name{
  padding:6px 6px 7px;
  font-size:10.5px; line-height:1.25;
  color:var(--framebf353-cream); font-weight:600;
  text-align:center;
  min-height:30px;
  display:flex; align-items:center; justify-content:center;
  word-break:break-word;
}
.framebf353-card-hot{
  position:absolute; top:5px; left:5px;
  background:var(--framebf353-coral); color:#1a0f08;
  font-size:9px; font-weight:800; padding:2px 5px; border-radius:5px;
  letter-spacing:.4px;
}

/* Wide screens: 5 columns between 375-430 */
@media (min-width:375px){
  .framebf353-grid{ grid-template-columns:repeat(5, 1fr); gap:9px; }
  .framebf353-card-name{ font-size:11px; }
}

/* ==========================================================================
   CONTENT MODULES (after games)
   ========================================================================== */
.framebf353-module{
  background:var(--framebf353-ink-2);
  border:1px solid var(--framebf353-line-soft);
  border-radius:var(--framebf353-r-lg);
  padding:16px 15px;
  margin-bottom:14px;
}
.framebf353-module h2{
  font-size:17px; color:var(--framebf353-cream);
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
}
.framebf353-module h2 .framebf353-ico{
  width:22px; height:22px; flex:0 0 auto; color:var(--framebf353-coral);
}
.framebf353-module > p.lead{
  color:var(--framebf353-silver); font-size:13px; margin:2px 0 12px;
}
.framebf353-module h3{
  font-size:13.5px; color:var(--framebf353-cream);
  margin:14px 0 6px; font-weight:700;
}

/* Security checklist rows */
.framebf353-trust-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.framebf353-trust-item{
  background:var(--framebf353-ink-3);
  border-radius:var(--framebf353-r-md);
  padding:10px 11px;
  border:1px solid var(--framebf353-line-soft);
}
.framebf353-trust-item strong{ color:var(--framebf353-cream); font-size:12.5px; display:block; margin-bottom:3px; }
.framebf353-trust-item span{ color:var(--framebf353-silver); font-size:11.5px; line-height:1.45; }

/* Trick cards */
.framebf353-trick-list{ display:grid; gap:8px; }
.framebf353-trick{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 11px;
  background:var(--framebf353-ink-3);
  border-radius:var(--framebf353-r-md);
  border-left:3px solid var(--framebf353-coral);
}
.framebf353-trick-num{
  width:22px; height:22px; border-radius:50%;
  background:var(--framebf353-coral-soft); color:var(--framebf353-coral);
  font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.framebf353-trick-body strong{ color:var(--framebf353-cream); font-size:12.5px; display:block; margin-bottom:2px; }
.framebf353-trick-body span{ color:var(--framebf353-silver); font-size:11.5px; line-height:1.45; }

/* FAQ */
.framebf353-faq-item{
  border-bottom:1px solid var(--framebf353-line-soft);
  padding:11px 0;
}
.framebf353-faq-item:last-child{ border-bottom:0; }
.framebf353-faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left;
  color:var(--framebf353-cream); font-size:13px; font-weight:600;
  min-height:40px;
}
.framebf353-faq-q .framebf353-toggle{
  width:22px; height:22px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--framebf353-coral);
  transition:transform var(--framebf353-fast) var(--framebf353-ease);
}
.framebf353-faq-item[data-open="true"] .framebf353-toggle{ transform:rotate(45deg); }
.framebf353-faq-a{
  color:var(--framebf353-silver); font-size:12.5px; line-height:1.55;
  max-height:0; overflow:hidden; padding-top:0;
  transition:max-height var(--framebf353-mid) var(--framebf353-ease),
             padding-top var(--framebf353-mid) var(--framebf353-ease);
}
.framebf353-faq-item[data-open="true"] .framebf353-faq-a{ max-height:260px; padding-top:8px; }

/* Payment chips */
.framebf353-pay-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.framebf353-pay{
  background:var(--framebf353-ink-3);
  border:1px solid var(--framebf353-line-soft);
  border-radius:var(--framebf353-r-md);
  padding:10px 6px; text-align:center;
}
.framebf353-pay strong{ color:var(--framebf353-cream); font-size:12px; display:block; }
.framebf353-pay span{ color:var(--framebf353-coral); font-size:10px; font-weight:600; }

/* Scenario answer */
.framebf353-scenario{
  background:var(--framebf353-ink-3);
  border-radius:var(--framebf353-r-md);
  padding:12px 13px; border:1px solid var(--framebf353-line-soft);
  margin-bottom:8px;
}
.framebf353-scenario-q{ color:var(--framebf353-cream); font-size:12.5px; font-weight:600; margin-bottom:4px; }
.framebf353-scenario-a{ color:var(--framebf353-silver); font-size:12px; line-height:1.5; }

/* Decision checklist */
.framebf353-checklist{ display:grid; gap:7px; }
.framebf353-check{
  display:flex; gap:9px; align-items:flex-start;
  font-size:12.5px; color:var(--framebf353-silver); line-height:1.5;
}
.framebf353-check::before{
  content:"✓"; flex:0 0 auto;
  width:20px; height:20px; border-radius:6px;
  background:var(--framebf353-coral-soft); color:var(--framebf353-coral);
  font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:1px;
}

/* Inline promo / body link styling */
.framebf353-body-link{
  color:var(--framebf353-coral); font-weight:700;
  border-bottom:1px dashed rgba(255,127,80,0.5);
  transition:color var(--framebf353-fast) var(--framebf353-ease);
}
.framebf353-body-link:active{ color:var(--framebf353-cream); }
.framebf353-cta-inline{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--framebf353-coral-soft);
  border:1px solid rgba(255,127,80,0.45);
  color:var(--framebf353-cream); font-weight:700;
  padding:8px 14px; border-radius:var(--framebf353-r-pill);
  font-size:12.5px; min-height:40px;
  transition:transform var(--framebf353-fast) var(--framebf353-ease);
}
.framebf353-cta-inline:active{ transform:scale(0.94); }
.framebf353-cta-block{ display:flex; gap:8px; margin-top:10px; }
.framebf353-cta-block .framebf353-btn{ flex:1; height:42px; }

/* ==========================================================================
   EXTENDED HOMEPAGE FOOTER (sectioned list)
   ========================================================================== */
.framebf353-extfoot{
  margin-top:24px;
  border-top:1px solid var(--framebf353-line);
  padding-top:18px;
}
.framebf353-extfoot-section{ margin-bottom:18px; }
.framebf353-extfoot-section h4{
  font-size:12px; color:var(--framebf353-coral);
  text-transform:uppercase; letter-spacing:.8px;
  margin-bottom:8px; font-weight:800;
}
.framebf353-extfoot-section ul{ display:grid; gap:6px; }
.framebf353-extfoot-section li a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12.5px; color:var(--framebf353-silver);
  padding:8px 10px; border-radius:var(--framebf353-r-md);
  background:var(--framebf353-ink-2);
  border:1px solid var(--framebf353-line-soft);
  transition:transform var(--framebf353-fast) var(--framebf353-ease),
             color var(--framebf353-fast) var(--framebf353-ease);
  min-height:40px;
}
.framebf353-extfoot-section li a:active{ transform:scale(0.97); color:var(--framebf353-cream); }
.framebf353-extfoot-section li a::after{
  content:"›"; color:var(--framebf353-coral); font-size:16px; font-weight:800;
}
.framebf353-extfoot-section li a[data-promo="1"]::after{ content:"★"; }
.framebf353-extfoot-brand{
  font-size:12px; color:var(--framebf353-silver); line-height:1.6;
  padding:12px; background:var(--framebf353-ink-2); border-radius:var(--framebf353-r-md);
  border:1px solid var(--framebf353-line-soft);
}
.framebf353-extfoot-brand strong{ color:var(--framebf353-cream); }
.framebf353-extfoot-promos{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.framebf353-extfoot-promos button{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:10px 11px; border-radius:var(--framebf353-r-md);
  background:var(--framebf353-ink-2);
  border:1px solid var(--framebf353-line-soft);
  color:var(--framebf353-silver); text-align:left;
  font-size:11.5px; font-weight:600;
  min-height:48px;
  transition:transform var(--framebf353-fast) var(--framebf353-ease),
             border-color var(--framebf353-fast) var(--framebf353-ease);
}
.framebf353-extfoot-promos button:active{ transform:scale(0.96); border-color:var(--framebf353-coral); }
.framebf353-extfoot-promos button strong{ color:var(--framebf353-cream); font-size:12.5px; }
.framebf353-extfoot-promos button span{ color:var(--framebf353-coral); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }

.framebf353-disclaimer{
  font-size:11px; color:var(--framebf353-slate); line-height:1.55;
  padding:10px 12px; border-radius:var(--framebf353-r-md);
  background:rgba(192,192,192,0.05);
  border-left:3px solid var(--framebf353-slate);
  margin-top:6px;
}

/* ==========================================================================
   FOOTER (compact, common)
   ========================================================================== */
.framebf353-footer{
  padding:16px 14px calc(var(--framebf353-bottomnav-h) + var(--framebf353-safe-bottom) + 8px);
  text-align:center;
  border-top:1px solid var(--framebf353-line-soft);
  background:#0a1119;
}
.framebf353-footer p{ font-size:11px; color:var(--framebf353-slate); line-height:1.6; }
.framebf353-footer p strong{ color:var(--framebf353-silver); }

/* ==========================================================================
   BOTTOM NAV — layered bottom bar, 5 roles, borderless strong-tone symbols
   ========================================================================== */
.framebf353-bottomnav{
  position:fixed;
  bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--framebf353-canvas);
  height:calc(var(--framebf353-bottomnav-h) + var(--framebf353-safe-bottom));
  padding-bottom:var(--framebf353-safe-bottom);
  background:linear-gradient(180deg, rgba(14,22,33,0.94), rgba(10,17,25,0.98));
  backdrop-filter:saturate(140%) blur(12px);
  border-top:1px solid var(--framebf353-line);
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  align-items:center;
  z-index:55;
  box-shadow:0 -8px 24px rgba(0,0,0,0.45);
}
/* layered cue: a coral bar above the active slot */
.framebf353-bottomnav::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--framebf353-coral) 50%, transparent);
  opacity:0.45;
}
.framebf353-nav-btn{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  height:var(--framebf353-bottomnav-h);
  color:var(--framebf353-silver);
  font-size:10px; font-weight:600;
  transition:color var(--framebf353-fast) var(--framebf353-ease),
             transform var(--framebf353-fast) var(--framebf353-ease);
  padding:0 2px;
  text-align:center;
}
.framebf353-nav-btn:active{ transform:scale(0.88); }
.framebf353-nav-btn svg{ width:24px; height:24px; transition:transform var(--framebf353-fast) var(--framebf353-ease); }
.framebf353-nav-btn span{ white-space:nowrap; letter-spacing:.2px; }
.framebf353-nav-btn[data-active="true"]{ color:var(--framebf353-coral); }
.framebf353-nav-btn[data-active="true"] svg{ transform:translateY(-1px) scale(1.08); }
.framebf353-nav-btn[data-active="true"]::after{
  content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:22px; height:3px; border-radius:2px;
  background:var(--framebf353-coral);
}
.framebf353-nav-btn[data-promo="1"]{
  color:var(--framebf353-cream);
}
.framebf353-nav-btn[data-promo="1"] svg{ filter:drop-shadow(0 0 6px rgba(255,127,80,0.55)); }
/* raised center promo to create layered silhouette */
.framebf353-nav-btn[data-raised="1"]{
  position:relative;
}
.framebf353-nav-btn[data-raised="1"] svg{
  background:linear-gradient(135deg, var(--framebf353-coral), #ff9d6c);
  color:#1a0f08;
  border-radius:50%;
  padding:5px;
  width:42px; height:42px;
  margin-top:-10px;
  box-shadow:0 6px 16px rgba(255,127,80,0.5);
}

/* ==========================================================================
   Utility
   ========================================================================== */
.framebf353-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.framebf353-divider{
  height:1px; background:var(--framebf353-line-soft); margin:18px 0;
}
.framebf353-para{ font-size:12.5px; color:var(--framebf353-silver); line-height:1.6; margin-bottom:8px; }
.framebf353-para:last-child{ margin-bottom:0; }

/* ---------- Help-page reading tools ---------- */
.framebf353-help-hero{
  padding:20px 16px; margin-bottom:14px; border-radius:var(--framebf353-r-lg);
  background:linear-gradient(145deg,#1b2b42 0%,#101b2b 62%,#0e1621 100%);
  border:1px solid var(--framebf353-line); position:relative; overflow:hidden;
}
.framebf353-help-hero::after{ content:""; position:absolute; width:150px; height:150px; right:-60px; top:-70px; border:1px solid rgba(255,127,80,.3); border-radius:50%; }
.framebf353-help-hero h1{ font-size:25px; line-height:1.16; margin-bottom:8px; max-width:17em; }
.framebf353-help-hero p{ font-size:13.5px; color:var(--framebf353-silver); }
.framebf353-answer{ margin-top:13px; padding:11px 12px; border-left:3px solid var(--framebf353-coral); background:var(--framebf353-coral-soft); color:var(--framebf353-cream); font-size:13px; line-height:1.5; }
.framebf353-promo-rail{ display:flex; gap:8px; overflow-x:auto; margin:0 -14px 16px; padding:0 14px 4px; scrollbar-width:none; }
.framebf353-promo-rail::-webkit-scrollbar{ display:none; }
.framebf353-promo-rail button{ flex:0 0 auto; min-height:44px; padding:9px 13px; border:1px solid var(--framebf353-line); border-radius:var(--framebf353-r-sm); color:var(--framebf353-cream); background:var(--framebf353-ink-2); font-size:12px; font-weight:700; }
.framebf353-promo-rail button:first-child{ background:var(--framebf353-coral); color:#1a0f08; }
.framebf353-review-meter{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:12px 0 2px; }
.framebf353-review-meter div{ padding:10px 7px; text-align:center; background:var(--framebf353-ink-3); border-radius:var(--framebf353-r-sm); border-top:2px solid var(--framebf353-coral); }
.framebf353-review-meter strong{ display:block; color:var(--framebf353-cream); font-size:16px; }
.framebf353-review-meter span{ display:block; color:var(--framebf353-silver); font-size:10.5px; line-height:1.25; }
.framebf353-split-note{ display:grid; gap:8px; margin-top:10px; }
.framebf353-split-note article{ padding:11px; border:1px solid var(--framebf353-line-soft); background:var(--framebf353-ink-3); border-radius:var(--framebf353-r-sm); }
.framebf353-split-note article strong{ display:block; color:var(--framebf353-cream); font-size:13px; margin-bottom:3px; }
.framebf353-split-note article p{ color:var(--framebf353-silver); font-size:12px; line-height:1.5; }
.framebf353-step-flow{ counter-reset:flow; display:grid; gap:9px; }
.framebf353-step-flow li{ counter-increment:flow; position:relative; padding:12px 12px 12px 44px; background:var(--framebf353-ink-3); border-radius:var(--framebf353-r-sm); border:1px solid var(--framebf353-line-soft); }
.framebf353-step-flow li::before{ content:counter(flow); position:absolute; left:12px; top:12px; width:23px; height:23px; border-radius:7px; display:grid; place-items:center; background:var(--framebf353-coral); color:#1a0f08; font-weight:800; font-size:12px; }
.framebf353-step-flow strong{ display:block; color:var(--framebf353-cream); font-size:13px; margin-bottom:3px; }
.framebf353-step-flow span{ color:var(--framebf353-silver); font-size:12px; line-height:1.5; }
.framebf353-qa-list{ display:grid; gap:8px; }
.framebf353-qa-list div{ padding:10px 11px; border-left:3px solid var(--framebf353-cream); background:var(--framebf353-ink-3); }
.framebf353-qa-list strong{ display:block; color:var(--framebf353-cream); font-size:12.5px; margin-bottom:3px; }
.framebf353-qa-list span{ color:var(--framebf353-silver); font-size:12px; line-height:1.5; }
.framebf353-choice-grid{ display:grid; gap:8px; }
.framebf353-choice-grid div{ display:grid; grid-template-columns:88px 1fr; gap:9px; padding:10px; background:var(--framebf353-ink-3); border-radius:var(--framebf353-r-sm); }
.framebf353-choice-grid b{ color:var(--framebf353-coral); font-size:11.5px; }
.framebf353-choice-grid span{ color:var(--framebf353-silver); font-size:11.5px; line-height:1.45; }
.framebf353-help-cta{ display:flex; gap:8px; margin-top:13px; }
.framebf353-help-cta .framebf353-btn{ flex:1; height:44px; }
@media (min-width:375px){ .framebf353-split-note{ grid-template-columns:1fr 1fr; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}