/* ==========================================================================
   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:10px 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. 38px left the
   wordmark unreadable and 52px still read small against a 60px-tall nav — the
   bear head needs height to resolve at all. 68px gives ~200px of width and a
   legible mark; the nav grows to suit rather than the logo shrinking to fit. */
/* Sizes chosen by rendering the mark at 46/64/80/96px and looking at it. The
   artwork carries fine internal detail — circuit traces, whiskers — that goes
   sub-pixel and turns to fuzz below about 80px, obscuring the bear rather than
   decorating it. So the mark never renders under 80px anywhere. */
/* v4 reads at 48px — the bright outline separates it from the background — so
   the lockup needs less height than the old artwork, and the full wordmark now
   fits on a phone (≈217px wide at 56px tall). No mark-only variant needed. */
.logo-img{height:62px;width:auto;display:block;max-width:100%}
.foot-logo{height:56px;margin-bottom:12px}
@media(max-width:900px){.logo-img{height:56px}}
@media(max-width:520px){.logo-img{height:48px}}

}
.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}
}


/* ==========================================================================
   DETAIL.CO-STYLE FEATURE ROWS
   The thing the first Ghost port lost. Native cards stack into one centred
   column; detail.co's rhythm is alternating two-column rows with full-bleed
   colour bands between them. These classes are used by the HTML cards on the
   product pages.
   ========================================================================== */
.bn-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,76px);align-items:center}
.bn-row.flip .bn-row-media{order:2}
.bn-row-media img{border-radius:var(--r);width:100%;
  box-shadow:0 40px 90px -40px rgba(109,51,232,.55)}
.bn-row h2{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.03;margin:0 0 18px}
.bn-row p{color:var(--muted);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6;margin:0}
.bn-ticks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.bn-ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:.98rem}
.bn-ticks li::before{content:'';flex:none;width:18px;height:18px;margin-top:3px;
  background:var(--violet-hi);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/></svg>") center/contain no-repeat;}

/* stacked knockout headline — the signature detail.co move */
.bn-stack{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  font-size:clamp(2.2rem,5.2vw,4rem);font-weight:700;letter-spacing:-.03em;line-height:1.0}
.bn-stack .knock{background:var(--violet);color:#0D0619;
  padding:.04em .34em .1em;border-radius:10px;display:inline-block}
.bn-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet-hi);margin:0 0 18px}

@media(max-width:900px){
  .bn-row{grid-template-columns:1fr}
  .bn-row.flip .bn-row-media{order:0}
}


/* ==========================================================================
   SCROLL REVEAL
   The movement that makes detail.co feel alive: sections rise and fade in as
   they enter the viewport. Driven by IntersectionObserver in default.hbs.

   `.reveal` is applied by JS, never in the markup — if scripting is off or
   fails, nothing is ever hidden and the page reads normally. Motion is also
   dropped entirely for prefers-reduced-motion.
   ========================================================================== */
.reveal{opacity:0;transform:translateY(34px);
  transition:opacity .75s cubic-bezier(.16,.84,.44,1),transform .75s cubic-bezier(.16,.84,.44,1)}
.reveal.in{opacity:1;transform:none}
/* the media side leads, the copy follows a beat later */
.bn-row .bn-row-media.reveal{transform:translateY(34px) scale(.985)}
.bn-row .bn-row-media.reveal.in{transform:none}
.bn-row-copy.reveal{transition-delay:.12s}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.in{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   TWO-TONE HEADLINE WITH GLOW
   detail.co sets the second line in the accent with a soft bloom behind it.
   ========================================================================== */
.bn-two{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.04;margin:0 0 22px}
.bn-two .l1{display:block;color:var(--text)}
.bn-two .l2{display:block;color:var(--violet-hi);
  text-shadow:0 0 28px rgba(167,139,250,.55),0 0 64px rgba(139,92,246,.30)}

/* App Store badge — one image, placed in several spots */
.bn-badge-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:30px}
.bn-badge-row.center{justify-content:center}
.bn-badge img{height:56px;width:auto;display:block;border-radius:9px}
.bn-badge-note{font-size:.85rem;color:var(--dim)}


