/* ============================================================
   Cardexa Pro — document pages
   apply · complaints · privacy · terms · cookie-policy
   compliance · acceptable-use · cardholder-terms
   Loads after base.css. No heavy motion: these pages are read.
   ============================================================ */

body.doc{background:#000}

.doc-head{
  position:relative;overflow:hidden;
  padding-block:clamp(120px,14vw,158px) clamp(38px,5vw,54px);
  border-bottom:1px solid var(--hairline);
}
.doc-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 340px at 18% 0%,rgba(57,123,255,.10),transparent 68%);
}
.doc-head>*{position:relative}
.doc-head h1{
  font:700 clamp(32px,4.6vw,50px)/1.08 var(--font-display);
  letter-spacing:-.026em;text-wrap:balance;max-width:20ch;
}
.doc-intro{font-size:17px;line-height:1.7;color:var(--text-2);max-width:62ch;margin-top:20px}
.doc-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--hairline);border-radius:999px;padding:7px 13px;color:var(--text-3);
}
.badge.warn{color:var(--warn-text);border-color:var(--warn-line);background:var(--warn-fill)}
.badge i{width:6px;height:6px;border-radius:99px;background:currentColor;flex:none}

.doc-body{padding-block:clamp(46px,6vw,72px) clamp(70px,9vw,110px)}
.doc-grid{display:grid;gap:clamp(40px,5vw,72px)}
@media(min-width:1000px){.doc-grid{grid-template-columns:230px 1fr;align-items:start}}

.toc{display:none}
@media(min-width:1000px){
  .toc{display:block;position:sticky;top:96px}
  .toc h2{font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
  .toc ol{list-style:none;counter-reset:t;display:flex;flex-direction:column;gap:11px}
  .toc a{
    display:flex;gap:10px;font-size:13px;line-height:1.45;color:var(--text-2);
    transition:color .18s ease;
  }
  .toc a::before{counter-increment:t;content:counter(t);color:var(--text-3);font-variant-numeric:tabular-nums}
  .toc a:hover{color:#fff}
}

.prose{max-width:72ch}
.prose>section{padding-top:clamp(34px,4vw,46px);margin-top:clamp(34px,4vw,46px);border-top:1px solid var(--hairline)}
.prose>section:first-child{padding-top:0;margin-top:0;border-top:0}
.prose h2{
  font:700 clamp(21px,2.4vw,27px)/1.22 var(--font-display);
  letter-spacing:-.018em;margin-bottom:16px;scroll-margin-top:96px;
}
.prose h3{margin:26px 0 9px}
.prose p{font-size:16px;line-height:1.78;color:var(--text-2);margin-bottom:15px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:#fff;font-weight:500}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:#fff}
.prose ul,.prose ol{margin:0 0 16px 0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.prose li{font-size:16px;line-height:1.72;color:var(--text-2)}
.prose li::marker{color:var(--text-3)}
.prose ul.plain{list-style:none;padding-left:0}
.prose ul.plain li{display:flex;gap:12px}
.prose ul.plain li::before{content:"";flex:none;width:5px;height:5px;border-radius:99px;background:var(--text-3);margin-top:9px}

.callout{
  border:1px solid var(--hairline);border-radius:12px;background:var(--panel);
  padding:20px 22px;margin:22px 0;
}
.callout p{font-size:15px;margin-bottom:10px;color:var(--text-2)}
.callout p:last-child{margin-bottom:0}
.callout b{color:#fff;font-weight:500}
.callout.warn{border-color:var(--warn-line);background:var(--warn-fill)}

.doc-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.doc-table th,.doc-table td{
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--hairline);
  vertical-align:top;color:var(--text-2);line-height:1.6;
}
.doc-table th{color:#fff;font-weight:500;font-size:13px;letter-spacing:.02em}
.doc-table tr:last-child td{border-bottom:0}

.doc-foot-nav{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(44px,5vw,64px);padding-top:30px;border-top:1px solid var(--hairline);
}

/* ---------- apply / complaints form host ---------- */
.form-host{
  border:1px solid var(--hairline);border-radius:16px;background:var(--panel);
  padding:clamp(26px,4vw,40px);margin-top:8px;
}
.form-host iframe{border:0;width:100%;display:block;min-height:640px;border-radius:12px}
/* When Tally is embedded it brings its own dark surface — drop the host chrome
   so the page does not show a panel inside a panel. */
.form-host.is-embed{padding:0;background:transparent;border-color:transparent;overflow:hidden}

.apply-grid{display:grid;gap:clamp(34px,4vw,56px)}
@media(min-width:1000px){.apply-grid{grid-template-columns:1fr 1.15fr;align-items:start}}
.apply-what{display:flex;flex-direction:column;gap:26px}
.apply-block h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.apply-block ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.apply-block li{display:flex;gap:11px;font-size:15px;line-height:1.55;color:var(--text-2)}
.apply-block a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.apply-block a:hover{color:#fff}
.apply-block li::before{content:"";flex:none;width:5px;height:5px;border-radius:99px;background:var(--text-3);margin-top:8px}

/* ---------- application form ---------- */
.form-host form{display:flex;flex-direction:column;gap:clamp(28px,4vw,40px)}
.fs{border:0;padding:0;margin:0}
.fs legend{
  display:block;width:100%;padding:0 0 14px;margin-bottom:20px;
  border-bottom:1px solid var(--hairline);
  font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);
}
.form-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:620px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .span2{grid-column:1/-1}}
.checks{display:grid;gap:2px;grid-template-columns:1fr}
@media(min-width:620px){.checks{grid-template-columns:1fr 1fr}}
.checks label{
  display:flex;align-items:center;gap:11px;min-height:44px;
  font-size:15px;line-height:1.5;color:var(--text-2);cursor:pointer;
}
.checks input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:19px;height:19px;border-radius:4px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.045);
  transition:background .18s ease,border-color .18s ease;
}
.checks input[type=checkbox]:checked{
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 6 3 3 5-6'/%3E%3C/svg%3E") center no-repeat;
  border-color:var(--accent);
}
.checks input[type=checkbox]:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:3px}
.checks-req{grid-template-columns:1fr}
.checks-req label{align-items:flex-start;padding-block:6px}
.checks-req input[type=checkbox]{margin-top:12px}
.form-alert{
  display:none;padding:14px 16px;border-radius:12px;
  border:1px solid var(--neg-line);background:var(--neg-fill);
  font-size:15px;line-height:1.6;color:var(--neg-text);
}
.form-alert.is-on{display:block}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-status{font-size:13px;color:var(--text-3)}
.form-status.is-error{color:var(--neg-text)}
.form-success{
  border:1px solid var(--hairline);border-radius:16px;background:var(--panel);
  padding:52px 34px;text-align:center;
}
.form-success svg{margin:0 auto 20px;color:var(--pos-text)}
.form-success h3{font:600 21px/1.3 var(--font-display);margin-bottom:8px}
.form-success p{color:var(--text-2);font-size:15px}
#confirmErr{margin-top:10px}