/*
 * PromoRequest — public promo request form.
 *
 * Tokens transcribed from qrcodescanpages/Styles/_tokens.less (via nmicollect's
 * collect.css) so the page matches the rest of the SecureTree public estate.
 * Linked from index.html with a ?v= cache-buster — bump it whenever this file
 * changes.
 */
:root{
  color-scheme:light;
  --navy-deep:#0c2f55; --navy:#12406e; --navy-light:#1b4e83;
  --surface:#fff; --raised:#f4f4f4;
  --border:#ccc; --border-subtle:#e6e6e6; --rule:#dedede;
  --text:#2b2b2b; --text-secondary:#666; --text-muted:#707070;
  --action:#20718d; --action-hover:#1d6a84; --focus:#2584a3;
  --negative:#a02b38; --negative-bg:#fdf2f3; --negative-border:#e2b6bb;
  --positive:#2f6027; --positive-bg:#f1f7ef; --positive-border:#c4dcbb;
  --nm-green:#529342; --nm-blue:#2584a3; --nm-yellow:#f7a749; --nm-orange:#e57244; --nm-red:#cb3a49;
  --radius:3px;
  --font:open-sans,"Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;
  --font-display:exo-soft,var(--font);
  --font-cond:open-sans-condensed,var(--font);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%}
body{margin:0;min-height:100vh;font-family:var(--font);font-size:1.5rem;line-height:1.6;color:var(--text);background:var(--surface)}
img{display:block;max-width:100%}

