:root{
  --blue:#0e76bc;
  --accent:#f7941e;
  --ink:#111827;
  --soft:#f6f8fb;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#ffffff,#eef6ff);
}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
header{background:linear-gradient(90deg,var(--blue),#1786d6);color:#fff;padding:24px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo-img{height:75px;width:auto;display:block}
.tagline{margin:0px 0 0 10px;opacity:.95; color: var(--cta-email); font-weight: bold; font-size:1.5pc;}

main{padding:28px 0}
.grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:860px){.grid{grid-template-columns:1.2fr .8fr}}

.card{
  background:#fff;border:1px solid #e5eef7;border-radius:14px;
  box-shadow:0 6px 20px rgba(14,118,188,.12);padding:22px

}

h1{font-size:clamp(24px,3.5vw,34px);margin:0 0 6px 0}
h2{font-size:clamp(18px,2.2vw,22px);margin:0 0 10px 0;color:#333}

.pill{display:inline-block;background:var(--soft);border:1px solid #dbe9f7;padding:6px 10px;border-radius:999px;font-size:13px;color:#2a4560}
.series{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

.hero{display:flex;align-items:center;gap:16px}
.figure{
  width:84px;height:84px;border-radius:14px;
  background:conic-gradient(from 160deg,var(--accent),#ffd6a6,var(--accent));
  display:grid;place-items:center;font-weight:700;color:#612f00;
}
.msg{font-size:18px;margin:2px 0 0 0}
.toggle{display:flex;align-items:center;gap:8px;margin-top:8px}
.toggle input{accent-color:var(--accent)}

.ctaRow{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
button,.btn{
  appearance:none;border:0;background:var(--blue);color:#fff;
  border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer
}
.btn-sec{background:#fff;color:var(--blue);border:1px solid #d0e4f8}
.btn-ghost{background:transparent;color:var(--blue);border:1px dashed #bcd7f7}
/* CTA trio */
.ctaRow.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* tweakable colours – set to your logo colours */
:root{
  --cta-copy:#0e76bc;  /* ANME blue (example) */
  --cta-share:#1fbc0e; /* H&G orange (example) */
  --cta-email:#f7941e; /* 3rd accent – change to suit */
}

.btn-cta{
  display:inline-block;
  text-align:center;
  padding:12px 14px;
  border-radius:10px;
  font-weight:700;
  line-height:1.1;
  border:0;
  cursor:pointer;
}

.btn-copy { background:var(--cta-copy); color:#fff; }
.btn-share{ background:var(--cta-share); color:#fff; }
.btn-email{ background:var(--cta-email); color:#fff; text-decoration: none;}

.copybox{background:#0f172a08;border:1px dashed #cbd5e1;border-radius:12px;padding:12px}
textarea{width:100%;min-height:92px;border:1px solid #cfe3f9;border-radius:10px;padding:10px;font-family:inherit}
.small{font-size:13px;color:#6880a1; text-align: center;}
.small a {text-decoration: none; color: #6880a1;}
.list{margin:10px 0 0 0;padding:0 0 0 18px}
.col{display:flex;flex-direction:column;gap:12px}
footer{padding:30px 0;color:#4b5563}

.fig-image-wrap{margin-top:8px; margin: auto}
.fig-img{
  width:100%;max-width:360px;border-radius:12px;
  border:1px solid #e5eef7;box-shadow:0 3px 10px rgba(14,118,188,.08)
}


/* sub grid that mirrors the top grid widths */
.grid-sub{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){.grid-sub{grid-template-columns:1.2fr .8fr}}

:root{ --fig-img-max: 200px; }   /* tweak as you like */
.fig-img{ max-width: var(--fig-img-max); }


.found-compact{
  display:flex;align-items:center;gap:8px;margin-top:6px
}
.found-compact button{padding:6px 10px;font-size:13px}
.found-compact .pill{padding:4px 8px;font-size:12px}

#pillCode{ display:none !important; }


/* --- CTA normalisation --- */
.btn-cta, .ctaRow .btn, .ctaRow button{
  font-size:14px;          /* match across <a> and <button> */
  line-height:1.2;
}
.btn-cta{
  display:block;           /* full width inside its grid column */
  width:100%;
  text-decoration:none;
}

/* Join the ANME: two equal buttons */
.ctaRow.split-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.ctaRow.split-2 a{ width:100%; text-align:center; }

/* Full-width helper for single buttons */
.btn-block{ display:block; width:100%; text-align:center; }

/* Found counter: button full width, total on the next line */
.found-compact{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:6px;
}
.found-compact #btnFound{ width:100%; }
.found-compact .pill{ justify-self:start; }

/* Vertically center and equalize all CTA buttons (top row + lower cards) */
.btn-cta, .ctaRow .btn, .ctaRow button, .ctaRow a.btn-sec{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;      /* same height everywhere */
  padding:0 14px;       /* horizontal padding; vertical handled by min-height */
  text-decoration:none; /* anchors look like buttons */
}

/* (Optional) a slightly different look for secondary buttons */
.btn-sec { background:#fff; color:var(--blue); border:1px solid #d0e4f8; }

/* Found counter: total on its own centered line */
.found-compact .pill { justify-self:center; }

.btn-alt1 {
  background-color: var(--cta-email);
  color: white;
}

.btn-alt2 {
  background-color: var(--cta-share);
}


/* ==========================   Header v2 ================================== */
header {
  background:#fff; /* no full-width gradient anymore */
  padding:0px;
}

/* gradient only inside the max-width wrap */
.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(90deg,#ffffff,var(--blue));
  border-radius:12px;
  padding:12px 18px;
  border: var(--blue);
  border-style:solid;
  border-width: 2px;
}

/* existing brand remains */
.brand { display:flex; align-items:center; gap:12px; }

/* new right-side event mark */
.event-mark {
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#fff;
  font-weight:600;
  text-align:center;
  line-height:1.1;
}
.event-mark .event-text {
  font-size:14px;
}
.event-mark .event-logo {
  height:32px;
  width:auto;
  margin:4px 0;
}


.grid-sub {
  align-items: stretch; /* make both cards same height */
}
.grid-sub .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes buttons down */
}