/* hungreegoat.com/business — same brand system as the homepage (tokens.css, hg-ui.css,
   site.css for header/hero/footer chrome), this file only adds the business-page sections. */

/* ---- header (this page only: single-line wordmark, no duplicate Community Edition
   nav item since the CTA button already covers it, tighter gaps so nothing wraps) ---- */
.top .logo{gap:12px}
.top .logo .wordmark{font:800 17px/1.15 var(--hg-display);letter-spacing:.04em;color:var(--hg-gold);white-space:nowrap}
.top .bar{gap:16px}
.top .nav{gap:16px}
.top .nav a{white-space:nowrap}
.top .cta{gap:8px}
.cta-divider{width:1px;height:24px;background:var(--hg-line2);margin:0 2px;flex:none}

/* ---- hero ---- */
.hero.biz{min-height:min(60vh,520px)}
.hero.biz .hero-inner{padding:56px 0 64px;max-width:760px;margin-inline:auto}
.hero.biz .brandline{display:block;font:800 13px var(--hg-display);letter-spacing:.22em;text-transform:uppercase;color:var(--hg-gold3);margin-bottom:14px}
.hero.biz h1{font-size:clamp(34px,6vw,58px)}
.hero.biz h1 .accent{background:var(--hg-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.biz .lede{max-width:620px}
.hero.biz .hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.btn.red{background:linear-gradient(90deg,#ff3b4d,#d90429);color:#fff;border-color:rgba(255,120,130,.5);box-shadow:0 10px 28px rgba(255,0,51,.22)}
/* controlled reading zone: darker directly behind the copy, fading out toward the
   edges so the people/skyline/water stay vibrant instead of a flat dark hero */
.hero.biz .hero-shade{background:radial-gradient(closest-side at 50% 56%,rgba(5,9,18,.85),rgba(5,9,18,.55) 48%,transparent 74%),linear-gradient(180deg,rgba(7,13,24,.55) 0%,rgba(7,13,24,.15) 35%,rgba(7,13,24,.2) 70%,rgba(7,13,24,.95) 100%),radial-gradient(60% 70% at 50% 40%,rgba(7,13,24,.25),transparent 70%)}

/* ---- shared section chrome ---- */
.biz-sec{padding:56px 0}
.biz-sec .sec-head{display:block;text-align:center;max-width:640px;margin:0 auto 28px}
.biz-sec .sec-head p.muted{margin-top:8px}

/* ---- choose your path ---- */
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.path-card{padding:26px 22px;text-align:center;display:flex;flex-direction:column;align-items:center}
.path-card .pi{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(242,193,78,.12);border:1px solid var(--hg-line-gold);color:var(--hg-gold);margin-bottom:14px}
.path-card .pi svg{width:26px;height:26px}
.path-card h3{margin:0 0 8px;font:800 18px var(--hg-display)}
.path-card p{margin:0 0 18px;color:var(--hg-muted);font-size:13.5px;line-height:1.55;flex:1}

/* ---- built for more than radio ---- */
.usecase-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.usecase{display:flex;align-items:center;gap:10px;padding:14px 14px;border-radius:14px}
.usecase .ui{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(242,193,78,.1);color:var(--hg-gold3);flex:none}
.usecase .ui svg{width:19px;height:19px}
.usecase span{font:700 13px var(--hg-display);line-height:1.2}

/* ---- HUNGREE Goat in action ---- */
.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.showcase-card{overflow:hidden;padding:0}
.shot-btn{display:block;position:relative;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.shot-btn .shot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--hg-line);transition:filter .15s}
.shot-btn:hover .shot{filter:brightness(1.06)}
.shot-btn .expand-hint{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(5,9,18,.72);border:1px solid var(--hg-line2);color:var(--hg-text);font:700 11.5px var(--hg-sans);backdrop-filter:blur(6px)}
.shot-btn .expand-hint svg{width:13px;height:13px;flex:none}
.showcase-card .cap{padding:16px 18px}
.showcase-card h3{margin:0 0 4px;font:800 15.5px var(--hg-display)}
.showcase-card p{margin:0;color:var(--hg-muted);font-size:13px;line-height:1.5}

/* ---- screenshot lightbox ----
   #lightbox (not .lightbox) is deliberate: site.css's `body>*:not(.site-bg)` rule sets
   position:relative on every direct child of <body> at specificity (0,1,1), which beats a
   plain class selector like .lightbox (0,1,0) regardless of source order. Without the id
   selector here the modal silently stayed position:relative, rendering inline at the bottom
   of the document instead of as a true viewport overlay. */
#lightbox{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:min(6vh,48px) 20px;background:rgba(5,9,18,.92);backdrop-filter:blur(6px)}
.lightbox-inner{position:relative;max-width:min(1400px,94vw);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox-frame{max-width:100%;max-height:calc(100vh - 160px);overflow:auto;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);border:1px solid var(--hg-line-gold)}
.lightbox-frame img{display:block;width:100%;height:auto;cursor:zoom-in}
.lightbox-frame.zoomed{max-width:94vw}
.lightbox-frame.zoomed img{width:auto;max-width:none;cursor:zoom-out}
.lightbox-cap{color:var(--hg-muted);font-size:13px;text-align:center;max-width:640px}
.lightbox-cap b{color:var(--hg-text);font:800 14px var(--hg-display);display:block;margin-bottom:2px}
.lightbox-close{position:absolute;top:-46px;right:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(14,26,42,.9);border:1px solid var(--hg-line2);color:var(--hg-text)}
.lightbox-close svg{width:20px;height:20px}
.lightbox-close:hover{border-color:rgba(242,193,78,.6)}

/* ---- how you can work with us ---- */
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.work-card{padding:24px 22px;display:flex;flex-direction:column}
.work-card h3{margin:0 0 12px;font:800 17px var(--hg-display)}
.work-card ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.work-card ul li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:#d5e0ee}
.work-card ul li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--hg-green2)}

/* ---- final CTA band ---- */
.cta-band{position:relative;padding:70px 0;overflow:hidden;text-align:center}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.cta-band .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,18,.82),rgba(5,9,18,.9))}
.cta-band .wrap{position:relative}
.cta-band h2{margin:0 0 10px}
.cta-band p{max-width:560px;margin:0 auto 26px;color:var(--hg-muted);font-size:15px;line-height:1.55}

