/* ==========================================================================
   BEAR NATION LABS — Ghost theme
   The theme owns look only. Every word and image lives in Ghost editor cards
   so it can be changed in the admin editor without touching this file.
   ========================================================================== */

:root{
  --ink:#0B0711; --ink-2:#120C1E; --band:#1A1030; --band-2:#241542;
  --line:rgba(167,139,250,.16);
  --violet:#8B5CF6; --violet-hi:#A78BFA; --violet-lo:#6D33E8; --pink:#ED35A4;
  --glow:rgba(139,92,246,.30);
  --paper:#fff; --on-paper:#000; --on-paper-2:rgba(0,0,0,.80);
  --text:#F6F3FC; --muted:#A79FB8; --dim:#7C7490;
  --maxw:1180px; --pad:28px; --r:18px; --gap:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);
  font-family:'Poppins','Avenir Next',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:0}
.h-big{font-size:clamp(2.2rem,5.2vw,4rem)}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet-hi);margin:0 0 18px}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--muted);max-width:52ch;margin:20px 0 0;line-height:1.55}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(72px,10vw,140px) 0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px);
  background:rgba(11,7,17,.96);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:24px}
.logo-slot{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;
  letter-spacing:-.02em;margin-right:auto}
/* The lockup is ~2.9:1 after trimming its transparent padding. At 38px the
   wordmark was unreadable; 52px gives roughly a 15px cap-height, which reads
   cleanly without turning the nav into a banner. */
.logo-img{height:52px;width:auto;display:block;max-width:100%}
.foot-logo{height:46px;margin-bottom:10px}
@media(max-width:600px){.logo-img{height:40px}}
.logo-mark{width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--violet),var(--violet-lo));
  display:grid;place-items:center;font-size:.62rem;color:#fff;font-weight:700}
.nav-links ul{list-style:none;display:flex;gap:20px;margin:0;padding:0}
.nav-links a{font-size:.95rem;color:var(--muted);font-weight:500}
.nav-links a:hover,.nav-links .nav-current a{color:var(--text)}

/* ==========================================================================
   PAGE CONTENT GRID
   Gives Ghost's "wide" and "full" card widths somewhere to go. Without this
   a full-bleed Header card is just a boxed div.
   ========================================================================== */
.page-content{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gap),1fr)
    [wide-start] minmax(auto,140px)
    [main-start] min(760px,calc(100% - var(--gap)*2))
    [main-end] minmax(auto,140px)
    [wide-end] minmax(var(--gap),1fr)
    [full-end];
}
.page-content > *{grid-column:main-start/main-end;margin:0 0 1.5em}
.page-content > .kg-width-wide{grid-column:wide-start/wide-end}
.page-content > .kg-width-full{grid-column:full-start/full-end;margin-bottom:0}
.page-content > .kg-header-card{grid-column:full-start/full-end;margin:0}

.page-content p{color:var(--muted);line-height:1.7}
.page-content h2{font-size:clamp(1.9rem,4vw,3rem);margin:1.4em 0 .4em}
.page-content h3{font-size:1.25rem;margin:1.6em 0 .3em}
.page-content ul,.page-content ol{color:var(--muted);line-height:1.7}
.page-content a:not(.kg-btn){color:var(--violet-hi);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   HEADER CARD  →  hero + full-bleed statement bands
   ========================================================================== */
.kg-header-card{
  padding:clamp(76px,10vw,150px) var(--pad);
  text-align:center;position:relative;background:var(--band);
}
.kg-header-card.kg-align-left{text-align:left}
.kg-header-card-content,.kg-header-card .kg-header-card-content{
  max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.kg-header-card h2,.kg-header-card-heading{
  font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;letter-spacing:-.035em;margin:0}
.kg-header-card h3,.kg-header-card-subheading{
  font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:400;color:var(--muted);
  max-width:52ch;margin:22px auto 0;line-height:1.55}
.kg-header-card.kg-align-left .kg-header-card-subheading{margin-inline:0}

/* Header cards carrying a background image get a scrim so type stays legible */
.kg-header-card.kg-style-image::after{
  content:'';position:absolute;inset:0;background:rgba(11,7,17,.62);z-index:1}
.kg-header-card.kg-style-image .kg-header-card-content{z-index:2}

/* The accent-coloured band + the purple stage glow on the first hero */
.kg-header-card.kg-style-accent{background:var(--violet);color:#0D0619}
.kg-header-card.kg-style-accent .kg-header-card-subheading{color:rgba(13,6,25,.75)}
.page-content > .kg-header-card:first-child{background:var(--ink);overflow:hidden}
.page-content > .kg-header-card:first-child::before{
  content:'';position:absolute;inset:-40% 0 auto 0;height:150%;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 8%,var(--glow),transparent 68%)}

/* ---------- buttons (header card + button card) ---------- */
.kg-header-card-button,.kg-btn,.kg-button-card a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:999px;font-weight:600;font-size:.96rem;
  background:var(--violet);color:#100722;border:1.5px solid transparent;
  margin-top:32px;transition:transform .15s,filter .15s;text-decoration:none}
.kg-header-card-button:hover,.kg-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.kg-style-accent .kg-header-card-button{background:#0D0619;color:#fff}

/* ==========================================================================
   IMAGE / VIDEO CARDS
   ========================================================================== */
.kg-image-card img,.kg-video-card{border-radius:var(--r);overflow:hidden}
.kg-width-full .kg-image-card img,.kg-image-card.kg-width-full img{border-radius:0}
.kg-card figcaption,.kg-image-card figcaption,.kg-video-card figcaption{
  text-align:center;color:var(--dim);font-size:.85rem;margin-top:12px}
.kg-image-card.kg-width-wide img,.kg-video-card.kg-width-wide{
  box-shadow:0 40px 90px -40px rgba(109,51,232,.55)}

/* ==========================================================================
   TOGGLE CARD  →  FAQ accordion
   ========================================================================== */
.kg-toggle-card{border-bottom:1px solid var(--line);padding:6px 0}
.kg-toggle-card .kg-toggle-heading{display:flex;justify-content:space-between;
  align-items:center;gap:20px;cursor:pointer;padding:18px 0}
.kg-toggle-card .kg-toggle-heading-text{font-size:1.02rem;font-weight:600;margin:0}
.kg-toggle-card .kg-toggle-card-icon{width:18px;height:18px;color:var(--violet-hi);flex:none}
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{display:none}
.kg-toggle-card .kg-toggle-content{padding-bottom:20px}
.kg-toggle-card .kg-toggle-content p{color:var(--muted);font-size:.96rem;margin:0}

/* ==========================================================================
   CALLOUT / PRODUCT / BOOKMARK
   ========================================================================== */
.kg-callout-card{border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2);padding:22px 24px;display:flex;gap:14px}
.kg-callout-card .kg-callout-text{color:var(--muted)}
.kg-product-card-container{border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2);padding:26px;text-align:left}
.kg-bookmark-container{border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2);display:flex;overflow:hidden;text-decoration:none!important}
.kg-bookmark-content{padding:22px}
.kg-bookmark-title{font-weight:600}
.kg-bookmark-description{color:var(--muted);font-size:.92rem;margin-top:8px}

