/* atomGTM blog CTAs: mid-article contextual card + end-of-article audit form.
   Inherits the :root tokens from article.css, which is enqueued as a dependency. */

/* ---------- mid-article card ---------- */
.agtm-bc-mid{
  margin:clamp(2.2rem,5vw,3rem) 0;
  padding:clamp(1.35rem,3.5vw,1.8rem) clamp(1.35rem,3.5vw,1.9rem);
  border:1px solid var(--border-2);
  border-left:2px solid var(--violet);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(139,92,246,.07),rgba(139,92,246,.02));
}
.agtm-bc-mid .bc-tag{
  display:inline-block;font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet-3);
  margin-bottom:.7rem;
}
#bg-root .agtm-bc-mid h3{
  font-family:var(--display)!important;font-weight:600;
  font-size:clamp(1.08rem,2.3vw,1.28rem);line-height:1.25;letter-spacing:-.01em;
  color:var(--text);margin:0 0 .55rem;
}
.agtm-bc-mid p{
  color:var(--text-2);font-size:.96rem;line-height:1.65;margin:0 0 1.05rem;
}
.agtm-bc-mid .bc-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;font-size:.94rem;color:var(--violet-2);
  border-bottom:1px solid rgba(167,139,250,.35);padding-bottom:2px;
  transition:color .18s,border-color .18s;
}
.agtm-bc-mid .bc-link:hover{color:var(--violet-3);border-color:var(--violet-3)}
.agtm-bc-mid .bc-link svg{width:15px;height:15px;transition:transform .18s}
.agtm-bc-mid .bc-link:hover svg{transform:translateX(3px)}

/* ---------- end-of-article form ---------- */
.agtm-bc-form{max-width:var(--maxw);margin:clamp(3rem,6vw,5rem) auto 0;padding:0 var(--pad)}
.agtm-bc-form *{box-sizing:border-box}
.agtm-bc-form .bcf-inner{
  position:relative;overflow:hidden;
  border:1px solid var(--border-2);border-radius:22px;
  background:radial-gradient(120% 160% at 0% -20%,rgba(139,92,246,.20),transparent 62%),
             linear-gradient(180deg,var(--surface),var(--bg-2));
  padding:clamp(1.9rem,5vw,3.2rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,3.4rem);align-items:start;
}
.bcf-eyebrow{
  display:block;font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--violet-3);margin-bottom:.85rem;
}
#bg-root .agtm-bc-form h2{
  font-family:var(--display)!important;font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.25rem);line-height:1.08;letter-spacing:-.02em;
  color:var(--text);margin:0 0 .85rem;
}
.bcf-left>p{color:var(--text-2);font-size:1rem;line-height:1.65;margin:0 0 1.4rem;max-width:44ch}
.bcf-list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.6rem}
.bcf-list li{
  position:relative;padding-left:1.5rem;
  color:var(--text-2);font-size:.93rem;line-height:1.5;
}
.bcf-list li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:7px;height:7px;border-radius:2px;background:var(--violet);
}
.bcf-proof{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;
  color:var(--text-3);margin:0;padding-top:1.1rem;border-top:1px solid var(--border);
}

/* form column */
.bcf-form{display:grid;gap:.9rem}
.bcf-form label{
  display:grid;gap:.4rem;
  font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--text-2);
}
/* font-size must stay at 16px: iOS Safari auto-zooms any focused input below that.
   -webkit-text-fill-color is set explicitly because iOS overrides `color` on autofill. */
.bcf-form input,.bcf-form select{
  width:100%;font-family:var(--sans);font-size:16px;font-weight:400;
  color:var(--text);-webkit-text-fill-color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-2);border-radius:10px;
  padding:.72rem .85rem;
  transition:border-color .16s,background .16s,box-shadow .16s;
  appearance:none;-webkit-appearance:none;
}

/* Autofill on a dark field. Safari forces its own near-black text and a light
   background, which renders invisible here. Background cannot be overridden
   directly, hence the inset shadow; the long transition stops Safari repainting
   its own colour after a frame. */
.bcf-form input:-webkit-autofill,
.bcf-form input:-webkit-autofill:hover,
.bcf-form input:-webkit-autofill:focus,
.bcf-form input:-webkit-autofill:active,
.bcf-form select:-webkit-autofill{
  -webkit-text-fill-color:var(--text)!important;
  caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset!important;
  box-shadow:0 0 0 1000px var(--surface-2) inset!important;
  transition:background-color 9999s ease-in-out 0s;
}
.bcf-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239AA0AC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:11px;
  padding-right:2.2rem;
}
.bcf-form select:invalid{color:var(--text-3)}
.bcf-form option{background:var(--surface);color:var(--text)}
.bcf-form input::placeholder{color:var(--text-3)}
.bcf-form input:focus,.bcf-form select:focus{
  outline:none;border-color:var(--violet);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(139,92,246,.16);
}
.bcf-btn{
  margin-top:.35rem;width:100%;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.98rem;color:#fff;
  padding:.85rem 1.4rem;border:0;border-radius:999px;
  background:linear-gradient(180deg,var(--violet-2),var(--violet));
  box-shadow:0 12px 40px -14px var(--glow);
  transition:transform .18s,box-shadow .18s;
}
.bcf-btn:hover{transform:translateY(-2px);box-shadow:0 18px 50px -14px var(--glow)}
.bcf-micro{font-size:.78rem;color:var(--text-3);text-align:center;margin:.25rem 0 0;line-height:1.5}
.bcf-micro a{color:var(--text-2);border-bottom:1px solid var(--border-2)}
.bcf-micro a:hover{color:var(--violet-2)}
.bcf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* states */
.bcf-note{border-radius:12px;padding:1.1rem 1.25rem;border:1px solid var(--border-2)}
.bcf-note p{margin:.35rem 0 0;font-size:.93rem;line-height:1.6;color:var(--text-2)}
.bcf-ok{background:rgba(139,92,246,.10);border-color:rgba(139,92,246,.35)}
.bcf-ok strong{color:var(--text);font-size:1.02rem}
.bcf-err{background:rgba(255,120,120,.08);border-color:rgba(255,120,120,.30);margin-bottom:1rem}
.bcf-err p{margin:0;color:#F0BFBF}

@media (max-width:860px){
  .agtm-bc-form .bcf-inner{grid-template-columns:1fr;gap:1.9rem}
  .bcf-left>p{max-width:none}
  .bcf-proof{padding-top:.9rem}
}