@media (max-width:1023px){
  .usecase-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  /* header: the desktop CTA pair (View Community Edition / Talk to Us) has no
     yt-cta/player-link hook for site.css's existing mobile-hide rule to catch, so it was
     staying visible right alongside .mobile-cta's own copy of the same two buttons — two
     stacked CTA rows before the hero even started. Hide the top-bar pair; .mobile-cta
     (already sized with .btn.sm) is the single mobile CTA row, same pattern the homepage
     already uses for its own header buttons. */
  .top .cta .btn,.cta-divider{display:none}

  /* hero: drop the desktop/tablet vh-based min-height in favor of pure content-driven
     sizing — sidesteps Safari's dynamic-toolbar vh miscalculation entirely (the actual
     cause of the second CTA button disappearing under the browser chrome) rather than
     swapping to another viewport unit that has the same category of edge case. */
  .hero.biz{min-height:auto}
  .hero.biz .hero-inner{padding:30px 0 34px}
  .hero.biz .brandline{font-size:11px;margin-bottom:8px}
  .hero.biz h1{font-size:clamp(32px,9vw,48px);line-height:1.08}
  .hero.biz .lede{font-size:16px;line-height:1.5;margin-top:12px}
  .hero.biz .hero-ctas{flex-direction:column;align-items:stretch;gap:10px;margin-top:18px}
  .hero.biz .hero-ctas .btn{width:100%;min-height:44px;padding:0 18px;font-size:14px}

  .path-grid,.work-grid{grid-template-columns:1fr}
  .usecase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase-grid{grid-template-columns:1fr}
  /* "Why teams choose" cards: true mobile is single-column so the text wraps at a
     readable measure instead of squeezing into a narrow column (tablet keeps the shared
     2-column .features breakpoint from site.css). */
  .why-grid{grid-template-columns:1fr}
  .why-grid li{min-height:0;padding:20px 22px}
  #lightbox{padding:16px}
  .lightbox-inner{gap:10px}
  .lightbox-frame{max-height:calc(100vh - 120px)}
  .lightbox-close{position:fixed;top:12px;right:12px}
}