.skip{position:absolute;left:1rem;top:-10rem;z-index:100;padding:.8rem 1.4rem;background:#fff;color:var(--text);font-size:1.4rem;font-weight:600;border:.2rem solid var(--nm-blue);border-radius:var(--radius);text-decoration:none}
.skip:focus{top:1rem;outline:none}

.accent{display:grid;grid-template-columns:repeat(5,1fr);height:.5rem}
.accent span:nth-child(1){background:var(--nm-green)}
.accent span:nth-child(2){background:var(--nm-blue)}
.accent span:nth-child(3){background:var(--nm-yellow)}
.accent span:nth-child(4){background:var(--nm-orange)}
.accent span:nth-child(5){background:var(--nm-red)}

/* ── split ── */
.split{display:flex;flex-direction:column;min-height:calc(100vh - .5rem)}
.split__form{padding:3.2rem 2rem 4rem;background:var(--surface);display:flex;flex-direction:column}
.formwrap{width:100%;max-width:46rem}
.split__panel{order:-1;padding:2.8rem 2rem 3.2rem;background-color:var(--navy-deep);
  background-image:url("/img/headBg.jpg"),linear-gradient(160deg,#0c2f55,#1b4e83);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.panelwrap{width:100%;max-width:44rem}
.panel__brand{height:2.8rem;width:auto;margin-bottom:2rem}

.fact{border-top:.1rem solid rgba(255,255,255,.16)}
.fact > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;min-height:5.2rem;padding:1rem 0;cursor:pointer}
.fact > summary::-webkit-details-marker{display:none}
.fact > summary::after{content:"+";flex:none;font-size:2rem;line-height:1;color:rgba(255,255,255,.6)}
.fact[open] > summary::after{content:"\2212"}
.fact > summary:focus-visible{outline:.2rem solid #fff;outline-offset:-.2rem}
.fact h2{margin:0;font-family:var(--font-cond);font-weight:700;font-size:1.2rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.fact p{margin:0;padding-bottom:1.4rem;font-size:1.4rem;line-height:1.55;color:rgba(255,255,255,.88)}

/* ── form column ── */
.eyebrow{margin:0 0 .8rem;font-family:var(--font-cond);font-weight:700;font-size:1.2rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}
h1{margin:0 0 .8rem;font-family:var(--font-display);font-weight:600;font-size:2.4rem;line-height:1.22;color:var(--text)}
.lede{margin:0 0 2.8rem;font-size:1.5rem;color:var(--text-secondary)}

.field{margin-bottom:2.2rem}
label{display:block;font-weight:600;font-size:1.4rem;color:var(--text);margin-bottom:.6rem}
.optional{font-weight:400;color:var(--text-muted)}
input,select,textarea{width:100%;font:inherit;font-size:1.6rem;color:var(--text);background:var(--surface);border:.1rem solid var(--border);border-radius:var(--radius)}
input,select{height:4.6rem;padding:0 1.3rem}
textarea{padding:1rem 1.3rem;min-height:11rem;resize:vertical;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:#a4b0ba}
input:focus,select:focus,textarea:focus{border-color:var(--focus);outline:.2rem solid var(--focus);outline-offset:.2rem}
.checkrow{display:flex;align-items:flex-start;gap:1rem}
.checkrow input[type=checkbox]{width:2rem;height:2rem;margin:.2rem 0 0;flex:none;accent-color:var(--action)}
.checkrow label{margin:0;font-weight:400;font-size:1.5rem}
.hint{margin:.6rem 0 0;font-size:1.3rem;line-height:1.5;color:var(--text-muted)}
.err{margin:.6rem 0 0;min-height:1.9rem;font-size:1.3rem;line-height:1.45;color:var(--negative)}
.err:not(:empty)::before{content:"\26A0";margin-right:.5rem;font-weight:700}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:var(--negative);background:var(--negative-bg)}
.field--invalid label{color:var(--negative)}
.field--captcha{margin-top:.4rem}
#turnstile{min-height:6.5rem}

.btn{display:block;width:100%;height:4.8rem;margin-top:2.4rem;font:inherit;font-size:1.6rem;font-weight:600;color:#fff;background:var(--action);border:.1rem solid var(--action);border-radius:var(--radius);cursor:pointer;transition:background-color .15s ease-in-out,border-color .15s ease-in-out}
.btn:hover{background:var(--action-hover);border-color:var(--action-hover)}
.btn:focus-visible{outline:.2rem solid var(--focus);outline-offset:.2rem}
.btn[disabled]{opacity:.55;cursor:default}
.btn--secondary{background:#fff;color:var(--action);border-color:var(--action)}
.btn--secondary:hover{background:var(--raised);color:var(--action-hover)}

.banner{margin-top:1.6rem;padding:1.1rem 1.3rem;border-radius:var(--radius);font-size:1.4rem;line-height:1.5}
.banner:empty{display:none}
.banner--fail{background:var(--negative-bg);border:.1rem solid var(--negative-border);color:var(--negative)}
.done{padding:.4rem 0}
.done__title{margin:0 0 .8rem;font-family:var(--font-display);font-weight:600;font-size:2rem;line-height:1.3;color:var(--positive)}
.done__body{margin:0;font-size:1.5rem;color:var(--text-secondary)}
.done__ref{margin:1.2rem 0 0;font-size:1.3rem;color:var(--text-muted)}
.done__ref code{font-size:1.2rem;background:var(--raised);padding:.2rem .5rem;border-radius:var(--radius)}
.done:focus,.notice:focus{outline:none}
.notice{padding:.4rem 0}
.notice__title{margin:0 0 .8rem;font-family:var(--font-display);font-weight:600;font-size:2rem;line-height:1.3;color:var(--navy)}
.notice__body{margin:0;font-size:1.5rem;color:var(--text-secondary)}

.legal{margin:2rem 0 0;padding-top:1.6rem;border-top:.1rem solid var(--border-subtle);font-size:1.3rem;line-height:1.55;color:var(--text-muted)}
.foot{margin-top:auto;padding-top:3.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;font-size:1.3rem;color:var(--text-muted)}
.foot a{color:var(--text-secondary);text-decoration:underline}
.foot a:hover{color:var(--text)}
.foot a:focus-visible{outline:.2rem solid var(--focus);outline-offset:.2rem}
.sep{color:var(--rule)}

@media (min-width:601px) and (max-width:1023px){
  .split__form,.split__panel{padding-left:4rem;padding-right:4rem}
  .formwrap,.panelwrap{margin-left:auto;margin-right:auto;max-width:52rem}
}
@media (min-width:1024px){
  .split{display:grid;grid-template-columns:minmax(2rem,1fr) minmax(0,63rem) minmax(0,42rem) minmax(2rem,1fr);align-items:stretch}
  .split__form{grid-column:2;padding:6.4rem 6rem 4.8rem 0}
  .formwrap{max-width:48rem}
  .split__panel{order:0;grid-column:3 / -1;padding:6.4rem 4rem 4.8rem 5.6rem}
  .panelwrap{max-width:38rem}
  .panel__brand{height:3.2rem;margin-bottom:3.2rem}
  h1{font-size:2.8rem}
  .fact{padding:1.8rem 0}
  .fact:last-of-type{padding-bottom:0}
  .fact > summary{display:block;min-height:0;padding:0;cursor:default}
  .fact > summary::after{display:none}
  .fact h2{margin:0 0 .5rem}
  .fact p{padding-bottom:0}
}
@media (min-width:1440px){
  .split{grid-template-columns:minmax(2rem,1.4fr) minmax(0,70rem) minmax(0,44rem) minmax(2rem,1fr)}
  .split__form{padding-top:8rem}
  .split__panel{padding-top:8rem;padding-left:6.4rem}
  h1{font-size:3rem}
}
@media (max-width:600px){
  .split__form{padding:2.8rem 1.6rem 3.2rem}
  .split__panel{padding:2.4rem 1.6rem 2.8rem}
  .panel__brand{height:2.4rem;margin-bottom:1.6rem}
  h1{font-size:2.1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
