/* ============================================================
   f334.click - base stylesheet
   canvas : 320-430px mobile frame, centered on wide screens
   palette: #333333 base / #9400D3 primary / #228B22 confirm
            #7CFC00 indicator / #E6E6FA text
   voice  : tech headings, open body, low radius sections,
            step-advance rhythm, sliding focus indicators
   ============================================================ */

:root{
  --viewcb877-ink-deep:#232326;
  --viewcb877-ink:#2c2c30;
  --viewcb877-ink-raise:#34343a;
  --viewcb877-ink-line:#3f3f47;
  --viewcb877-paper:#333333;
  --viewcb877-line:rgba(230,230,250,.16);
  --viewcb877-line-strong:rgba(230,230,250,.3);
  --viewcb877-text:#E6E6FA;
  --viewcb877-text-dim:#b9b9d6;
  --viewcb877-text-faint:#8f8fb0;
  --viewcb877-violet:#9400D3;
  --viewcb877-violet-deep:#6a0099;
  --viewcb877-violet-soft:rgba(148,0,211,.18);
  --viewcb877-green:#228B22;
  --viewcb877-green-soft:rgba(34,139,34,.16);
  --viewcb877-lime:#7CFC00;
  --viewcb877-lime-soft:rgba(124,252,0,.14);
  --viewcb877-danger:#ff5d5d;
  --viewcb877-radius-s:3px;
  --viewcb877-radius-m:6px;
  --viewcb877-radius-l:10px;
  --viewcb877-font-head:"Bahnschrift","DIN Alternate","Segoe UI Semibold","Noto Sans Bengali","Hind Siliguri",system-ui,sans-serif;
  --viewcb877-font-body:"Noto Sans Bengali","Hind Siliguri","Segoe UI",-apple-system,system-ui,sans-serif;
  --viewcb877-font-mono:"Cascadia Mono","Consolas","SF Mono",ui-monospace,monospace;
  --viewcb877-topbar-h:56px;
  --viewcb877-tabs-h:44px;
  --viewcb877-dock-h:64px;
  --viewcb877-shadow:0 10px 26px rgba(0,0,0,.45);
  --viewcb877-tap:44px;
}

*,*::before,*::after{box-sizing:border-box;}

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

body{
  margin:0;
  background:#141416;
  color:var(--viewcb877-text);
  font-family:var(--viewcb877-font-body);
  font-size:15px;
  line-height:1.75;
  min-height:100vh;
}

/* mobile canvas: hard phone frame, keeps phone layout on desktop */
.viewcb877-canvas{
  position:relative;
  width:100%;
  max-width:430px;
  margin:0 auto;
  background:var(--viewcb877-paper);
  min-height:100vh;
  min-height:100dvh;
  box-shadow:0 0 0 1px rgba(230,230,250,.06),0 0 60px rgba(0,0,0,.6);
  overflow-x:hidden;
}

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

a{ color:var(--viewcb877-lime); text-decoration:none; }
a:focus-visible,button:focus-visible{
  outline:2px solid var(--viewcb877-lime);
  outline-offset:2px;
  border-radius:var(--viewcb877-radius-s);
}

.viewcb877-skip{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--viewcb877-violet);
  color:#fff;
  padding:10px 16px;
  z-index:120;
}
.viewcb877-skip:focus{ left:8px; top:8px; }

/* ------------------------------------------------------------
   HEADER - tab style top bar
   ------------------------------------------------------------ */
.viewcb877-header{
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(180deg,#26262b 0%,#232327 100%);
  border-bottom:1px solid var(--viewcb877-line);
}

.viewcb877-header-inner{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:var(--viewcb877-topbar-h);
  padding:8px 10px 6px;
}

.viewcb877-brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:var(--viewcb877-tap);
  padding:2px 6px 2px 2px;
  border-radius:var(--viewcb877-radius-m);
}

