/* bHive Software — the shared stylesheet for bhive.software.
 *
 * Extracted from index.html when the site became two products: bHive, bLine
 * and the home page that introduces them were about to carry three copies of
 * the same 240 lines, which is three places to fix a colour and two of them
 * get forgotten.
 *
 * Honey is the APP's canonical accent (Theme.honey = #FFB826) in both apps.
 * The apps are the source of truth; the site conforms.
 */
  :root{
    /* Honey is the app's canonical accent (Theme.honey = #FFB826). The app is
       the source of truth; the site conforms. These three are the app's own
       honeycomb gradient stops (honeyTop / honey / honeyBottom). */
    --honey:#FFB826; --honey-deep:#BD750F; --honey-soft:#FFC752;
    --ink:#23180B; --ink-soft:#5A4A38; --cream:#FBF4E7; --cream-2:#F5E9D2;
    --card:#FFFFFF; --line:#EAD9BC; --charcoal:#211A12;
    --radius:16px; --maxw:1120px;
    --shadow:0 24px 60px -24px rgba(60,40,10,.35);
    --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    /* Brand wordmark face — Comfortaa (SIL OFL), self-hosted below. */
    --brand-font:"Comfortaa",var(--font);
    /* theme-driven component colors (overridden for dark) */
    --nav-bg:rgba(251,244,231,.82); --nav-border:rgba(234,217,188,.7);
    --pill-bg:#fff; --ghost-bg:rgba(255,255,255,.6); --ghost-bg-hover:#fff;
    --band-a:#2a2114; --band-b:#1d1710; --dl-glow:rgba(255,184,38,.25);
    --toggle-bg:rgba(255,255,255,.55); --toggle-border:var(--line);
  }
  /* dark palette — applied automatically by OS preference (unless the
     viewer forced light) and by the manual toggle (data-theme="dark") */
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
    --cream:#171310;--cream-2:#241d14;--ink:#F3E8D4;--ink-soft:#B7A588;--card:#1f1a13;--line:#352b1e;
    --nav-bg:rgba(23,19,16,.82);--nav-border:#2c2419;--pill-bg:#241d14;
    --ghost-bg:rgba(255,255,255,.06);--ghost-bg-hover:rgba(255,255,255,.1);
    --band-a:#0f0c08;--band-b:#080604;--dl-glow:rgba(255,184,38,.14);
    --toggle-bg:rgba(255,255,255,.06);
  }}
  :root[data-theme="dark"]{
    --cream:#171310;--cream-2:#241d14;--ink:#F3E8D4;--ink-soft:#B7A588;--card:#1f1a13;--line:#352b1e;
    --nav-bg:rgba(23,19,16,.82);--nav-border:#2c2419;--pill-bg:#241d14;
    --ghost-bg:rgba(255,255,255,.06);--ghost-bg-hover:rgba(255,255,255,.1);
    --band-a:#0f0c08;--band-b:#080604;--dl-glow:rgba(255,184,38,.14);
    --toggle-bg:rgba(255,255,255,.06);
  }
  /* Brand wordmark face — Comfortaa (SIL Open Font License). */
  @font-face{font-family:"Comfortaa";src:url("fonts/Comfortaa-Bold.ttf") format("truetype");
    font-weight:700;font-style:normal;font-display:swap}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:var(--font);color:var(--ink);background:var(--cream);
    -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  /* Prose links. The rule above makes every inline link identical to the text
     around it — no colour, no underline — so a link inside a paragraph is
     invisible unless it opts in. Found when the bLine Cloud link shipped and
     could not be seen at all. */
  .morelink{color:var(--honey-deep);font-weight:600;white-space:nowrap}
  .morelink:hover{text-decoration:underline}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .morelink{color:var(--honey-soft)}}
  :root[data-theme="dark"] .morelink{color:var(--honey-soft)}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .btn{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:16px;
    padding:14px 24px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}
  .btn-primary{background:linear-gradient(180deg,var(--honey-soft),var(--honey));color:#3a2708;
    box-shadow:0 10px 24px -8px rgba(200,121,12,.6)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(200,121,12,.7)}
  .btn-ghost{background:var(--ghost-bg);color:var(--ink);border:1px solid var(--line)}
  .btn-ghost:hover{background:var(--ghost-bg-hover)}
  /* product switcher — two apps now, so the nav has to say which one you
     are reading about and offer the other without shouting. */
  .prods{display:flex;gap:2px;margin-left:18px;padding:3px;border-radius:999px;
    background:var(--toggle-bg);border:1px solid var(--toggle-border)}
  .prods a{font-size:14px;font-weight:600;padding:6px 14px;border-radius:999px;
    color:var(--ink-soft);transition:background .18s ease,color .18s ease}
  .prods a:hover{color:var(--ink)}
  .prods a[aria-current="page"]{background:var(--pill-bg);color:var(--ink);
    box-shadow:0 1px 3px rgba(60,40,10,.12)}
  @media (max-width:640px){.prods{margin-left:10px}.prods a{padding:6px 10px}}
  /* theme toggle */
  .theme-toggle{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1px solid var(--toggle-border);
    background:var(--toggle-bg);color:var(--ink);cursor:pointer;display:grid;place-items:center;
    padding:0;transition:background .2s ease,transform .15s ease}
  .theme-toggle:hover{transform:translateY(-1px)}
  .theme-toggle svg{width:19px;height:19px}
  .theme-toggle .i-sun{display:none}
  :root[data-theme="dark"] .theme-toggle .i-sun{display:block}
  :root[data-theme="dark"] .theme-toggle .i-moon{display:none}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
    :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
  }
  .sub{font-size:13.5px;color:var(--ink-soft)}

  /* ---- nav ---- */
  header.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(12px);
    background:var(--nav-bg);border-bottom:1px solid var(--nav-border)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
  /* The nav's right-hand group. Was three hand-written inline styles, and two
     of them carried a margin-left:auto that fights space-between — so the
     product switcher sat in a different place on bHive's page than on
     bLine's and the home page's. */
  .nav-actions{display:flex;align-items:center;gap:12px}
  /* Truly centred, not merely distributed. `space-between` puts the middle
     child wherever the other two leave room, so the switcher sat 82px right of
     centre on the home page purely because "bHive Software" is a wider brand
     than "bLine". Giving the two outer items equal flex pins the switcher to
     the middle whatever they contain. */
  .nav-in > .brand{flex:1 1 0}
  .nav-in > .nav-actions{flex:1 1 0;justify-content:flex-end}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--brand-font);font-weight:700;letter-spacing:-.2px;font-size:18px}
  .brand img{height:34px;width:auto}
  .brand small{display:block;font-weight:600;font-size:11px;letter-spacing:.3px;color:var(--ink-soft);margin-top:-2px}
  .nav .btn{padding:10px 18px;font-size:14.5px}

  /* ---- hero ---- */
  .hero{position:relative;padding:64px 0 40px;text-align:center;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:640px;z-index:0;
    background:radial-gradient(60% 60% at 50% 0%,rgba(255,184,38,.35),rgba(255,184,38,0) 70%)}
  .hero .wrap{position:relative;z-index:1}
  .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--honey-deep);
    background:var(--pill-bg);border:1px solid var(--line);padding:7px 14px;border-radius:999px;margin-bottom:22px}
  .pill .dot{width:7px;height:7px;border-radius:50%;background:#2fae5f}
  h1{font-size:clamp(34px,5.4vw,60px);line-height:1.04;letter-spacing:-1.5px;margin:0 auto 18px;max-width:16ch;font-weight:800}
  h1 .hl{color:var(--honey-deep)}
  .lede{font-size:clamp(17px,2.2vw,21px);color:var(--ink-soft);max-width:60ch;margin:0 auto 30px}
  .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}
  .badges{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px;color:var(--ink-soft);font-size:14px}
  .badges b{color:var(--ink)}
  /* **Direct children only.** As `.badges span` this also matched the span
     wrapping each label, making that inline-flex too — so the <b> and the
     text after it became separate flex items and the 7px gap landed between
     them, printing "No account , no cloud storage". The gap belongs between
     the icon and the label, nowhere else. */
  .badges > span{display:inline-flex;align-items:center;gap:7px}
  .badges svg{width:16px;height:16px;color:var(--honey-deep)}

  /* A screenshot needs an EDGE. The hairline below is black at 6%, and the
     shadow is a dark blur — both invisible against a dark page, so a
     dark-UI screenshot bled into the background and read as a smudge rather
     than as a window. Light keeps the original treatment; dark gets a light
     hairline instead, which is the only thing that separates them. */
  .shot{margin:46px auto 0;max-width:1040px;border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);background:#1c1c1e}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shot{
    border-color:rgba(255,255,255,.14);box-shadow:0 22px 50px -20px rgba(0,0,0,.75)}}
  :root[data-theme="dark"] .shot{
    border-color:rgba(255,255,255,.14);box-shadow:0 22px 50px -20px rgba(0,0,0,.75)}
  /* **height:auto is not optional here.** An <img> carrying width and height
     attributes (which it should, so the layout does not jump while it loads)
     has that height applied as a presentational hint. With width:100% and no
     height rule, the width scales to the column while the height stays pinned
     at the attribute's pixel value — and the picture stretches. Measured:
     the shelf shot rendered at ratio 3.17 against a natural 5.92, and the
     settings shot at 0.88 against 1.85. Both more than 2x wrong. */
  .shot img{width:100%;height:auto}
  /* A <video> needs the same treatment as an <img> here, and for the same
     reason: it carries width/height attributes so the layout does not jump,
     and without height:auto that height stays pinned while the width scales. */
  .shot video{width:100%;height:auto;display:block}

  /* ---- security band ---- */
  /* the band is always dark, so its text is a FIXED light color in both
     themes — using --cream here made the headings vanish in dark mode. */
  .band{background:linear-gradient(180deg,var(--band-a),var(--band-b));color:#FBF4E7;padding:56px 0;margin-top:72px}
  .band .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
  .band h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.8px;margin:0 0 14px;line-height:1.1}
  /* A band is dark in BOTH themes — it sets its own cream text — so a button
     inside one cannot use --ink, which is near-black in light mode and would
     leave the label invisible on the dark ground. Fixed light-on-dark here. */
  /* `.band p` is (0,1,1) and would win over a lone `.band-cta` (0,1,0), so the
     margin here has to be at least as specific or it silently does nothing. */
  .band .band-cta{margin:26px 0 0}
  .band .btn-ghost{background:rgba(255,255,255,.07);color:#FBF4E7;
    border:1px solid rgba(255,255,255,.18)}
  .band .btn-ghost:hover{background:rgba(255,255,255,.13)}
  .band p{color:#D9C7A6;font-size:17px;margin:0 0 8px;max-width:46ch}
  .lock{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
    background:linear-gradient(180deg,var(--honey-soft),var(--honey-deep));color:#2a1c06}
  .lock svg{width:34px;height:34px}
  .assurances{display:grid;gap:14px}
  .assurances li{list-style:none;display:flex;gap:12px;align-items:flex-start;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:16px 18px;border-radius:12px}
  .assurances b{display:block;font-size:15.5px;margin-bottom:2px}
  .assurances small{color:#C3B192;font-size:13.5px;line-height:1.45}
  .assurances .ck{color:var(--honey-soft);flex:0 0 auto;margin-top:2px}
  .assurances svg{width:20px;height:20px}

  /* ---- features ---- */
  section.features{padding:84px 0 30px}
  .eyebrow{text-align:center;color:var(--honey-deep);font-weight:700;letter-spacing:1.5px;font-size:13px;text-transform:uppercase}
  /* max-width 20ch forces a break; balance decides WHERE, so a heading no
     longer drops one orphaned word onto its own line. */
  .sec-title{text-align:center;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.9px;
    margin:10px auto 8px;max-width:22ch;text-wrap:balance;line-height:1.12}
  .sec-sub{text-align:center;color:var(--ink-soft);font-size:18px;max-width:56ch;margin:0 auto 26px}

  .feature{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;padding:56px 0}
  .feature.rev .txt{order:2}
  .feature .kicker{color:var(--honey-deep);font-weight:700;font-size:13px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:12px}
  .feature h3{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.6px;margin:0 0 14px;line-height:1.12}
  .feature p{color:var(--ink-soft);font-size:17px;margin:0 0 14px;max-width:46ch}
  .feature ul{margin:0;padding:0}
  .feature li{list-style:none;display:flex;gap:10px;align-items:flex-start;margin:9px 0;font-size:15.5px}
  .feature li svg{width:19px;height:19px;color:var(--honey-deep);flex:0 0 auto;margin-top:2px}
  .fshot{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.07);background:#1c1c1e}

  /* ---- grid of small features ---- */
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
  .cardf{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
  .cardf .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
    background:var(--cream-2);color:var(--honey-deep)}
  .cardf .ic svg{width:23px;height:23px}
  .cardf h4{margin:0 0 6px;font-size:17.5px;letter-spacing:-.3px}
  .cardf p{margin:0;color:var(--ink-soft);font-size:14.5px}

  /* ---- download ---- */
  /* The 90px above only works when the section before it is the page colour,
     which is the case on bhive.html. On bLine's page a dark .band sits directly
     above, so those 90px showed the body colour as a lighter stripe between the
     band's near-black and the download section's honey glow — a three-colour
     seam. Closed only for that adjacency; the section's own 70px of padding
     gives it room. */
  .band + .download{margin-top:0}
  .download{margin:90px 0 0;padding:70px 0 78px;text-align:center;position:relative;overflow:hidden;
    background:radial-gradient(70% 120% at 50% 0,var(--dl-glow),rgba(255,184,38,0) 70%),var(--cream)}
  .download img.bee{width:96px;margin:0 auto 20px;filter:drop-shadow(0 12px 20px rgba(200,121,12,.3))}
  .download h2{font-size:clamp(30px,4vw,44px);letter-spacing:-1px;margin:0 0 12px}
  .download p{color:var(--ink-soft);font-size:18px;margin:0 auto 28px;max-width:48ch}
  .meta{margin-top:16px;color:var(--ink-soft);font-size:13.5px}

  footer{border-top:1px solid var(--line);padding:34px 0;color:var(--ink-soft);font-size:13.5px}
  .foot-in{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
  .foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--brand-font);font-weight:700;color:var(--ink)}
  .foot-brand img{height:26px;width:auto}

  .lbl-sm{display:none}

  /* ---- tablet / iPad ---- */
  @media (max-width:1024px){
    .wrap{padding:0 22px}
    .feature{gap:36px}
    .band .wrap{gap:30px}
  }
  @media (max-width:860px){
    .hero{padding:44px 0 24px}
    .band{padding:44px 0;margin-top:56px}
    .band .wrap{grid-template-columns:1fr;gap:26px}
    section.features{padding:60px 0 20px}
    .feature{grid-template-columns:1fr;gap:24px;padding:34px 0}
    .feature.rev .txt{order:0}
    .feature p,.feature .lede,.lede{max-width:none}
    .feature .fshot{order:-1}          /* show the screenshot above its text on narrow layouts */
    .grid3{grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
    .download{margin-top:64px;padding:56px 0 60px}
  }
  /* ---- phone / iPhone ---- */
  @media (max-width:560px){
    .wrap{padding:0 18px}
    .nav-in{height:58px}
    .brand{font-size:16px;gap:9px}
    .brand img{height:30px;width:auto}
    .brand small{font-size:10px}
    .lbl-lg{display:none}.lbl-sm{display:inline}
    .nav .btn{padding:9px 15px;font-size:14px}
    .hero{padding:34px 0 18px}
    .pill{font-size:12px;margin-bottom:18px}
    h1{letter-spacing:-.8px}
    .cta{gap:10px}
    .cta .btn{width:100%;justify-content:center}
    .badges{gap:12px 18px;margin-top:18px;font-size:13px}
    .shot{margin-top:30px;border-radius:12px}
    .assurances li{padding:14px 15px}
    .grid3{grid-template-columns:1fr;gap:14px}
    .feature h3{font-size:23px}
    .feature p{font-size:16px}
    .download .bee{width:78px}
    .download .btn{width:100%;justify-content:center}
    .foot-in{flex-direction:column;text-align:center;gap:12px}
  }