/* ==========================================================================
   1plus casino  ·  adaptive-34bbae-visuals.css
   Mobile-first stylesheet tuned for a 320-430px phone canvas.
   Voice: slate-harbour darks (#2E4057) cut with signal teal (#0097A7),
   steel hairlines (#808080), low-radius zoned panels, staggered CTAs,
   fact-first information rhythm, motion budget limited to state colors.
   ========================================================================== */

:root{
  /* ink ramp built around the base #2E4057 */
  --c4bbae-ink-950:#141d27;
  --c4bbae-ink-900:#1a2632;
  --c4bbae-ink-850:#212f3e;
  --c4bbae-ink-800:#263749;
  --c4bbae-ink-700:#2E4057;
  --c4bbae-ink-600:#3b5473;
  --c4bbae-steel:#808080;
  --c4bbae-steel-45:rgba(128,128,128,.45);
  --c4bbae-steel-25:rgba(128,128,128,.25);
  --c4bbae-steel-12:rgba(128,128,128,.12);
  --c4bbae-teal:#0097A7;
  --c4bbae-teal-deep:#007d8b;
  --c4bbae-teal-soft:rgba(0,151,167,.16);
  --c4bbae-teal-glow:rgba(0,151,167,.55);
  --c4bbae-paper:#e9f1f6;
  --c4bbae-paper-dim:#b2c1cf;
  --c4bbae-paper-faint:#8fa0b0;
  --c4bbae-rad:6px;
  --c4bbae-rad-sm:4px;
  --c4bbae-rad-lg:10px;
  --c4bbae-tap:44px;
  --c4bbae-head-h:106px;
  --c4bbae-dock-h:76px;
  --c4bbae-font:"Segoe UI",Roboto,"Helvetica Neue",system-ui,-apple-system,sans-serif;
}

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

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

html,body{overflow-x:hidden;}

body{
  margin:0;
  background:var(--c4bbae-ink-950);
  color:var(--c4bbae-paper);
  font-family:var(--c4bbae-font);
  font-weight:300;
  font-size:15px;
  line-height:1.58;
  min-height:100vh;
}

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

a{color:var(--c4bbae-teal);}
a:hover{color:#33c7d6;}

button{
  font-family:inherit;
  cursor:pointer;
}

:focus-visible{
  outline:2px solid var(--c4bbae-teal);
  outline-offset:2px;
  border-radius:var(--c4bbae-rad-sm);
}

/* --------------------------------------------------------------------------
   Phone shell: page is authored for the handset canvas. On wide screens the
   430px canvas stays centered like a device held in a dark room.
   -------------------------------------------------------------------------- */

.c4bbae-shell{
  position:relative;
  width:100%;
  max-width:430px;
  margin-inline:auto;
  background:var(--c4bbae-ink-700);
  min-height:100vh;
}

@media (min-width:480px){
  body{
    background:
      radial-gradient(1200px 600px at 50% -180px, rgba(0,151,167,.10), transparent 60%),
      var(--c4bbae-ink-950);
  }
  .c4bbae-shell{
    border-inline:1px solid var(--c4bbae-steel-12);
    box-shadow:0 0 70px rgba(0,0,0,.6);
  }
}

/* --------------------------------------------------------------------------
   Fixed top bar: centered identity strip + separate action strip.
   Brand zone shows the real logo image and site name only.
   -------------------------------------------------------------------------- */

.c4bbae-topbar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  z-index:60;
  background:linear-gradient(180deg,var(--c4bbae-ink-850),var(--c4bbae-ink-900));
  border-bottom:1px solid var(--c4bbae-steel-25);
}

.c4bbae-identity{
  display:grid;
  grid-template-columns:52px 1fr 52px;
  align-items:center;
  min-height:56px;
  padding:6px 10px 2px;
}

.c4bbae-brand{
  grid-column:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none;
  color:var(--c4bbae-paper);
  min-height:var(--c4bbae-tap);
}

.c4bbae-brand img{
  width:34px;
  height:34px;
  border-radius:var(--c4bbae-rad-sm);
  border:1px solid var(--c4bbae-teal);
  background:var(--c4bbae-ink-950);
  object-fit:cover;
}