.viewcb877-brand-logo{
  width:34px;
  height:34px;
  border-radius:var(--viewcb877-radius-s);
  border:1px solid var(--viewcb877-line-strong);
  object-fit:cover;
  background:#000;
  flex:0 0 auto;
}

.viewcb877-brand-name{
  font-family:var(--viewcb877-font-head);
  font-size:21px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--viewcb877-text);
  line-height:1;
  white-space:nowrap;
}
.viewcb877-brand-name em{
  font-style:normal;
  color:var(--viewcb877-lime);
}

.viewcb877-header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
}

/* compact icon-text CTA buttons */
.viewcb877-btn{
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  border:1px solid transparent;
  font-family:var(--viewcb877-font-head);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.02em;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:36px;
  padding:0 12px;
  border-radius:var(--viewcb877-radius-s);
  color:var(--viewcb877-text);
  background:transparent;
  transition:transform .15s ease,background-color .2s ease,border-color .2s ease;
}
.viewcb877-btn svg{ width:14px; height:14px; flex:0 0 auto; }
.viewcb877-btn:active{ transform:scale(.95); }

.viewcb877-btn-register{
  background:linear-gradient(135deg,var(--viewcb877-violet) 0%,var(--viewcb877-violet-deep) 100%);
  color:#fff;
  border-color:rgba(124,252,0,.35);
  box-shadow:0 3px 12px rgba(148,0,211,.4);
}
.viewcb877-btn-login{
  background:rgba(230,230,250,.07);
  border-color:var(--viewcb877-line-strong);
}

.viewcb877-btn-menu{
  min-width:40px;
  padding:0 9px;
  background:rgba(230,230,250,.07);
  border-color:var(--viewcb877-line-strong);
}

/* menu burger morphs to X when drawer open */
.viewcb877-menu-lines{
  width:16px;height:14px;position:relative;flex:0 0 auto;
}
.viewcb877-menu-lines i{
  position:absolute;left:0;width:100%;height:2px;
  background:var(--viewcb877-lime);border-radius:1px;
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.viewcb877-menu-lines i:nth-child(1){ top:0; }
.viewcb877-menu-lines i:nth-child(2){ top:6px; width:70%; }
.viewcb877-menu-lines i:nth-child(3){ top:12px; }
.viewcb877-menu-open .viewcb877-menu-lines i:nth-child(1){ top:6px; transform:rotate(45deg); }
.viewcb877-menu-open .viewcb877-menu-lines i:nth-child(2){ opacity:0; }
.viewcb877-menu-open .viewcb877-menu-lines i:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* category tab strip under the brand row */
.viewcb877-tabs{
  display:flex;
  gap:2px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 8px;
  border-top:1px solid var(--viewcb877-line);
  scroll-snap-type:x proximity;
}
.viewcb877-tabs::-webkit-scrollbar{ display:none; }

.viewcb877-tab{
  -webkit-tap-highlight-color:transparent;
  flex:0 0 auto;
  scroll-snap-align:start;
  font-family:var(--viewcb877-font-head);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--viewcb877-text-dim);
  background:transparent;
  border:0;
  border-top:2px solid transparent;
  padding:9px 11px 8px;
  min-height:var(--viewcb877-tabs-h);
  display:inline-flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  transition:color .2s ease,border-color .25s ease;
}
.viewcb877-tab svg{ width:13px;height:13px;opacity:.75; }
.viewcb877-tab-on{
  color:var(--viewcb877-lime);
  border-top-color:var(--viewcb877-lime);
  background:linear-gradient(180deg,var(--viewcb877-lime-soft),transparent 70%);
}
.viewcb877-tab b{
  font-weight:600;
  font-family:var(--viewcb877-font-mono);
  font-size:10px;
  color:var(--viewcb877-text-faint);
}

/* ------------------------------------------------------------
   SIDE DRAWER MENU
   ------------------------------------------------------------ */
.viewcb877-veil{
  position:fixed;
  inset:0;
  background:rgba(10,10,12,.66);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
  z-index:80;
}
.viewcb877-veil-on{ opacity:1; visibility:visible; }