/* ==========================================================================
   EXPLAINER VIDEO + CLICKABLE POSTER
   The poster sits under the hero and scrolls to the video, which is inset
   rather than full-bleed. The play button pulses on arrival so it is obvious
   what to do next.
   ========================================================================== */
.bn-video-wrap{padding:clamp(20px,4vw,56px) var(--pad) clamp(48px,7vw,96px)}
.bn-video{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/9;
  border-radius:var(--r);overflow:hidden;
  border:1.5px dashed rgba(167,139,250,.40);
  background:linear-gradient(135deg,rgba(139,92,246,.13),rgba(139,92,246,.03));
  display:grid;place-items:center;text-align:center;
  box-shadow:0 40px 90px -40px rgba(109,51,232,.55);scroll-margin-top:110px}
.bn-video .lbl{font-weight:600;font-size:1.05rem}
.bn-video .sub{font-size:.82rem;color:var(--violet-hi);margin-top:8px;letter-spacing:.04em}

.bn-play{width:88px;height:88px;border-radius:50%;background:var(--violet);
  display:grid;place-items:center;margin:0 auto 20px;cursor:pointer;
  box-shadow:0 0 0 12px rgba(139,92,246,.16);transition:transform .2s}
.bn-play svg{width:30px;height:30px;fill:#0D0619;margin-left:5px}
.bn-play:hover{transform:scale(1.06)}
@keyframes bn-pulse{
  0%,100%{box-shadow:0 0 0 12px rgba(139,92,246,.16);transform:scale(1)}
  50%    {box-shadow:0 0 0 26px rgba(139,92,246,.02);transform:scale(1.10)}
}
.bn-play.pulse{animation:bn-pulse 1.05s ease-in-out 3}

/* poster teaser under the hero */
.bn-poster{display:block;position:relative;border-radius:var(--r);overflow:hidden;
  max-width:1180px;margin:0 auto;cursor:pointer}
.bn-poster img{width:100%;display:block;transition:transform .5s cubic-bezier(.16,.84,.44,1)}
.bn-poster:hover img{transform:scale(1.015)}
.bn-poster .hint{position:absolute;left:0;right:0;bottom:0;
  padding:56px 24px 22px;text-align:center;font-weight:600;font-size:.95rem;
  color:#fff;background:linear-gradient(to top,rgba(11,7,17,.86),transparent)}
.bn-poster .hint span{border-bottom:1.5px solid var(--violet-hi);padding-bottom:2px}

@media (prefers-reduced-motion: reduce){
  .bn-play.pulse{animation:none}
  .bn-poster:hover img{transform:none}
}


/* ==========================================================================
   SUPPORT FORM
   Plain HTML inside a Ghost card, styled with the site's own tokens so it does
   not read as a third-party embed.
   ========================================================================== */
.bn-form{max-width:720px;margin:0 auto}
.bn-field{margin-bottom:22px}
.bn-field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:8px}
.bn-field .help{font-size:.85rem;color:var(--dim);margin-top:7px;line-height:1.5}
.bn-form select,.bn-form input[type=text],.bn-form input[type=email],.bn-form textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--text);padding:13px 15px;border-radius:11px;
  font-family:inherit;font-size:1rem;line-height:1.5}
.bn-form textarea{min-height:150px;resize:vertical}
.bn-form select:focus,.bn-form input:focus,.bn-form textarea:focus{
  outline:2px solid var(--violet);outline-offset:1px;border-color:transparent}
.bn-form select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23A79FB8' stroke-width='2' stroke-linecap='round' d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px}
.bn-hidden{display:none!important}

.bn-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 30px;border-radius:999px;font-weight:600;font-size:1rem;border:0;
  background:var(--violet);color:#100722;cursor:pointer;font-family:inherit;
  transition:transform .15s,filter .15s}