.c4bbae-brand-name{
  font-weight:800;
  font-size:17.5px;
  letter-spacing:.2px;
  white-space:nowrap;
}

.c4bbae-brand-name small{
  display:block;
  font-weight:300;
  font-size:9.5px;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--c4bbae-teal);
  line-height:1.1;
  margin-top:1px;
}

.c4bbae-burger{
  grid-column:1;
  grid-row:1;
  width:44px;
  height:44px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:transparent;
  border:1px solid var(--c4bbae-steel-25);
  border-radius:var(--c4bbae-rad-sm);
  color:var(--c4bbae-paper-dim);
}

.c4bbae-burger i{
  display:block;
  width:18px;
  height:2px;
  border-radius:1px;
  background:currentColor;
  transition:background-color .18s ease;
}

.c4bbae-burger:hover{color:var(--c4bbae-teal);border-color:var(--c4bbae-teal);}

.c4bbae-head-slot{
  grid-column:3;
  grid-row:1;
  display:flex;
  justify-content:flex-end;
}

.c4bbae-live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--c4bbae-teal);
  box-shadow:0 0 8px var(--c4bbae-teal-glow);
  margin-right:12px;
}

/* Action strip: staggered primary/secondary CTAs live outside the brand zone */

.c4bbae-actions{
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:8px;
  padding:6px 10px 10px;
}

.c4bbae-btn{
  min-height:var(--c4bbae-tap);
  border-radius:var(--c4bbae-rad);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.3px;
  border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

.c4bbae-btn--primary{
  background:var(--c4bbae-teal);
  color:var(--c4bbae-ink-950);
}

.c4bbae-btn--primary:hover{
  background:#00b2c4;
  border-color:#00b2c4;
}

.c4bbae-btn--ghost{
  background:transparent;
  color:var(--c4bbae-paper-dim);
  border-color:var(--c4bbae-steel-45);
  font-weight:400;
  font-size:13.5px;
}

.c4bbae-btn--ghost:hover{
  color:var(--c4bbae-paper);
  border-color:var(--c4bbae-teal);
}

/* --------------------------------------------------------------------------
   Side drawer menu + scrim
   -------------------------------------------------------------------------- */

.c4bbae-scrim{
  position:fixed;
  inset:0;
  background:rgba(10,16,23,.72);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
  z-index:70;
}

.c4bbae-drawer{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:min(302px,84%);
  z-index:80;
  background:var(--c4bbae-ink-900);
  border-right:1px solid var(--c4bbae-steel-25);
  transform:translateX(-102%);
  transition:transform .24s ease;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  padding-bottom:14px;
}

body.c4bbae-nav-open .c4bbae-drawer{transform:translateX(0);}
body.c4bbae-nav-open .c4bbae-scrim{opacity:1;visibility:visible;}
body.c4bbae-nav-open{overflow:hidden;}

.c4bbae-drawer-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--c4bbae-steel-12);
}

.c4bbae-drawer-head img{
  width:30px;
  height:30px;
  border-radius:var(--c4bbae-rad-sm);
  border:1px solid var(--c4bbae-teal);
}

.c4bbae-drawer-title{
  font-weight:800;
  font-size:15.5px;
  color:var(--c4bbae-paper);
}

.c4bbae-drawer-close{
  margin-left:auto;
  width:40px;
  height:40px;
  border-radius:var(--c4bbae-rad-sm);
  border:1px solid var(--c4bbae-steel-25);
  background:transparent;
  color:var(--c4bbae-paper-dim);
  font-size:17px;
  line-height:1;
  transition:color .18s ease,border-color .18s ease;
}

.c4bbae-drawer-close:hover{color:var(--c4bbae-teal);border-color:var(--c4bbae-teal);}

.c4bbae-drawer-group{padding:12px 12px 4px;}

.c4bbae-drawer-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--c4bbae-paper-faint);
  padding:0 8px 6px;
}

.c4bbae-drawer-group a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:var(--c4bbae-tap);
  padding:10px 10px;
  margin-bottom:3px;
  border-radius:var(--c4bbae-rad-sm);
  text-decoration:none;
  color:var(--c4bbae-paper-dim);
  font-size:14px;
  border:1px solid transparent;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}

.c4bbae-drawer-group a::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:1px;
  background:var(--c4bbae-steel-45);
  flex:none;
  transition:background-color .15s ease;
}