.viewcb877-drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(82vw,320px);
  background:#232327;
  border-left:1px solid var(--viewcb877-line-strong);
  z-index:90;
  transform:translateX(102%);
  transition:transform .28s cubic-bezier(.22,.9,.3,1);
  display:flex;
  flex-direction:column;
  box-shadow:var(--viewcb877-shadow);
}
.viewcb877-drawer-on{ transform:translateX(0); }

.viewcb877-drawer-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 14px 12px;
  border-bottom:1px solid var(--viewcb877-line);
}
.viewcb877-drawer-head img{
  width:32px;height:32px;border-radius:var(--viewcb877-radius-s);
  border:1px solid var(--viewcb877-line-strong);object-fit:cover;
}
.viewcb877-drawer-title{
  font-family:var(--viewcb877-font-head);
  font-size:15px;font-weight:700;letter-spacing:.05em;
}
.viewcb877-drawer-title small{
  display:block;
  font-family:var(--viewcb877-font-mono);
  font-size:10px;
  color:var(--viewcb877-text-faint);
  letter-spacing:.14em;
}

.viewcb877-drawer-nav{
  padding:10px 10px 16px;
  overflow-y:auto;
  flex:1;
}
.viewcb877-drawer-label{
  font-family:var(--viewcb877-font-mono);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--viewcb877-text-faint);
  padding:10px 8px 6px;
}
.viewcb877-drawer-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:6px 10px;
  border-radius:var(--viewcb877-radius-s);
  color:var(--viewcb877-text);
  font-size:14px;
  border-left:2px solid transparent;
  transition:background-color .2s ease,border-color .2s ease;
}
.viewcb877-drawer-link:active{ background:var(--viewcb877-violet-soft); }
.viewcb877-drawer-link svg{
  width:16px;height:16px;flex:0 0 auto;
  color:var(--viewcb877-lime);
}
.viewcb877-drawer-link span{
  display:block;
  font-family:var(--viewcb877-font-mono);
  font-size:9.5px;
  color:var(--viewcb877-text-faint);
  letter-spacing:.06em;
}
.viewcb877-drawer-foot{
  padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--viewcb877-line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

/* ------------------------------------------------------------
   HERO CAROUSEL
   ------------------------------------------------------------ */
.viewcb877-hero{
  position:relative;
  margin:12px 10px 4px;
  border:1px solid var(--viewcb877-line);
  border-radius:var(--viewcb877-radius-m);
  background:var(--viewcb877-ink);
  overflow:hidden;
}
.viewcb877-hero-track{
  display:flex;
  transition:transform .45s cubic-bezier(.3,.8,.3,1);
}
.viewcb877-slide{
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  border:0;padding:0;
  flex:0 0 100%;
  display:block;
  background:var(--viewcb877-ink-deep);
}
.viewcb877-slide img{
  width:100%;
  aspect-ratio:2.35/1;
  object-fit:cover;
}
.viewcb877-slide-caption{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px calc(10px + 42px);
  background:linear-gradient(180deg,transparent,rgba(20,20,22,.9));
  pointer-events:none;
}
.viewcb877-slide-caption strong{
  font-family:var(--viewcb877-font-head);
  font-size:14px;
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
}
.viewcb877-slide-caption svg{ width:14px;height:14px;color:var(--viewcb877-lime);flex:0 0 auto; }

/* sliding focus indicator (dots + travel line) */
.viewcb877-hero-dots{
  position:absolute;
  left:12px;right:12px;bottom:9px;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:2;
}
.viewcb877-hero-rail{
  position:relative;
  flex:1;
  height:2px;
  background:rgba(230,230,250,.22);
  border-radius:1px;
}
.viewcb877-hero-rail i{
  position:absolute;
  top:0;bottom:0;left:0;
  width:33.333%;
  background:var(--viewcb877-lime);
  border-radius:1px;
  transition:transform .45s cubic-bezier(.3,.8,.3,1);
}
.viewcb877-hero-count{
  font-family:var(--viewcb877-font-mono);
  font-size:10px;
  color:var(--viewcb877-text-dim);
  letter-spacing:.1em;
}

/* ------------------------------------------------------------
   PAGE INTRO / H1
   ------------------------------------------------------------ */
.viewcb877-intro{
  padding:14px 14px 6px;
}
.viewcb877-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--viewcb877-font-mono);
  font-size:10px;
  letter-spacing:.22em;
  color:var(--viewcb877-lime);
  border:1px solid rgba(124,252,0,.3);
  padding:3px 8px;
  border-radius:var(--viewcb877-radius-s);
  background:var(--viewcb877-lime-soft);
  margin-bottom:10px;
}
.viewcb877-intro h1{
  font-family:var(--viewcb877-font-head);
  font-size:24px;
  line-height:1.3;
  margin:0 0 8px;
  font-weight:700;
  letter-spacing:.01em;
}
.viewcb877-intro h1 em{
  font-style:normal;
  color:var(--viewcb877-lime);
}
.viewcb877-lead{
  margin:0;
  color:var(--viewcb877-text-dim);
  font-size:14.5px;
}
.viewcb877-intro-cta{
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}

