/* =====================================================================
   Premier Business Academy. Free-resource opt-in styles.
   Loaded only on resource pages and the Resources index. Uses the shared
   design tokens from site.css (single purple accent, hairlines, Inter).
   ===================================================================== */

/* resource cover mockup (booklet) + event photo, sits atop the value column */
.res-cover{margin:0 0 30px;display:flex;justify-content:flex-start}
.booklet{position:relative;width:min(250px,64%);transform:perspective(1300px) rotateY(-9deg);
  transform-origin:left center;transition:transform .35s ease}
.booklet:hover{transform:perspective(1300px) rotateY(-3deg)}
.booklet img{display:block;width:100%;border-radius:3px 9px 9px 3px;border:1px solid var(--line);
  box-shadow:0 26px 54px -20px rgba(10,10,15,.42), 0 6px 14px -6px rgba(10,10,15,.16)}
.booklet::before{content:"";position:absolute;inset:0 auto 0 0;width:14px;border-radius:3px 0 0 3px;z-index:2;
  pointer-events:none;background:linear-gradient(90deg,rgba(10,10,15,.28),rgba(10,10,15,.06) 55%,transparent)}
.booklet::after{content:"";position:absolute;top:5px;bottom:5px;right:-5px;width:6px;border-radius:0 3px 3px 0;
  background:#efeff3;box-shadow:2px 0 0 #e4e4ea, 4px 0 0 #f2f2f6;z-index:-1}

.event-photo{position:relative;width:min(340px,92%);border-radius:16px;overflow:hidden;
  border:1px solid var(--line-2);box-shadow:0 24px 52px -22px rgba(10,10,15,.34)}
.event-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.event-photo .live-badge{position:absolute;top:12px;left:12px;display:flex;gap:7px;align-items:center;
  background:rgba(10,10,15,.72);color:#fff;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px}
.event-photo .live-dot{width:7px;height:7px;border-radius:999px;background:#ff4d4d;animation:livepulse 1.7s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.55)}70%{box-shadow:0 0 0 7px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
@media(max-width:860px){.res-cover{justify-content:center}.booklet{transform:none}.booklet:hover{transform:none}}

/* two-column resource layout: value on the left, sign-up card on the right */
.optin-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:start}
.optin-value h2{font-size:clamp(26px,3.4vw,38px)}
.optin-value .lede{color:var(--muted);font-size:17px;margin-top:16px;max-width:520px}
.optin-list{list-style:none;margin:26px 0 0;display:flex;flex-direction:column;gap:14px}
.optin-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--text)}
.optin-list li .tick{flex:0 0 22px;width:22px;height:22px;border-radius:999px;background:var(--grad-soft);
  border:1px solid var(--line-2);display:grid;place-items:center;color:var(--accent-2);font-size:12px;font-weight:900;margin-top:1px}
.optin-list li b{font-weight:700}
.optin-list li span.d{color:var(--muted)}

/* the sign-up card */
.optin-card{position:sticky;top:92px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:30px 30px 26px;box-shadow:0 24px 60px -34px rgba(10,10,15,.20)}
.optin-card .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-2);background:var(--grad-soft);border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;margin-bottom:14px}
.optin-card h3{font-size:22px;font-weight:800;line-height:1.15}
.optin-card .sub{color:var(--muted);font-size:14.5px;margin-top:8px}

.optin-form{margin-top:22px;display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.field input{width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--card-2);
  border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;transition:border-color .15s,box-shadow .15s,background .15s}
.field input::placeholder{color:var(--muted-2)}
.field input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--grad-soft)}
.field.err input{border-color:#d64545;background:#fdf3f3}
.field.err input:focus{box-shadow:0 0 0 4px rgba(214,69,69,.10)}
.field .err-msg{display:none;font-size:12px;color:#c23a3a;font-weight:500}
.field.err .err-msg{display:block}

.optin-form .btn-primary{width:100%;justify-content:center;padding:16px 26px;font-size:16px;margin-top:4px}
.optin-form .btn-primary[disabled]{opacity:.62;cursor:default;transform:none;box-shadow:none}
.optin-form .btn-primary .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  border-radius:999px;animation:optspin .7s linear infinite;display:none}
.optin-form.loading .btn-primary .spin{display:inline-block}
.optin-form.loading .btn-primary .lbl{display:none}
@keyframes optspin{to{transform:rotate(360deg)}}

.optin-trust{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted-2);
  font-size:12.5px;margin-top:14px;text-align:center;line-height:1.4}
.optin-trust svg{flex:0 0 13px;opacity:.7}

/* success state (revealed after submit) */
.optin-success{display:none;text-align:center;padding:6px 4px}
.optin-card.done .optin-form,.optin-card.done .tag,.optin-card.done>h3,.optin-card.done>.sub{display:none}
.optin-card.done .optin-success{display:block}
.optin-success .check{width:56px;height:56px;border-radius:999px;background:var(--grad-soft);border:1px solid var(--line-2);
  display:grid;place-items:center;margin:2px auto 16px;font-size:26px;color:var(--accent-2)}
.optin-success h3{font-size:22px;font-weight:800}
.optin-success p{color:var(--muted);font-size:15px;margin-top:10px}
.optin-success .btn-primary{width:100%;justify-content:center;margin-top:20px;padding:15px 24px}
.optin-success .also{margin-top:16px;font-size:13.5px;color:var(--muted-2)}
.optin-success .also a{color:var(--accent-2);font-weight:600}

@media(max-width:860px){
  .optin-split{grid-template-columns:1fr;gap:34px}
  .optin-card{position:static}
}