.c4bbae-drawer-group a:hover{
  color:var(--c4bbae-paper);
  background:var(--c4bbae-ink-850);
  border-color:var(--c4bbae-steel-12);
}

.c4bbae-drawer-group a:hover::before{background:var(--c4bbae-teal);}

.c4bbae-drawer-group a[aria-current="page"]{
  color:var(--c4bbae-teal);
  background:var(--c4bbae-teal-soft);
  border-color:var(--c4bbae-steel-12);
}

.c4bbae-drawer-group a[aria-current="page"]::before{background:var(--c4bbae-teal);}

.c4bbae-drawer-cta{
  margin:14px 14px 4px;
  padding-top:14px;
  border-top:1px solid var(--c4bbae-steel-12);
}

/* --------------------------------------------------------------------------
   Main column
   -------------------------------------------------------------------------- */

.c4bbae-main{
  padding:calc(var(--c4bbae-head-h) + 12px) 12px calc(var(--c4bbae-dock-h) + 30px);
}

.c4bbae-zone{
  margin-bottom:22px;
}

/* Hero block */

.c4bbae-hero-title{
  font-size:23px;
  line-height:1.24;
  font-weight:800;
  letter-spacing:.1px;
  margin:2px 0 10px;
  color:var(--c4bbae-paper);
}

.c4bbae-hero-title em{
  font-style:normal;
  color:var(--c4bbae-teal);
}

.c4bbae-lede{
  font-size:14px;
  color:var(--c4bbae-paper-dim);
  margin:0 0 12px;
}

.c4bbae-lede strong{color:var(--c4bbae-paper);font-weight:600;}

/* Fact chips row — the "fact first" layer of the page rhythm */

.c4bbae-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:0 0 16px;
}

.c4bbae-fact{
  background:var(--c4bbae-ink-850);
  border:1px solid var(--c4bbae-steel-12);
  border-radius:var(--c4bbae-rad-sm);
  padding:8px 6px 7px;
  text-align:center;
}

.c4bbae-fact b{
  display:block;
  font-size:16.5px;
  font-weight:800;
  color:var(--c4bbae-teal);
  line-height:1.15;
}

.c4bbae-fact span{
  display:block;
  font-size:9.8px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--c4bbae-paper-faint);
  margin-top:2px;
}

/* --------------------------------------------------------------------------
   Carousel
   -------------------------------------------------------------------------- */

.c4bbae-carousel{
  position:relative;
  border-radius:var(--c4bbae-rad);
  border:1px solid var(--c4bbae-steel-25);
  overflow:hidden;
  background:var(--c4bbae-ink-950);
}

.c4bbae-track{
  position:relative;
  aspect-ratio:2.18/1;
  min-height:158px;
}

.c4bbae-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:var(--c4bbae-ink-950);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}

.c4bbae-slide.c4bbae-is-on{
  opacity:1;
  visibility:visible;
  position:relative;
}

.c4bbae-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.c4bbae-slide-copy{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:22px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(14,20,28,.92));
  text-align:left;
}

.c4bbae-slide-copy strong{
  display:block;
  font-size:14.5px;
  font-weight:800;
  color:var(--c4bbae-paper);
  line-height:1.25;
}

.c4bbae-slide-copy em{
  display:block;
  font-style:normal;
  font-size:11.5px;
  color:var(--c4bbae-paper-dim);
}

.c4bbae-slide-chip{
  flex:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.4px;
  color:var(--c4bbae-ink-950);
  background:var(--c4bbae-teal);
  border-radius:3px;
  padding:6px 10px;
}

.c4bbae-dots{
  position:absolute;
  right:10px;
  top:10px;
  display:flex;
  gap:6px;
  z-index:2;
}

.c4bbae-dot{
  width:22px;
  height:8px;
  padding:0;
  border-radius:2px;
  border:1px solid rgba(233,241,246,.55);
  background:transparent;
  transition:background-color .18s ease,border-color .18s ease;
}

.c4bbae-dot.c4bbae-is-on{
  background:var(--c4bbae-teal);
  border-color:var(--c4bbae-teal);
}

.c4bbae-hint{
  font-size:11px;
  color:var(--c4bbae-paper-faint);
  margin:7px 2px 0;
}