/* ==========================================================================
   HTML-CARD UTILITIES
   Used by the few blocks Ghost has no native card for (feature grids, the
   layered About panel, the Ko-fi block). Class names are stable — the HTML
   cards in the pages depend on them.
   ========================================================================== */
.bn-band{background:var(--band)}
.bn-ink2{background:var(--ink-2)}
.bn-paper{background:var(--paper);color:var(--on-paper)}
.bn-paper p{color:var(--on-paper-2)}
.bn-pad{padding:clamp(72px,10vw,130px) var(--pad)}
.bn-wrap{max-width:var(--maxw);margin:0 auto}
.bn-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.bn-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.bn-cell h3{font-size:1.06rem;margin:0 0 10px}
.bn-cell p{color:var(--muted);font-size:.93rem;margin:0;line-height:1.5}
.bn-paper .bn-cell p{color:var(--on-paper-2)}
.bn-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(139,92,246,.14);border:1px solid rgba(167,139,250,.24);margin-bottom:18px}
.bn-ico svg{width:21px;height:21px;stroke:var(--violet-hi);fill:none;stroke-width:2}
.bn-two-tone .l1{display:block;color:var(--on-paper)}
.bn-two-tone .l2{display:block;color:var(--violet-lo)}
.bn-two-tone .l2.pink{color:var(--pink)}
.bn-hand{font-family:'Caveat','Bradley Hand',cursive;font-size:1.5rem;
  color:var(--violet-lo);transform:rotate(-6deg);display:inline-block}
.bn-price{font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.bn-price .cur{font-size:.95rem;font-weight:600;color:var(--violet-hi)}
.bn-badge{display:inline-block}
.bn-badge img{height:52px;width:auto}
.bn-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bn-spec{background:var(--ink);padding:26px 24px}
.bn-spec dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600}
.bn-spec dd{margin:10px 0 0;font-weight:600;font-size:1rem}

/* ==========================================================================
   BLOG + FOOTER
   ========================================================================== */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:44px}
.pcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--ink-2);display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.pcard:hover{border-color:rgba(167,139,250,.42);transform:translateY(-3px)}
.pcard-body{padding:24px}
.pcard-body p{color:var(--muted);font-size:.93rem;margin:10px 0 0}
.pcard .more{color:var(--violet-hi);font-size:.88rem;font-weight:600;margin-top:16px;display:inline-block}
.post-head{padding:clamp(60px,8vw,110px) var(--pad) 0;max-width:820px}
.post-meta{color:var(--dim);font-size:.88rem;margin-top:22px}
.post-hero{margin:44px auto}
.post-hero img{border-radius:var(--r)}

.foot{border-top:1px solid var(--line);padding:60px 0 40px;background:var(--ink);margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:36px}
.foot-blurb{color:var(--muted);font-size:.95rem;max-width:34ch;margin-top:16px}
.foot-nav ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot-nav a{color:var(--muted);font-size:.92rem}
.foot-nav a:hover{color:var(--text)}
.foot-base{margin-top:48px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--dim);font-size:.85rem}

/* ---------- signup / portal ---------- */
.kg-signup-card{border-radius:var(--r)}

@media(max-width:900px){
  .bn-grid3,.bn-grid2,.foot-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .page-content{--gap:20px}
}