/* Shared Clarity demo styles (all viewports) */

/* Live nav links: highlighted so visitors can see what is clickable */
.nav a[href]{
  color:var(--deep);
  font-weight:600;
  background:#f6f2fe;
}
.nav a[href]:hover{background:#efe9fb}
.nav a[href]::after{
  content:"live";
  margin-left:auto;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,var(--p),var(--pink));
  border-radius:20px;
  padding:2px 6px;
  flex:0 0 auto;
}

/* Inactive nav areas: muted, not clickable */
.nav a:not([href]):not(.on){
  opacity:.42;
  cursor:default;
  pointer-events:none;
}

/* Legend under the nav brand */
.nav .brand{flex-wrap:wrap}
.nav .brand::after{
  content:"Highlighted items are live in this demo";
  flex-basis:100%;
  font-size:10px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.2px;
  line-height:1.35;
}