/* --------------------------------------------------------------------------
   Section zones: low-radius panel with a steel edge + teal corner tick
   -------------------------------------------------------------------------- */

.c4bbae-sec{
  position:relative;
  background:var(--c4bbae-ink-800);
  border:1px solid var(--c4bbae-steel-12);
  border-radius:var(--c4bbae-rad);
  padding:16px 12px 14px;
  margin-bottom:18px;
}

.c4bbae-sec::before{
  content:"";
  position:absolute;
  top:-1px;
  left:14px;
  width:34px;
  height:3px;
  border-radius:0 0 2px 2px;
  background:var(--c4bbae-teal);
}

.c4bbae-sec-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:6px;
}

.c4bbae-sec-count{
  flex:none;
  margin-top:3px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
  color:var(--c4bbae-teal);
  border:1px solid var(--c4bbae-teal);
  border-radius:3px;
  padding:3px 7px;
  line-height:1;
  white-space:nowrap;
}

.c4bbae-h2{
  font-size:17.5px;
  line-height:1.3;
  font-weight:800;
  color:var(--c4bbae-paper);
  margin:0;
}

.c4bbae-sec-lead{
  font-size:13.5px;
  color:var(--c4bbae-paper-dim);
  margin:6px 0 14px;
}

.c4bbae-sec-lead a{font-weight:600;}

/* --------------------------------------------------------------------------
   Game grid — large + small tile mix
   -------------------------------------------------------------------------- */

.c4bbae-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;
  gap:8px;
}

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

.c4bbae-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:5px;
  background:var(--c4bbae-ink-850);
  border:1px solid var(--c4bbae-steel-12);
  border-radius:var(--c4bbae-rad-sm);
  text-align:left;
  min-width:0;
  transition:border-color .16s ease,background-color .16s ease;
}

.c4bbae-tile:hover,
.c4bbae-tile:focus-visible{
  border-color:var(--c4bbae-teal);
  background:var(--c4bbae-ink-900);
}

.c4bbae-tile img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:3px;
  background:var(--c4bbae-ink-950);
}

.c4bbae-tile-name{
  font-size:10.8px;
  line-height:1.28;
  font-weight:400;
  color:var(--c4bbae-paper-dim);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.5em;
  overflow-wrap:anywhere;
}

.c4bbae-tile:hover .c4bbae-tile-name{color:var(--c4bbae-paper);}

/* Featured 2x2 tile anchoring each category block */

.c4bbae-tile--xl{
  grid-column:span 2;
  grid-row:span 2;
  padding:7px;
  gap:7px;
  background:linear-gradient(160deg,var(--c4bbae-ink-900),var(--c4bbae-ink-800));
  border-color:var(--c4bbae-steel-25);
}

.c4bbae-tile--xl .c4bbae-tile-name{
  font-size:13px;
  font-weight:700;
  color:var(--c4bbae-paper);
  -webkit-line-clamp:2;
  min-height:2.4em;
}

.c4bbae-tile-tag{
  align-self:flex-start;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--c4bbae-teal);
  border:1px solid var(--c4bbae-teal);
  border-radius:2px;
  padding:2px 6px;
}

/* --------------------------------------------------------------------------
   Content modules
   -------------------------------------------------------------------------- */

.c4bbae-module-lead{
  font-size:13.5px;
  color:var(--c4bbae-paper-dim);
  margin:6px 0 12px;
}

.c4bbae-module-lead a{font-weight:600;}

.c4bbae-body{
  font-size:13.5px;
  color:var(--c4bbae-paper-dim);
  margin:0 0 12px;
}

.c4bbae-body a{font-weight:600;}

.c4bbae-body strong{color:var(--c4bbae-paper);font-weight:600;}

.c4bbae-h3{
  font-size:14px;
  font-weight:700;
  color:var(--c4bbae-paper);
  margin:16px 0 6px;
}

.c4bbae-h3 span{
  color:var(--c4bbae-teal);
  margin-right:6px;
  font-weight:800;
}

/* App / mobile block */

.c4bbae-app-strip{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin:4px 0 12px;
}

