/* Design D: stronger CocoCompare branding (compass logo + wordmark). data-brand on <html> picks the option. */
.wm{font-family:var(--display);font-weight:800;letter-spacing:-.025em;color:var(--accent);line-height:1}
.wm b{color:var(--ink);font-weight:800}
.drawer-brand{display:flex;align-items:center;gap:10px}.drawer-brand .logo{width:30px;height:30px}

/* option 1: white bar across the top */
.brandbar,.brandband{position:fixed;z-index:39;left:0;right:0;top:0;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 24px 0 78px;padding-top:env(safe-area-inset-top,0px)}
.brandbar{background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(16,38,31,.05)}
.bb-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.bb-brand .logo{width:42px;height:42px;flex:none}
.bb-brand .wm{font-size:28px}
.bb-tag{font-size:14px;font-weight:600;color:var(--muted)}
[data-brand="bar"] .menu-btn,[data-brand="band"] .menu-btn{top:calc(env(safe-area-inset-top,0px) + 13px)}
[data-brand="bar"] .hero,[data-brand="band"] .hero{padding-top:110px}
html[data-brand="bar"],html[data-brand="band"]{scroll-padding-top:84px} /* menu links and jumps stop below the bar */
[data-brand="bar"] :is(.step,.basics,.diff,.why,.ask,.plan),[data-brand="band"] :is(.step,.basics,.diff,.why,.ask,.plan){scroll-margin-top:0}

/* option 3: dark green band */
.brandband{background:#0b4f3a;box-shadow:0 4px 18px rgba(16,38,31,.18)}
.brandband .wm{color:#fff}.brandband .wm b{color:#f2b134}
.brandband .logo rect{fill:#0b6e4f;stroke:#ffffff55;stroke-width:1.5}
.brandband .bb-tag{color:#cdeedb}
[data-brand="band"] .menu-btn{background:transparent;border-color:#ffffff55}
[data-brand="band"] .menu-btn span{background:#fff}

/* option 2: big logo + name on the opening screen, small pill in the corner after scrolling */
.hero-brand{display:flex;align-items:center;gap:16px;text-align:left;margin-bottom:6px}
.hero-brand .logo{width:clamp(64px,9vw,96px);height:clamp(64px,9vw,96px);flex:none;filter:drop-shadow(0 10px 22px rgba(11,110,79,.25))}
.hero-brand .wm{display:block;font-size:clamp(40px,6.4vw,72px)}
.hb-tag{display:block;margin-top:6px;font-size:clamp(13px,1.6vw,16px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
[data-brand="hero"] h1{font-size:clamp(34px,5.6vw,72px)}
.mini-brand{position:fixed;z-index:39;top:calc(env(safe-area-inset-top,0px) + 16px);left:70px;height:46px;display:flex;align-items:center;gap:8px;padding:0 14px 0 8px;
  border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);text-decoration:none;
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.mini-brand .logo{width:30px;height:30px}.mini-brand .wm{font-size:19px}
.mini-brand.on{opacity:1;transform:none;pointer-events:auto}

@media (max-width:760px){
  .bb-tag{display:none}
  .brandbar,.brandband{height:62px;padding:0 14px 0 72px}
  .bb-brand .logo{width:34px;height:34px}.bb-brand .wm{font-size:23px}
  [data-brand="bar"] .menu-btn,[data-brand="band"] .menu-btn{top:calc(env(safe-area-inset-top,0px) + 8px)}
  [data-brand="bar"] .hero,[data-brand="band"] .hero{padding-top:92px}
  .hero-brand{gap:12px}
}