/* ==========================================================================
   explore.css: the "Explore this system" strip under the Smart Agriculture
   System hero. Five in-page links and nothing else.

   It borrows what the site already has rather than adding a component: the
   mono kicker for its label, and the plain links of the mega menu's side column,
   which turn to the accent on hover. Two hairlines hold it as one quiet line
   between the hero and the first section. It never sticks. The sections it
   points at clear the fixed bar through site.css's [id] scroll margin.
   ========================================================================== */
.explore{position:relative;background:var(--bg);color:var(--text);padding:0 var(--pad)}
.explore .wrap{display:flex;flex-wrap:wrap;align-items:center;
  gap:2px clamp(22px,3.4vw,56px);padding:clamp(6px,1vh,12px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.explore .kicker{margin:0}
.explore ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:0 clamp(18px,2.6vw,40px)}
/* 44px tall so each one is an easy tap, the same height as the bar's own links */
.explore a{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--body);font-size:15px;font-weight:500;line-height:1.3;
  color:var(--text-2);text-decoration:none;transition:color .35s var(--ease)}
.explore a:hover{color:var(--accent)}

/* a phone: the label on its own line, the links in two even columns. Up to 660px,
   because until then one row of five leaves "Technical details" alone on a second line */
@media (max-width:660px){
  .explore .wrap{display:block;padding:14px 0 8px}
  .explore .kicker{margin-bottom:4px}
  .explore ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
}