/* The "Free for iPhone" tag (hero and footer). Loaded after styles.css, so it replaces the plain chip there.
   A lime iPhone badge instead of a dot, cream type you can actually read, an edge that glows lime where the badge sits and fades to nothing,
   and a slow glint that crosses the tag once in a while, like light on glass. Markup is unchanged: <span class="eyebrow"><i></i><span>text</span></span>. */

.eyebrow {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 22px 0 7px; border-radius: 999px;
  font-size: 15.5px; font-weight: 500; letter-spacing: 0.005em; line-height: 1; color: #d8d8cb;
  border: 0;
  background: linear-gradient(180deg, rgba(216, 216, 203, 0.11), rgba(216, 216, 203, 0.04));
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* the edge: a 1px ring that is lime where the badge sits and fades to cream haze toward the end (a masked gradient, so it never tints the fill) */
.eyebrow::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(198, 242, 78, 0.8), rgba(216, 216, 203, 0.26) 34%, rgba(216, 216, 203, 0.1) 76%, rgba(216, 216, 203, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* the badge: a lime disc with a small phone on it (body, and the dynamic island) */
.eyebrow i {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #e3fa8f, #c6f24e 56%, #aedb36);
  box-shadow: inset 0 -2px 3px rgba(60, 90, 0, 0.25), 0 0 0 4px rgba(198, 242, 78, 0.13), 0 0 22px rgba(198, 242, 78, 0.38);
  animation: eb-breathe 4.2s ease-in-out infinite;
}
.eyebrow i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 17px; margin: -8.5px 0 0 -5.5px; box-sizing: border-box;
  border: 1.8px solid #041122; border-radius: 3.6px; }
.eyebrow i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 1.8px; margin: -5.6px 0 0 -2px; border-radius: 1px; background: #041122; }
@keyframes eb-breathe { 50% { box-shadow: inset 0 -2px 3px rgba(60, 90, 0, 0.25), 0 0 0 4px rgba(198, 242, 78, 0.07), 0 0 14px rgba(198, 242, 78, 0.2); } }

/* light crossing the glass: one pass, then a long pause */
.eyebrow::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, 0.2) 50%, transparent 62%); transform: translateX(-130%);
  animation: eb-glint 8s cubic-bezier(0.65, 0, 0.15, 1) 2.6s infinite; }
@keyframes eb-glint { 0% { transform: translateX(-130%); } 16%, 100% { transform: translateX(130%); } }

@media (max-width: 520px) { .eyebrow { height: 40px; font-size: 14.5px; gap: 10px; padding-right: 18px; } .eyebrow i { width: 27px; height: 27px; } }
@media (prefers-reduced-motion: reduce) { .eyebrow i, .eyebrow::after { animation: none; } }