/* primary promo CTA - compact icon text */
.viewcb877-btn-cta{
  flex:1 1 auto;
  min-height:44px;
  background:linear-gradient(135deg,var(--viewcb877-green) 0%,#1a6f1a 100%);
  border:1px solid rgba(124,252,0,.45);
  color:#fff;
  font-size:13.5px;
  box-shadow:0 4px 16px rgba(34,139,34,.35);
}
.viewcb877-btn-ghost{
  flex:0 0 auto;
  background:rgba(148,0,211,.12);
  border-color:rgba(148,0,211,.5);
  color:var(--viewcb877-text);
  min-height:44px;
}

/* ------------------------------------------------------------
   SECTIONS - sectioned low radius blocks, step rhythm
   ------------------------------------------------------------ */
.viewcb877-main{
  padding:6px 0 24px;
}
.viewcb877-section{
  padding:20px 12px 8px;
  border-top:1px solid var(--viewcb877-line);
}
.viewcb877-section:first-of-type{ border-top:0; }

.viewcb877-sec-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:6px;
}
.viewcb877-sec-notch{
  width:4px;
  height:22px;
  background:linear-gradient(180deg,var(--viewcb877-lime),var(--viewcb877-violet));
  border-radius:1px;
  flex:0 0 auto;
}
.viewcb877-section h2{
  font-family:var(--viewcb877-font-head);
  font-size:17.5px;
  line-height:1.4;
  margin:0;
  font-weight:700;
  letter-spacing:.01em;
}
.viewcb877-sec-count{
  margin-left:auto;
  font-family:var(--viewcb877-font-mono);
  font-size:10px;
  color:var(--viewcb877-text-faint);
  letter-spacing:.12em;
  white-space:nowrap;
}
.viewcb877-sec-note{
  margin:2px 0 12px;
  color:var(--viewcb877-text-dim);
  font-size:13.5px;
}

.viewcb877-h3{
  font-family:var(--viewcb877-font-head);
  font-size:14.5px;
  font-weight:700;
  color:var(--viewcb877-text);
  margin:18px 0 6px;
  padding-left:10px;
  border-left:3px solid var(--viewcb877-violet);
}

.viewcb877-p{
  margin:0 0 10px;
  color:var(--viewcb877-text-dim);
  font-size:14px;
}
.viewcb877-p strong,.viewcb877-sec-note strong{ color:var(--viewcb877-text); font-weight:600; }

/* ------------------------------------------------------------
   GAME GRID - pure image cards, short name under
   ------------------------------------------------------------ */
.viewcb877-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:4px 0 6px;
}
@media (min-width:400px){
  .viewcb877-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
}