.c4bbae-app-qr{
  flex:none;
  width:86px;
  border:1px solid var(--c4bbae-steel-25);
  border-radius:var(--c4bbae-rad-sm);
  background:var(--c4bbae-ink-950);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px 6px;
  font-size:10px;
  line-height:1.4;
  color:var(--c4bbae-paper-faint);
}

.c4bbae-app-qr b{
  display:block;
  font-size:12px;
  color:var(--c4bbae-paper);
  font-weight:700;
  margin-bottom:2px;
}

.c4bbae-app-list{
  list-style:none;
  margin:0;
  padding:0;
  font-size:12.8px;
  color:var(--c4bbae-paper-dim);
}

.c4bbae-app-list li{
  padding:5px 0 5px 18px;
  position:relative;
  border-bottom:1px dashed var(--c4bbae-steel-12);
}

.c4bbae-app-list li:last-child{border-bottom:0;}

.c4bbae-app-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:12px;
  width:7px;
  height:7px;
  border-radius:1px;
  background:var(--c4bbae-teal);
}

/* Player notes */

.c4bbae-notes{
  display:grid;
  gap:8px;
}

.c4bbae-note{
  background:var(--c4bbae-ink-850);
  border:1px solid var(--c4bbae-steel-12);
  border-radius:var(--c4bbae-rad-sm);
  padding:10px 11px 9px;
}

.c4bbae-note p{
  margin:0 0 7px;
  font-size:13px;
  color:var(--c4bbae-paper-dim);
  line-height:1.5;
}

.c4bbae-note p::before{content:"“";color:var(--c4bbae-teal);font-weight:800;}
.c4bbae-note p::after{content:"”";color:var(--c4bbae-teal);font-weight:800;}

.c4bbae-note footer{
  font-size:11px;
  color:var(--c4bbae-paper-faint);
  letter-spacing:.4px;
}

.c4bbae-note footer b{
  color:var(--c4bbae-teal);
  font-weight:700;
}

/* Feature deck */

.c4bbae-deck{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.c4bbae-card{
  background:var(--c4bbae-ink-850);
  border:1px solid var(--c4bbae-steel-12);
  border-radius:var(--c4bbae-rad-sm);
  padding:10px 10px 9px;
  transition:border-color .16s ease;
}

.c4bbae-card:hover{border-color:var(--c4bbae-steel-45);}

.c4bbae-card b{
  display:block;
  font-size:12.8px;
  font-weight:700;
  color:var(--c4bbae-teal);
  margin-bottom:4px;
}

.c4bbae-card p{
  margin:0;
  font-size:11.8px;
  line-height:1.48;
  color:var(--c4bbae-paper-dim);
}

.c4bbae-card--wide{grid-column:1 / -1;}

/* Relation chain */

.c4bbae-chain{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:c4bbae-step;
}

.c4bbae-chain li{
  counter-increment:c4bbae-step;
  position:relative;
  padding:8px 0 8px 38px;
  border-bottom:1px solid var(--c4bbae-steel-12);
  font-size:12.8px;
  color:var(--c4bbae-paper-dim);
}

.c4bbae-chain li:last-child{border-bottom:0;}

.c4bbae-chain li::before{
  content:counter(c4bbae-step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:9px;
  width:26px;
  height:26px;
  border:1px solid var(--c4bbae-teal);
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:var(--c4bbae-teal);
}

.c4bbae-chain b{color:var(--c4bbae-paper);font-weight:700;}

/* Pros / limitations split */

.c4bbae-verdict{
  display:grid;
  gap:8px;
}

.c4bbae-verdict-col{
  border-radius:var(--c4bbae-rad-sm);
  border:1px solid var(--c4bbae-steel-12);
  padding:11px 11px 8px;
  background:var(--c4bbae-ink-850);
}

.c4bbae-verdict-col h3{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:800;
}

.c4bbae-verdict-col--good h3{color:var(--c4bbae-teal);}
.c4bbae-verdict-col--warn h3{color:var(--c4bbae-paper-dim);}

.c4bbae-verdict-col ul{
  list-style:none;
  margin:0;
  padding:0;
}

.c4bbae-verdict-col li{
  position:relative;
  padding:4px 0 4px 16px;
  font-size:12.4px;
  line-height:1.5;
  color:var(--c4bbae-paper-dim);
}

.c4bbae-verdict-col--good li::before{
  content:"+";
  position:absolute;
  left:0;
  font-weight:800;
  color:var(--c4bbae-teal);
}

.c4bbae-verdict-col--warn li::before{
  content:"–";
  position:absolute;
  left:0;
  font-weight:800;
  color:var(--c4bbae-steel);
}

/* --------------------------------------------------------------------------
   Extended footer: two-column directory, brand, promotions, disclaimer
   -------------------------------------------------------------------------- */

.c4bbae-ext{
  border-top:1px solid var(--c4bbae-steel-25);
  margin-top:6px;
  padding-top:16px;
}

.c4bbae-ext-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--c4bbae-teal);
  margin:0 0 9px;
}

