/* ===================================================================
   digitalstrategycongress.com — subscribe / unsubscribe / confirm forms
   Loaded after design.css (not modified) and built on its custom
   properties: --ink --cobalt --red --pale --quiet --hair --disp --sans.
   =================================================================== */

/* ---------- page section ---------- */
.fm-s__t{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,72px);line-height:.98;letter-spacing:-.01em;
  overflow-wrap:break-word;border-bottom:4px solid var(--ink);padding-bottom:16px;max-width:18ch}
.fm-s .lede{max-width:64ch}
.fm-s__w > .fm,.fm-s__w > .fm__ok,.fm-s__w > .fm__alert,.fm-s__w > .fm__msg{max-width:880px}

/* ---------- form ---------- */
.fm{margin-top:clamp(22px,3vw,40px);border-top:2px solid var(--ink);padding-top:clamp(20px,2.6vw,30px)}
.fm--narrow{max-width:560px!important}
.fm__grid{display:grid;gap:20px 28px}
.fm__f label{display:block;margin-bottom:6px;font-family:var(--disp);font-weight:500;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase}
.fm__f input,.fm__f select{display:block;width:100%;min-height:52px;padding:11px 14px;
  border:2px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.4}
.fm__f input:hover,.fm__f select:hover{border-color:var(--cobalt)}
.fm__f input:focus-visible,.fm__f select:focus-visible{border-color:var(--cobalt);
  outline:3px solid var(--cobalt);outline-offset:2px}
.fm__f--err input,.fm__f--err select{border-color:var(--red)}
.fm__err{margin-top:6px;color:var(--red);font-size:14.5px;font-weight:600}

/* consent checkbox */
.fm__c{margin-top:28px;display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px 14px;
  align-items:start;padding:18px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.fm__c input{width:22px;height:22px;margin:3px 0 0;accent-color:var(--cobalt);cursor:pointer}
.fm__c label{font-size:15.5px;line-height:1.55;cursor:pointer}
.fm__c .fm__err{grid-column:2}
.fm__c--err input{outline:2px solid var(--red);outline-offset:2px}

.fm__btn{margin-top:26px;border:0;border-radius:0;cursor:pointer}
.fm__btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* honeypot: off-screen for people, still present for bots */
.fm__hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- messages ---------- */
.fm__alert{margin-top:clamp(20px,2.6vw,30px);padding:14px 18px;border-left:6px solid var(--red);
  background:var(--pale);font-weight:600}
.fm__ok{margin-top:clamp(22px,3vw,40px);background:var(--cobalt);color:#E4ECFB;padding:clamp(20px,2.6vw,34px)}
.fm__ok p{font-size:clamp(16.5px,1.3vw,18.5px);max-width:60ch}
.fm__ok p:first-child{font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  color:#fff;font-size:clamp(20px,2.2vw,28px);line-height:1.2}
.fm__ok p + p{margin-top:12px}
.fm__msg{margin-top:clamp(22px,3vw,40px);font-size:17px}

/* =================== >= 700px =================== */
@media (min-width:700px){
  .fm__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm__grid--one{grid-template-columns:minmax(0,1fr)}
}

@media print{
  .fm__btn,.fm__hp{display:none!important}
}

/* ---------- legal pages (privacy, terms, code of conduct) ---------- */
.lg__body{max-width:78ch;margin-top:clamp(18px,2.4vw,30px)}
.lg__body h2{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(20px,2.2vw,26px);margin:32px 0 10px;color:var(--ink)}
.lg__body h3{font-weight:700;font-size:17px;margin:20px 0 6px;color:var(--ink)}
.lg__body p,.lg__body li{font-size:16.5px;line-height:1.65;color:var(--ink)}
.lg__body p{margin-bottom:12px}
.lg__body ul{padding-left:1.25em;margin:0 0 14px}
.lg__body li{margin-bottom:6px}
.lg__body a{color:var(--cobalt);overflow-wrap:anywhere}