.viewcb877-game{
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  border:1px solid var(--viewcb877-line);
  background:var(--viewcb877-ink-raise);
  border-radius:var(--viewcb877-radius-s);
  padding:4px 4px 6px;
  display:flex;
  flex-direction:column;
  gap:5px;
  transition:border-color .2s ease,transform .15s ease,box-shadow .2s ease;
  text-align:center;
  font:inherit;
  color:inherit;
  min-width:0;
}
.viewcb877-game:active{
  transform:scale(.94);
  border-color:var(--viewcb877-lime);
  box-shadow:0 0 0 1px var(--viewcb877-lime);
}
.viewcb877-game img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:2px;
  background:#1c1c1f;
  pointer-events:none;
}
.viewcb877-game-name{
  font-size:10.5px;
  line-height:1.35;
  color:var(--viewcb877-text-dim);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:1.35em;
  word-break:break-word;
}

.viewcb877-game-hot .viewcb877-game-name{ color:var(--viewcb877-text); }

/* category foot links */
.viewcb877-catlinks{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0 4px;
}
.viewcb877-catlink{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  color:var(--viewcb877-text);
  background:var(--viewcb877-violet-soft);
  border:1px solid rgba(148,0,211,.4);
  border-radius:var(--viewcb877-radius-s);
  padding:6px 10px;
  min-height:32px;
  transition:border-color .2s ease;
}
.viewcb877-catlink:active{ border-color:var(--viewcb877-lime); }
.viewcb877-catlink svg{ width:12px;height:12px;color:var(--viewcb877-lime);flex:0 0 auto; }

/* inline body link */
.viewcb877-inline{
  color:var(--viewcb877-lime);
  border-bottom:1px dashed rgba(124,252,0,.5);
  padding-bottom:1px;
}

/* ------------------------------------------------------------
   STEP LIST (mobile access summary style)
   ------------------------------------------------------------ */
.viewcb877-steps{
  list-style:none;
  margin:8px 0 12px;
  padding:0;
  counter-reset:viewcb877-step;
}
.viewcb877-steps li{
  counter-increment:viewcb877-step;
  position:relative;
  padding:0 0 14px 40px;
  font-size:14px;
  color:var(--viewcb877-text-dim);
}
.viewcb877-steps li::before{
  content:counter(viewcb877-step,decimal-leading-zero);
  position:absolute;
  left:0;top:1px;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--viewcb877-font-mono);
  font-size:11px;
  color:var(--viewcb877-lime);
  border:1px solid rgba(124,252,0,.4);
  background:var(--viewcb877-lime-soft);
  border-radius:var(--viewcb877-radius-s);
}
.viewcb877-steps li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:14px;top:32px;bottom:2px;
  width:1px;
  background:linear-gradient(180deg,rgba(124,252,0,.35),rgba(148,0,211,.3));
}
.viewcb877-steps strong{ color:var(--viewcb877-text); font-weight:600; }

/* compact review steps keep the symptom-to-action scan readable */
.viewcb877-step{
  display:grid;
  gap:4px;
  padding:10px 12px;
  margin:0 0 7px;
  border-left:3px solid var(--viewcb877-violet);
  background:var(--viewcb877-ink-raise);
  color:var(--viewcb877-text-dim);
  font-size:13.5px;
}
.viewcb877-step b{ color:var(--viewcb877-text); font-family:var(--viewcb877-font-head); font-size:13px; }
.viewcb877-step span{ display:block; }

/* checklist rows also support the review page's explanatory divs */
.viewcb877-checks > div{
  position:relative;
  padding:9px 10px 9px 36px;
  margin-bottom:6px;
  background:var(--viewcb877-green-soft);
  border:1px solid rgba(34,139,34,.35);
  border-radius:var(--viewcb877-radius-s);
  font-size:13.5px;
  color:var(--viewcb877-text-dim);
}
.viewcb877-checks > div::before{
  content:"✓";
  position:absolute;
  left:10px;top:9px;
  color:var(--viewcb877-lime);
  font-family:var(--viewcb877-font-mono);
  font-weight:700;
}