.c4bbae-dir{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:18px;
}

.c4bbae-dir a{
  display:block;
  min-height:40px;
  padding:8px 9px;
  background:var(--c4bbae-ink-800);
  border:1px solid var(--c4bbae-steel-12);
  border-radius:var(--c4bbae-rad-sm);
  text-decoration:none;
  color:var(--c4bbae-paper-dim);
  font-size:11.8px;
  line-height:1.35;
  transition:border-color .16s ease,color .16s ease;
}

.c4bbae-dir a b{
  display:block;
  font-size:12.4px;
  font-weight:700;
  color:var(--c4bbae-paper);
}

.c4bbae-dir a:hover{
  border-color:var(--c4bbae-teal);
  color:var(--c4bbae-paper);
}

.c4bbae-ext-brand{
  font-size:12.6px;
  color:var(--c4bbae-paper-dim);
  margin:0 0 16px;
}

.c4bbae-ext-brand strong{color:var(--c4bbae-paper);font-weight:700;}

.c4bbae-promos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:16px;
}

.c4bbae-promo{
  min-height:44px;
  border-radius:var(--c4bbae-rad-sm);
  border:1px solid var(--c4bbae-steel-25);
  background:var(--c4bbae-teal-soft);
  color:var(--c4bbae-paper);
  font-size:12.2px;
  font-weight:600;
  letter-spacing:.2px;
  padding:8px 9px;
  text-align:left;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease;
}

.c4bbae-promo small{
  display:block;
  font-size:9.6px;
  font-weight:400;
  letter-spacing:.8px;
  color:var(--c4bbae-paper-faint);
  margin-top:1px;
}

.c4bbae-promo:hover{
  border-color:var(--c4bbae-teal);
  color:#fff;
  background:rgba(0,151,167,.26);
}

.c4bbae-promo--wide{grid-column:1 / -1;text-align:center;}

.c4bbae-disclaimer{
  font-size:11px;
  line-height:1.5;
  color:var(--c4bbae-paper-faint);
  border:1px dashed var(--c4bbae-steel-25);
  border-radius:var(--c4bbae-rad-sm);
  padding:9px 10px;
}

/* Common footer */

.c4bbae-foot{
  text-align:center;
  padding:4px 0 8px;
  border-top:1px solid var(--c4bbae-steel-12);
  margin-top:4px;
}

.c4bbae-foot p{
  margin:8px 0 0;
  font-size:11px;
  color:var(--c4bbae-paper-faint);
  letter-spacing:.4px;
}

.c4bbae-foot b{color:var(--c4bbae-paper-dim);font-weight:600;}

/* --------------------------------------------------------------------------
   Floating dock nav (mobile bottom navigation)
   -------------------------------------------------------------------------- */

.c4bbae-dock{
  position:fixed;
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  left:50%;
  transform:translateX(-50%);
  width:min(406px,calc(100% - 20px));
  z-index:65;
  display:flex;
  align-items:stretch;
  background:var(--c4bbae-ink-900);
  border:1px solid var(--c4bbae-steel-25);
  border-radius:var(--c4bbae-rad-lg);
  box-shadow:0 10px 26px rgba(8,13,19,.65);
  padding:3px 4px;
}

.c4bbae-dockbtn{
  position:relative;
  flex:1 1 0;
  min-width:0;
  min-height:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:6px 2px 5px;
  background:transparent;
  border:0;
  border-radius:var(--c4bbae-rad);
  text-decoration:none;
  color:var(--c4bbae-paper-faint);
  transition:color .18s ease;
}