.bn-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.bn-btn:disabled{opacity:.55;cursor:not-allowed}
.bn-btn-sm{padding:9px 16px;font-size:.86rem;border-radius:9px;
  background:transparent;border:1px solid rgba(167,139,250,.42);color:var(--violet-hi)}

/* screenshots */
.bn-drop{border:1.5px dashed rgba(167,139,250,.40);border-radius:13px;
  padding:26px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.bn-drop:hover,.bn-drop.over{border-color:var(--violet);background:rgba(139,92,246,.06)}
.bn-drop .t{font-weight:600}
.bn-drop .s{font-size:.85rem;color:var(--dim);margin-top:6px}
.bn-thumbs{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.bn-thumb{position:relative;width:118px;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--ink-2)}
.bn-thumb img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.bn-thumb .sz{font-size:.68rem;color:var(--dim);padding:5px 7px;text-align:center}
.bn-thumb button{position:absolute;top:5px;right:5px;width:23px;height:23px;border:0;
  border-radius:50%;background:rgba(11,7,17,.85);color:#fff;cursor:pointer;
  font-size:14px;line-height:1;padding:0}

/* system info */
.bn-sysbox{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.bn-sysbox textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;min-height:110px}

.bn-note{border:1px solid var(--line);border-radius:12px;background:var(--ink-2);
  padding:16px 18px;font-size:.9rem;color:var(--muted);line-height:1.55;margin-bottom:24px}
.bn-note strong{color:var(--text)}

.bn-status{margin-top:18px;padding:15px 18px;border-radius:12px;font-size:.95rem;line-height:1.5}
.bn-status.err{background:rgba(255,90,90,.10);border:1px solid rgba(255,90,90,.35);color:#FFB3B3}
.bn-status.ok{background:rgba(139,92,246,.12);border:1px solid rgba(167,139,250,.4)}


/* ==========================================================================
   SUPPORT PAGE — compact
   A product page earns its whitespace; a support page does not. Someone
   arriving here has a problem, so the first field should be visible without
   scrolling. The hero shrinks and the form starts immediately beneath it.
   ========================================================================== */
/* !important because Ghost's own card stylesheet loads after the theme's and
   sets both a min-height and its own padding on header cards — measured: my
   rule was losing and the computed padding was 0px with a 498px min-height. */
.page-support .kg-header-card{
  padding:clamp(32px,4vw,52px) var(--pad) clamp(14px,1.6vw,20px)!important;
  min-height:0!important}
/* The real culprit, measured: Ghost puts `padding: 12vw 0` on the inner text
   wrapper — 173px top AND bottom at desktop width. That, not the card padding,
   was the ~500px of empty space above the first field. */
.page-support .kg-header-card-text{padding:0 0 6px!important}
.page-support .page-content > *{margin-bottom:0}
.page-support .kg-header-card h2,
.page-support .kg-header-card-heading{font-size:clamp(1.9rem,4vw,3rem)}
.page-support .kg-header-card h3,
.page-support .kg-header-card-subheading{font-size:1.02rem;margin-top:14px}
.page-support .kg-header-card:first-child::before{display:none}   /* drop the glow */
.page-support .bn-pad{padding-top:clamp(26px,3vw,40px)}
.page-support .bn-form{margin-top:0}
.page-support .bn-field{margin-bottom:18px}


/* ==========================================================================
   HEADER CARD PADDING — site-wide
   Ghost puts `padding: 12vw 0` on the inner text wrapper of every header card:
   173px top AND bottom at desktop width, before the card's own padding. That is
   a hero that pushes everything below the fold on a laptop. Measured, not
   guessed — the support page needed the same fix and it was only applied there.
   ========================================================================== */
.kg-header-card-text{padding:clamp(20px,3vw,44px) 0!important}
.kg-header-card{padding:clamp(44px,5vw,80px) var(--pad)!important;min-height:0!important}
/* the support page stays tighter still — people arrive there with a problem */
.page-support .kg-header-card{
  padding:clamp(32px,4vw,52px) var(--pad) clamp(14px,1.6vw,20px)!important}
.page-support .kg-header-card-text{padding:0 0 6px!important}