/* ------------------------------------------------------------
   WINNER RAIL (latest winners - horizontal feed)
   ------------------------------------------------------------ */
.viewcb877-rail{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 2px 10px;
  scrollbar-width:thin;
  scroll-snap-type:x mandatory;
}
.viewcb877-rail::-webkit-scrollbar{ height:4px; }
.viewcb877-rail::-webkit-scrollbar-thumb{ background:var(--viewcb877-line-strong); }

.viewcb877-win-card{
  flex:0 0 158px;
  scroll-snap-align:start;
  background:var(--viewcb877-ink-raise);
  border:1px solid var(--viewcb877-line);
  border-left:3px solid var(--viewcb877-green);
  border-radius:var(--viewcb877-radius-s);
  padding:9px 10px;
  font-size:12px;
  color:var(--viewcb877-text-dim);
}
.viewcb877-win-card b{
  display:block;
  font-family:var(--viewcb877-font-head);
  color:var(--viewcb877-text);
  font-size:12.5px;
  letter-spacing:.02em;
}
.viewcb877-win-amount{
  font-family:var(--viewcb877-font-mono);
  color:var(--viewcb877-lime);
  font-size:13px;
  letter-spacing:.04em;
}
.viewcb877-win-meta{
  display:block;
  font-family:var(--viewcb877-font-mono);
  font-size:9.5px;
  color:var(--viewcb877-text-faint);
  letter-spacing:.08em;
  margin-top:2px;
}

/* ------------------------------------------------------------
   MILESTONES (game achievements - progress feel)
   ------------------------------------------------------------ */
.viewcb877-miles{
  list-style:none;
  margin:6px 0 12px;
  padding:0;
}
.viewcb877-miles li{
  margin-bottom:10px;
  font-size:13.5px;
  color:var(--viewcb877-text-dim);
}
.viewcb877-miles .viewcb877-mile-top{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:4px;
}
.viewcb877-miles b{
  font-family:var(--viewcb877-font-head);
  color:var(--viewcb877-text);
  font-size:13.5px;
  font-weight:700;
}
.viewcb877-mile-bar{
  height:4px;
  background:rgba(230,230,250,.12);
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.viewcb877-mile-bar i{
  position:absolute;inset:0 auto 0 0;
  background:linear-gradient(90deg,var(--viewcb877-violet),var(--viewcb877-lime));
  border-radius:2px;
}

/* ------------------------------------------------------------
   CHECK LIST (security & trust)
   ------------------------------------------------------------ */
.viewcb877-checks{
  list-style:none;
  margin:6px 0 12px;
  padding:0;
}
.viewcb877-checks li{
  position:relative;
  padding:8px 10px 8px 36px;
  margin-bottom:6px;
  background:var(--viewcb877-green-soft);
  border:1px solid rgba(34,139,34,.35);
  border-radius:var(--viewcb877-radius-s);
  font-size:13.5px;
  color:var(--viewcb877-text-dim);
}
.viewcb877-checks li::before{
  content:"";
  position:absolute;
  left:10px;top:50%;
  width:16px;height:16px;
  margin-top:-8px;
  border-radius:2px;
  border:1.5px solid var(--viewcb877-lime);
  background:
    linear-gradient(135deg,transparent 45%,var(--viewcb877-lime) 45% 60%,transparent 60%) center/12px 12px no-repeat,
    var(--viewcb877-green-soft);
}
.viewcb877-checks strong{ color:var(--viewcb877-text); }

/* ------------------------------------------------------------
   CRITERIA TABLE (selection criteria)
   ------------------------------------------------------------ */
.viewcb877-criteria{
  border:1px solid var(--viewcb877-line);
  border-radius:var(--viewcb877-radius-s);
  overflow:hidden;
  margin:6px 0 12px;
}
.viewcb877-criteria-row{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--viewcb877-line);
  background:var(--viewcb877-ink);
  font-size:13.5px;
}
.viewcb877-criteria-row:last-child{ border-bottom:0; }
.viewcb877-criteria-row:nth-child(odd){ background:var(--viewcb877-ink-raise); }
.viewcb877-criteria-row b{
  flex:0 0 88px;
  font-family:var(--viewcb877-font-head);
  color:var(--viewcb877-text);
  font-size:12.5px;
  letter-spacing:.02em;
  padding-top:1px;
}
.viewcb877-criteria-row span{ color:var(--viewcb877-text-dim); min-width:0; }

