/* beebrand.us — the public site. Colours and type come from the panel's
   tokens.css; this file only lays the page out. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--bb-font); color: var(--bb-text); background: var(--bb-bg); line-height: 1.5; }
a { color: var(--bb-link); text-decoration: none; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--bb-line); position: sticky; top: 0; background: var(--bb-white); z-index: 5; }
.nav nav { display: flex; gap: 20px; align-items: center; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--bb-text); font-size: 1.1rem; }
.brand img { width: 32px; height: 32px; }
.btn { display: inline-block; padding: 9px 18px; border-radius: var(--bb-radius); border: 1px solid var(--bb-line); color: var(--bb-text); background: var(--bb-white); font-weight: 600; }
.btn-primary { background: var(--bb-honey); border-color: var(--bb-honey-deep); color: var(--bb-accent-ink); }
.btn-big { font-size: 1.1rem; padding: 14px 28px; }
.hero { text-align: center; padding: 88px 24px 72px; background: linear-gradient(160deg, var(--bb-yellow), var(--bb-sea)); }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 12px; }
.hero p { font-size: 1.15rem; color: var(--bb-grey-600); max-width: 640px; margin: 0 auto 24px; }
.hero .small { font-size: .9rem; margin-top: 12px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 56px 24px; max-width: 1180px; margin: 0 auto; }
.feature { border-radius: var(--bb-radius); padding: 20px; }
.feature h3 { margin-top: 0; }
.tint-yellow { background: var(--bb-yellow); } .tint-orange { background: var(--bb-orange); }
.tint-purple { background: var(--bb-purple); } .tint-blue { background: var(--bb-blue); }
.tint-sea { background: var(--bb-sea); } .tint-grey { background: var(--bb-grey-100); }
.pricing { padding: 56px 24px; background: var(--bb-surface); }
.pricing h2 { text-align: center; font-size: 2rem; margin-top: 0; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; }
.plan { background: var(--bb-white); border: 1px solid var(--bb-line); border-radius: var(--bb-radius); padding: 22px; display: flex; flex-direction: column; }
.plan.featured { border: 2px solid var(--bb-honey); }
.plan h3 { margin: 0; }
.price { font-size: 1.6rem; font-weight: 800; margin: 8px 0; }
.plan ul { padding-left: 18px; flex: 1; }
.center { text-align: center; }
.small { font-size: .9rem; color: var(--bb-grey-600); }
footer { text-align: center; padding: 28px; color: var(--bb-grey-600); font-size: .9rem; }
@media (max-width: 600px) { .nav nav a:not(.btn) { display: none; } }