/* Mesh Labz – Polycop page. Builds on clonr.css; Polycop's accent is the bright blue of its shield logo. */

.polycop-page { --cop: #1a9be6; }
.polycop-page .c-hero .tag { color: #cfe9fb; border-color: rgba(26,155,230, .45); background: rgba(26,155,230, .08); }
.polycop-page .c-hero h1 em { color: var(--cop); }
.polycop-page .c-head .eyebrow { color: var(--cop); }
.polycop-page .c-hero-art::before { background: radial-gradient(50% 50% at 50% 50%, rgba(26,155,230,.2), rgba(0,0,0,0) 70%); }
.polycop-page .c-hero-art img { aspect-ratio: 585 / 635; object-fit: cover; }   /* same size as the Clonr hero image */
/* Text starts at exactly the same height as on the Clonr page (the longer intro just adds a line below) */
@media (min-width: 861px) { .polycop-page .c-hero > div:first-child { align-self: start; margin-top: 104px; } }

/* ---------- What it finds: three drawn examples ---------- */
.finds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.find { border-radius: var(--r-lg); overflow: hidden; background: var(--field); border: 1px solid var(--line); }
.find img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 760; object-fit: cover; }
.find .txt { padding: 1.3rem 1.4rem 1.5rem; }
.find .txt .mono { color: var(--cop); }
.find h3 { margin: .4rem 0 .45rem; font: 700 1.35rem/1.15 var(--f-head); }
.find p { margin: 0; color: #c3ced9; }
@media (max-width: 900px) { .finds { grid-template-columns: 1fr; } .find { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
@media (max-width: 560px) { .find { display: block; } }

/* ---------- Two clicks ---------- */
.clicks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.click { display: flex; flex-direction: column; gap: .2rem; padding: 1.5rem; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(26,155,230,.06), rgba(26,155,230,0) 55%), var(--field); border: 1px solid var(--line); }
.click .kbd { align-self: flex-start; font-size: .9rem; padding: .3em .7em; }
.click h3 { margin: .9rem 0 .4rem; font: 700 1.2rem/1.2 var(--f-head); }
.click p { margin: 0; color: #c3ced9; }
.click .msg { margin-top: auto; padding-top: 1rem; display: block; }
.msg { font: 500 .82rem/1.5 ui-monospace, Consolas, monospace; color: #e8eef4; }
.msg::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: .9rem; }
.msg.hud { color: #cfe9fb; }
@media (max-width: 900px) { .clicks { grid-template-columns: 1fr; } }

/* ---------- Safe by design band ---------- */
.safe { text-align: center; padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px); border-radius: var(--r-lg);
  background: radial-gradient(70% 90% at 50% 0%, rgba(26,155,230,.16), rgba(26,155,230,.04) 50%, rgba(0,0,0,0) 80%), #0a0c10; border: 1px solid var(--line); }
.safe .eyebrow { display: block; color: var(--cop); margin-bottom: 1rem; }
.safe h2 { margin: 0 auto 1rem; max-width: 18ch; font: 700 clamp(2.2rem, 5.4vw, 4.2rem)/1 var(--f-head); letter-spacing: -0.04em; }
.safe h2 em { font-style: normal; color: var(--cop); }
.safe p { margin: 0 auto; max-width: 56ch; color: #c3ced9; font-size: 1.08rem; }

/* Install notes sit under the steps */
.polycop-page #install .notes { margin-top: 12px; }

/* ---------- Download card ---------- */
.get { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 36px); align-items: center; padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r-lg); background: radial-gradient(90% 120% at 0% 0%, rgba(26,155,230,.18), rgba(26,155,230,0) 55%), #0d1117; border: 1px solid rgba(26,155,230,.35); }
.get .badge-shield { width: clamp(64px, 8vw, 96px); height: auto; filter: drop-shadow(0 10px 30px rgba(26,155,230,.35)); }
.get .eyebrow { display: block; color: var(--cop); margin-bottom: .5rem; }
.get h2 { margin: 0 0 .5rem; font: 700 clamp(1.8rem, 3.6vw, 2.6rem)/1.05 var(--f-head); letter-spacing: -0.03em; }
.get p { margin: 0; color: #c3ced9; max-width: 52ch; }
.get .btn { min-width: 200px; }
@media (max-width: 760px) { .get { grid-template-columns: 1fr; justify-items: start; } }