/* ------------------------------------------------------------
   FAQ MINI
   ------------------------------------------------------------ */
.viewcb877-faq{
  border:1px solid var(--viewcb877-line);
  border-radius:var(--viewcb877-radius-s);
  margin:8px 0 12px;
  overflow:hidden;
}
.viewcb877-faq details{
  border-bottom:1px solid var(--viewcb877-line);
  background:var(--viewcb877-ink);
}
.viewcb877-faq details:last-child{ border-bottom:0; }
.viewcb877-faq summary{
  list-style:none;
  cursor:pointer;
  padding:11px 38px 11px 12px;
  font-size:13.5px;
  font-weight:600;
  color:var(--viewcb877-text);
  position:relative;
  min-height:44px;
  display:flex;
  align-items:center;
}
.viewcb877-faq summary::-webkit-details-marker{ display:none; }
.viewcb877-faq summary::after{
  content:"+";
  position:absolute;
  right:12px;top:50%;
  transform:translateY(-50%);
  font-family:var(--viewcb877-font-mono);
  color:var(--viewcb877-lime);
  font-size:16px;
  transition:transform .2s ease;
}
.viewcb877-faq details[open] summary::after{ content:"–"; }
.viewcb877-faq p{
  margin:0;
  padding:0 12px 12px;
  font-size:13px;
  color:var(--viewcb877-text-dim);
}

/* ------------------------------------------------------------
   EXTENDED FOOTER
   ------------------------------------------------------------ */