.c4bbae-dockbtn:hover{color:var(--c4bbae-paper-dim);}

.c4bbae-dockbtn-tick{
  position:absolute;
  top:2px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:3px;
  border-radius:2px;
  background:transparent;
  transition:width .2s ease,background-color .2s ease;
}

.c4bbae-dockbtn-ic{
  width:22px;
  height:22px;
}

.c4bbae-dockbtn-ic path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:fill .18s ease,stroke .18s ease;
}

.c4bbae-dockbtn-lb{
  font-size:9.6px;
  font-weight:600;
  letter-spacing:.7px;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Active role: top indicator line + filled icon + restrained teal glow */

.c4bbae-dockbtn.c4bbae-is-on{
  color:var(--c4bbae-teal);
}

.c4bbae-dockbtn.c4bbae-is-on .c4bbae-dockbtn-tick{
  width:24px;
  background:var(--c4bbae-teal);
}

.c4bbae-dockbtn.c4bbae-is-on .c4bbae-dockbtn-ic path{
  fill:currentColor;
  stroke:currentColor;
}

.c4bbae-dockbtn.c4bbae-is-on .c4bbae-dockbtn-ic{
  filter:drop-shadow(0 0 5px var(--c4bbae-teal-glow));
}

/* --------------------------------------------------------------------------
   Utilities & accessibility
   -------------------------------------------------------------------------- */

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

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

/* Guide-page additions: fact-led reading blocks and distinct help layouts */
.c4bbae-guide-hero{
  background:linear-gradient(145deg,var(--c4bbae-ink-800),var(--c4bbae-ink-900));
  border:1px solid var(--c4bbae-steel-25);
  border-left:4px solid var(--c4bbae-teal);
  border-radius:var(--c4bbae-rad);
  padding:15px 13px 14px;
  margin-bottom:18px;
}
.c4bbae-guide-kicker{
  margin:0 0 6px;
  color:var(--c4bbae-teal);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
}
.c4bbae-guide-hero h1{margin:0 0 9px;}
.c4bbae-guide-hero p{margin:0;color:var(--c4bbae-paper-dim);font-size:13.5px;}
.c4bbae-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:13px;
}
.c4bbae-summary div{
  border-top:2px solid var(--c4bbae-steel-45);
  padding:8px 7px 5px;
  background:var(--c4bbae-ink-850);
}
.c4bbae-summary b{display:block;color:var(--c4bbae-paper);font-size:12.5px;}
.c4bbae-summary span{display:block;color:var(--c4bbae-paper-faint);font-size:10.5px;line-height:1.35;margin-top:2px;}
.c4bbae-step-list{list-style:none;margin:0;padding:0;counter-reset:c4bbae-guide-step;}
.c4bbae-step-list li{counter-increment:c4bbae-guide-step;position:relative;padding:10px 8px 10px 43px;border-bottom:1px solid var(--c4bbae-steel-12);color:var(--c4bbae-paper-dim);font-size:13px;}
.c4bbae-step-list li:last-child{border-bottom:0;}
.c4bbae-step-list li::before{content:counter(c4bbae-guide-step,decimal-leading-zero);position:absolute;left:0;top:9px;width:29px;height:29px;display:flex;align-items:center;justify-content:center;border:1px solid var(--c4bbae-teal);border-radius:3px;color:var(--c4bbae-teal);font-size:11px;font-weight:800;}
.c4bbae-step-list b{display:block;color:var(--c4bbae-paper);font-size:13.4px;margin-bottom:2px;}
.c4bbae-branch{display:grid;gap:7px;margin:0;}
.c4bbae-branch article{padding:10px 11px;background:var(--c4bbae-ink-850);border:1px solid var(--c4bbae-steel-12);border-left:3px solid var(--c4bbae-steel);border-radius:var(--c4bbae-rad-sm);}
.c4bbae-branch article[data-state="ready"]{border-left-color:var(--c4bbae-teal);}
.c4bbae-branch h3{margin:0 0 4px;color:var(--c4bbae-paper);font-size:13.5px;}
.c4bbae-branch p{margin:0;color:var(--c4bbae-paper-dim);font-size:12.6px;line-height:1.5;}
.c4bbae-verify{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:0;}
.c4bbae-verify div{padding:9px;background:var(--c4bbae-ink-850);border:1px solid var(--c4bbae-steel-12);}
.c4bbae-verify b{display:block;font-size:12px;color:var(--c4bbae-teal);margin-bottom:3px;}
.c4bbae-verify p{margin:0;color:var(--c4bbae-paper-dim);font-size:11.8px;line-height:1.45;}
.c4bbae-qa{margin:0;}
.c4bbae-qa details{border-bottom:1px solid var(--c4bbae-steel-12);padding:9px 0;}
.c4bbae-qa details:last-child{border-bottom:0;}
.c4bbae-qa summary{cursor:pointer;color:var(--c4bbae-paper);font-size:13px;font-weight:700;min-height:44px;display:flex;align-items:center;}
.c4bbae-qa p{margin:4px 0 2px;color:var(--c4bbae-paper-dim);font-size:12.7px;}
.c4bbae-tip-intro{display:grid;grid-template-columns:1fr 1.35fr;gap:9px;align-items:stretch;margin-bottom:12px;}
.c4bbae-tip-score{background:var(--c4bbae-teal);color:var(--c4bbae-ink-950);padding:11px 9px;border-radius:var(--c4bbae-rad-sm);}
.c4bbae-tip-score b{display:block;font-size:26px;line-height:1;font-weight:800;}
.c4bbae-tip-score span{display:block;margin-top:5px;font-size:10.5px;font-weight:700;line-height:1.3;}
.c4bbae-tip-intro p{margin:0;padding:10px;background:var(--c4bbae-ink-850);border:1px solid var(--c4bbae-steel-12);color:var(--c4bbae-paper-dim);font-size:12.8px;}
.c4bbae-rule-band{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;margin:0 0 12px;scrollbar-width:thin;}
.c4bbae-rule-band span{flex:1 0 92px;padding:8px 7px;background:var(--c4bbae-ink-850);border-bottom:2px solid var(--c4bbae-teal);color:var(--c4bbae-paper-dim);font-size:11px;line-height:1.3;text-align:center;}
.c4bbae-rule-band b{display:block;color:var(--c4bbae-paper);font-size:14px;}
.c4bbae-compare{width:100%;border-collapse:collapse;font-size:11.7px;color:var(--c4bbae-paper-dim);}
.c4bbae-compare th,.c4bbae-compare td{padding:8px 6px;border-bottom:1px solid var(--c4bbae-steel-12);text-align:left;vertical-align:top;}
.c4bbae-compare th{color:var(--c4bbae-teal);font-size:10px;letter-spacing:.7px;text-transform:uppercase;font-weight:800;}
.c4bbae-compare td:first-child{color:var(--c4bbae-paper);font-weight:700;width:29%;}
.c4bbae-mistakes{display:grid;gap:7px;list-style:none;margin:0;padding:0;}
.c4bbae-mistakes li{padding:9px 10px 9px 34px;position:relative;background:var(--c4bbae-ink-850);border:1px solid var(--c4bbae-steel-12);color:var(--c4bbae-paper-dim);font-size:12.6px;}
.c4bbae-mistakes li::before{content:"!";position:absolute;left:10px;top:8px;width:17px;height:17px;border:1px solid var(--c4bbae-steel);color:var(--c4bbae-teal);border-radius:50%;font-size:11px;font-weight:800;text-align:center;line-height:16px;}
.c4bbae-callout{margin:12px 0 0;padding:10px 11px;background:var(--c4bbae-teal-soft);border:1px solid var(--c4bbae-teal);border-radius:var(--c4bbae-rad-sm);color:var(--c4bbae-paper);font-size:12.6px;}
.c4bbae-callout strong{color:var(--c4bbae-teal);}

/* Small phones: tighten hero type so long lines never clip */
@media (max-width:339px){
  .c4bbae-hero-title{font-size:20.5px;}
  .c4bbae-h2{font-size:16px;}
  .c4bbae-slide-chip{display:none;}
}

/* Landscape-short handsets keep the dock slim without covering content */
@media (max-height:430px) and (orientation:landscape){
  .c4bbae-dockbtn{min-height:48px;}
  .c4bbae-dockbtn-lb{display:none;}
  .c4bbae-dock{padding:2px 4px;}
}