.viewcb877-extfoot{
  margin-top:22px;
  border-top:3px solid var(--viewcb877-violet);
  background:linear-gradient(180deg,#26262b,#202024);
  padding:16px 12px 10px;
}

/* promo shortcuts - horizontal scroll row */
.viewcb877-shorts{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 10px;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.viewcb877-shorts::-webkit-scrollbar{ display:none; }
.viewcb877-short{
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  flex:0 0 auto;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:0 13px;
  font-family:var(--viewcb877-font-head);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
  border-radius:var(--viewcb877-radius-s);
  border:1px solid rgba(124,252,0,.35);
  background:linear-gradient(135deg,var(--viewcb877-violet) 0%,var(--viewcb877-violet-deep) 100%);
  box-shadow:0 3px 12px rgba(148,0,211,.35);
  transition:transform .15s ease;
}
.viewcb877-short:nth-child(even){
  background:linear-gradient(135deg,var(--viewcb877-green) 0%,#17631a 100%);
}
.viewcb877-short:active{ transform:scale(.95); }
.viewcb877-short svg{ width:14px;height:14px;flex:0 0 auto;color:var(--viewcb877-lime); }
.viewcb877-short:nth-child(even) svg{ color:#d6ffbf; }

.viewcb877-brandbox{
  border:1px solid var(--viewcb877-line);
  border-radius:var(--viewcb877-radius-s);
  padding:12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:var(--viewcb877-ink);
  margin-bottom:12px;
}
.viewcb877-brandbox img{
  width:40px;height:40px;
  border-radius:var(--viewcb877-radius-s);
  border:1px solid var(--viewcb877-line-strong);
  object-fit:cover;
  flex:0 0 auto;
}
.viewcb877-brandbox p{
  margin:0;
  font-size:12.5px;
  color:var(--viewcb877-text-dim);
  line-height:1.7;
}

.viewcb877-dir-title{
  font-family:var(--viewcb877-font-mono);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--viewcb877-text-faint);
  margin:0 0 8px;
}
.viewcb877-dir{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:0 0 12px;
}
.viewcb877-dir a{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:4px 9px;
  font-size:12px;
  color:var(--viewcb877-text);
  background:var(--viewcb877-ink-raise);
  border:1px solid var(--viewcb877-line);
  border-radius:var(--viewcb877-radius-s);
  transition:border-color .2s ease;
}
.viewcb877-dir a:active{ border-color:var(--viewcb877-lime); }
.viewcb877-dir svg{ width:12px;height:12px;color:var(--viewcb877-violet);flex:0 0 auto; }

.viewcb877-disclaim{
  border-left:3px solid var(--viewcb877-green);
  background:var(--viewcb877-green-soft);
  padding:9px 11px;
  font-size:11.5px;
  color:var(--viewcb877-text-dim);
  border-radius:var(--viewcb877-radius-s);
  margin:0 0 8px;
}

/* ------------------------------------------------------------
   COMMON FOOTER + FLOATING DOCK NAV
   ------------------------------------------------------------ */
.viewcb877-footer{
  padding:14px 14px calc(14px + var(--viewcb877-dock-h) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--viewcb877-line);
  text-align:center;
}
.viewcb877-footer small{
  display:block;
  font-size:11px;
  color:var(--viewcb877-text-faint);
  line-height:1.8;
}

.viewcb877-dock{
  position:fixed;
  left:50%;
  bottom:calc(8px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  width:min(calc(100% - 16px),414px);
  z-index:70;
  display:flex;
  align-items:stretch;
  background:rgba(30,30,34,.96);
  border:1px solid var(--viewcb877-line-strong);
  border-radius:var(--viewcb877-radius-l);
  box-shadow:var(--viewcb877-shadow);
  backdrop-filter:blur(8px);
  overflow:hidden;
}
.viewcb877-dock a,
.viewcb877-dock button{
  -webkit-tap-highlight-color:transparent;
  flex:1 1 0;
  min-width:0;
  min-height:var(--viewcb877-dock-h);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:transparent;
  border:0;
  border-top:2px solid transparent;
  color:var(--viewcb877-text-faint);
  font-family:var(--viewcb877-font-body);
  font-size:9.5px;
  letter-spacing:.02em;
  cursor:pointer;
  padding:4px 2px 6px;
  transition:color .2s ease,border-color .25s ease,transform .15s ease;
}
.viewcb877-dock svg{ width:20px;height:20px;flex:0 0 auto;transition:transform .25s ease; }

/* active: top indicator line + filled icon morph + tint */
.viewcb877-dock-on{
  color:var(--viewcb877-lime);
  border-top-color:var(--viewcb877-lime);
  background:linear-gradient(180deg,var(--viewcb877-lime-soft),transparent 80%);
}
.viewcb877-dock-on svg{
  transform:translateY(-1px) scale(1.08);
  fill:var(--viewcb877-lime);
  color:#eaffd6;
}
.viewcb877-dock button:active svg,
.viewcb877-dock a:active svg{ transform:scale(.86); }

.viewcb877-dock-promo1{ color:#c99df0; }
.viewcb877-dock-promo2{ color:#8fe08f; }

/* ------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------ */
.viewcb877-hidden{ display:none !important; }

.viewcb877-visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  overflow:hidden;
  white-space:nowrap;
}

::selection{ background:var(--viewcb877-violet); color:#fff; }

/* wide screens keep the phone canvas centered */
@media (min-width:430px){
  .viewcb877-canvas{
    border-left:1px solid var(--viewcb877-line);
    border-right:1px solid var(--viewcb877-line);
  }
}

@media (max-width:359px){
  .viewcb877-intro h1{ font-size:21px; }
  .viewcb877-section h2{ font-size:16px; }
  .viewcb877-dir{ grid-template-columns:1fr; }
  .viewcb877-criteria-row b{ flex-basis:74px; }
}

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