:root{--bg:#0b0b0c;--card:#111114;--text:#f2f2f2;--muted:#b7b7b7;--line:rgba(255,255,255,.12);--gold:rgba(215,181,109,.9)}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text)}
.wrap{max-width:920px;margin:0 auto;padding:40px 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
h1{margin:0 0 8px 0;font-size:26px}
p{margin:8px 0;color:var(--muted);line-height:1.45}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
input,select{width:100%;padding:12px 12px;border-radius:10px;border:1px solid var(--line);background:#0e0e10;color:var(--text);outline:none}
.row{display:flex;gap:12px;align-items:center}
.chk{display:flex;gap:10px;align-items:flex-start;margin-top:14px}
.chk input{width:auto;margin-top:2px}

/* PRIMARY CTA */
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid rgba(215,181,109,.55);
  background:transparent;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,color .15s ease;
}
.btn:hover{background:rgba(215,181,109,.16)}
.btn:visited{color:var(--text)}

/* FORCE LINKS WHITE (fix purple visited link) */
a,a:visited,a:active{color:var(--text);text-decoration:none}
a:hover{color:var(--text)}

.small{font-size:12px;color:var(--muted)}
.hr{height:1px;background:var(--line);margin:18px 0}
.badge{display:inline-block;border:1px solid rgba(215,181,109,.55);padding:6px 10px;border-radius:999px;color:var(--text);font-size:12px;background:rgba(215,181,109,.10)}

/* Go Secure Dossier — secondary CTA (less dominant, same premium style) */
.btn.secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:none;
}
.btn.secondary:hover{
  border-color:rgba(255,255,255,.45);
  transform:translateY(-1px);
}

/* === GOSECURE_LAYOUT_FIX_v1 ===
   Goal: checks higher, CTA centered, Stripe note under CTA
*/
.checks{
  display:block;
  margin-top:14px;
}

.chk{
  margin:12px 0;
}

.btn{
  display:block;
  width:min(520px, 100%);
  margin:18px auto 10px auto; /* center */
}

form > p.small{
  display:block;
  text-align:center;
  margin:0 auto;
  max-width: 720px;
}
/* === /GOSECURE_LAYOUT_FIX_v1 === */

/* === GOSECURE_PRO_LAYOUT_v1 === */
/* Goal (PRO only):
   - form fields 1 column (no empty black slab / awkward two-column gaps)
   - checks stacked & higher
   - CTA centered, Stripe note under CTA
*/
body.plan-pro .grid {
  grid-template-columns: 1fr !important;
}

body.plan-pro .checks {
  display:block;
  margin-top: 10px;
}

body.plan-pro .chk {
  margin: 12px 0;
}

body.plan-pro .btn {
  display:block;
  width: min(520px, 100%);
  margin: 18px auto 10px auto;
}

body.plan-pro form > p.small {
  display:block;
  text-align:center;
  margin: 0 auto;
  max-width: 720px;
}
/* === /GOSECURE_PRO_LAYOUT_v1 === */

/* === GOSECURE_PRO_LAYOUT_v2 === */
/* PRO only — hard override:
   - kill any form/grid placement weirdness
   - checks higher + stacked
   - CTA = one big centered bar
   - Stripe note centered UNDER CTA
*/
body.plan-pro form {
  display: block !important;
}

body.plan-pro .grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

body.plan-pro .checks {
  display: block !important;
  margin-top: 8px !important;
}

body.plan-pro .chk {
  display: block !important;
  margin: 10px 0 !important;
}

body.plan-pro .btn {
  display: block !important;
  width: 100% !important;
  margin: 14px auto 8px auto !important;
}

body.plan-pro form > p.small {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
}
/* === /GOSECURE_PRO_LAYOUT_v2 === */


/* --- HIGH-END TYPO REFINEMENT --- */

body.plan-pro h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

body.plan-pro .badge {
  font-size: 11px;
  opacity: .75;
  margin-bottom: 10px;
}

body.plan-pro label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display:block;
}

body.plan-pro input,
body.plan-pro select {
  background: #151518;
  border: 1px solid rgba(255,255,255,.14);
}

body.plan-pro input:focus,
body.plan-pro select:focus {
  border-color: rgba(215,181,109,.7);
  box-shadow: 0 0 0 1px rgba(215,181,109,.4);
}

body.plan-pro .small {
  font-size: 12px;
  line-height: 1.5;
}


/* --- PRO TYPO TUNING v2 --- */

body.plan-pro h1 {
  font-size: 26px;        /* was visueel te groot */
  font-weight: 600;
  letter-spacing: -0.2px;
}

body.plan-pro .btn {
  font-size: 16px;        /* groter */
  font-weight: 700;       /* krachtiger */
  letter-spacing: 0.3px;
  padding: 16px 18px;     /* iets meer presence */
}


/* --- PRO PREMIUM EMPHASIS v3 --- */

body.plan-pro .badge {
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 8px 14px;
}

body.plan-pro .btn {
  background: rgba(215,181,109,.12);
  border: 1px solid rgba(215,181,109,.6);
  box-shadow: 0 0 0 1px rgba(215,181,109,.35),
              0 6px 18px rgba(215,181,109,.15);
}

body.plan-pro .btn:hover {
  background: rgba(215,181,109,.22);
  box-shadow: 0 0 0 1px rgba(215,181,109,.55),
              0 8px 22px rgba(215,181,109,.25);
}


/* --- PRO BADGE GLOW ALIGN WITH CTA --- */

body.plan-pro .badge {
  background: rgba(215,181,109,.16);
  border: 1px solid rgba(215,181,109,.65);
  box-shadow: 0 0 0 1px rgba(215,181,109,.35),
              0 4px 14px rgba(215,181,109,.18);
  color: #f5e6c3;
}


/* --- PRO TITLE GOLD ALIGNMENT --- */

body.plan-pro h1 {
  color: rgba(215,181,109,.95);
  margin-left: 6px;          /* subtiele verschuiving */
  letter-spacing: -0.2px;
}


/* --- PRO TITLE REFINED GOLD v4 --- */

body.plan-pro h1 {
  color: #d4b064;                 /* iets dieper, minder fel geel */
  margin-left: 0;                 /* perfecte alignment */
  text-shadow: 0 0 8px rgba(212,176,100,.18);
}


/* --- PRO ALIGNMENT FIX v5 (card-based, deterministic) --- */
body.plan-pro .card{
  padding-left: 26px;
  padding-right: 26px;
}


/* --- PRO TITLE VISUAL BALANCE v6 --- */

body.plan-pro h1 {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}


/* --- PRO CENTERED CTA v7 --- */

body.plan-pro .btn {
  display: inline-block !important;
  width: auto !important;
  min-width: 320px;
  margin: 24px auto 10px auto !important;
}

body.plan-pro form {
  text-align: center;
}

body.plan-pro .grid,
body.plan-pro .checks {
  text-align: left;
}


/* --- PRO BADGE CENTER ALIGN v8 --- */

body.plan-pro .badge {
  display: block;
  margin: 0 auto 14px auto;
  text-align: center;
}


/* --- PRO INPUT FILLED/AUTOFILL DARK FIX v9 --- */

/* Chrome/Edge autofill */
body.plan-pro input:-webkit-autofill,
body.plan-pro input:-webkit-autofill:hover,
body.plan-pro input:-webkit-autofill:focus,
body.plan-pro textarea:-webkit-autofill,
body.plan-pro select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0px 1000px #151518 inset !important;
  box-shadow: 0 0 0px 1000px #151518 inset !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* When user types: keep same background */
body.plan-pro input,
body.plan-pro select,
body.plan-pro textarea {
  background-color: #151518 !important;
}


/* --- PRO GOLD INPUT GLOW v10 --- */

/* Focus state */
body.plan-pro input:focus,
body.plan-pro select:focus {
  background: linear-gradient(
    180deg,
    rgba(215,181,109,.18) 0%,
    rgba(215,181,109,.08) 100%
  ) !important;
  border-color: rgba(215,181,109,.75) !important;
  box-shadow: 0 0 0 1px rgba(215,181,109,.45),
              0 0 18px rgba(215,181,109,.18);
}

/* When field has content */
body.plan-pro input:not(:placeholder-shown) {
  background: linear-gradient(
    180deg,
    rgba(215,181,109,.12) 0%,
    rgba(215,181,109,.05) 100%
  ) !important;
}


/* --- PRO FILLED STATE PREMIUM v11 --- */

/* Base: force no white borders/background ever */
body.plan-pro input,
body.plan-pro select,
body.plan-pro textarea{
  background-color:#151518 !important;
  color:var(--text) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  outline:none !important;
}

/* Filled state for REQUIRED fields (company_name + email) */
body.plan-pro input[required]:valid{
  background: linear-gradient(180deg, rgba(215,181,109,.10) 0%, rgba(21,21,24,1) 75%) !important;
  border-color: rgba(215,181,109,.55) !important;
  box-shadow: 0 0 0 1px rgba(215,181,109,.22);
}

/* Filled state for VAT (optional) only when user typed something */
body.plan-pro input[name="vat_number"]:not(:placeholder-shown){
  background: linear-gradient(180deg, rgba(215,181,109,.10) 0%, rgba(21,21,24,1) 75%) !important;
  border-color: rgba(215,181,109,.50) !important;
  box-shadow: 0 0 0 1px rgba(215,181,109,.18);
}

/* Autofill must never go light */
body.plan-pro input:-webkit-autofill,
body.plan-pro input:-webkit-autofill:hover,
body.plan-pro input:-webkit-autofill:focus,
body.plan-pro input:-webkit-autofill:active{
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0px 1000px #151518 inset !important;
  box-shadow: 0 0 0px 1000px #151518 inset !important;
  border: 1px solid rgba(215,181,109,.45) !important;
}


/* --- PRO UNIFORM FILLED STYLE v12 --- */

/* Base always dark */
body.plan-pro input,
body.plan-pro select {
  background:#151518 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:var(--text) !important;
}

/* Any input that has content → gold accent (like VAT) */
body.plan-pro input:not(:placeholder-shown){
  background: linear-gradient(
    180deg,
    rgba(215,181,109,.10) 0%,
    #151518 75%
  ) !important;
  border-color: rgba(215,181,109,.55) !important;
  box-shadow: 0 0 0 1px rgba(215,181,109,.22);
}

/* Autofill stays dark */
body.plan-pro input:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px #151518 inset !important;
  border:1px solid rgba(215,181,109,.45) !important;
}


/* --- PRO UNIFORM FOCUS GLOW v13 --- */
body.plan-pro input:focus,
body.plan-pro select:focus,
body.plan-pro textarea:focus{
  background: linear-gradient(180deg, rgba(215,181,109,.18) 0%, rgba(215,181,109,.08) 100%) !important;
  border-color: rgba(215,181,109,.75) !important;
  box-shadow: 0 0 0 1px rgba(215,181,109,.45), 0 0 18px rgba(215,181,109,.18) !important;
}


/* --- PRO SELECT DROPDOWN THEME v14 --- */

/* Closed select */
body.plan-pro select{
  background:#151518 !important;
  color:var(--text) !important;
  border:1px solid rgba(215,181,109,.45) !important;
}

/* Options (works in many browsers; not all) */
body.plan-pro select option{
  background:#151518 !important;
  color:var(--text) !important;
}

/* Selected/hovered option tint where supported */
body.plan-pro select option:checked{
  background:#1d1d22 !important;
  color:#f5e6c3 !important;
}


/* --- PRO UNIFORM BORDER FIX v15 --- */

/* Idle border for ALL inputs/selects */
body.plan-pro input,
body.plan-pro select,
body.plan-pro textarea{
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

/* Ensure VAT doesn't override */
body.plan-pro input[name="vat_number"]{
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}


/* --- PRO DEFAULT GOLD BORDER v16 --- */

body.plan-pro input,
body.plan-pro select,
body.plan-pro textarea{
  border: 1px solid rgba(215,181,109,.55) !important;
  box-shadow: 0 0 0 1px rgba(215,181,109,.18);
  background:#151518 !important;
  color:var(--text) !important;
}


/* --- FORCE VAT BORDER ALIGNMENT v17 --- */

/* Extreme specificity override */
body.plan-pro form input[name="vat_number"],
body.plan-pro form input#vat_number,
body.plan-pro input[name="vat"],
body.plan-pro input[id*="vat"]{
  border: 1px solid rgba(215,181,109,.55) !important;
  box-shadow: 0 0 0 1px rgba(215,181,109,.18) !important;
  background:#151518 !important;
  color:var(--text) !important;
}


/* GOSECURE_STD_H1_WHITE_v1 */
body.plan-standard h1 { color: #ffffff; }

/* FORCE STANDARD WHITE TITLE */
body.plan-standard .card h1 {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* CENTER SUBMIT BUTTON */
body.plan-pro .btn,
body.plan-standard .btn {
  display: block;
  margin: 30px auto 0 auto;
  text-align: center;
}


/* FORCE CENTER CHECKOUT BUTTON */
form .btn {
  display: block !important;
  margin: 40px auto 0 auto !important;
}


/* GOSECURE_STD_BTN_CENTER_v1 */
body.plan-standard form { text-align: center; }
body.plan-standard form .btn { display: inline-flex; margin: 0 auto; }

/* GOSECURE_BTN_CENTER_FINAL_v1 */
body.plan-pro .btn,
body.plan-standard .btn {
  display: inline-flex !important;
  width: auto !important;
  min-width: 320px;
  margin: 18px auto 0 auto !important;
  justify-content: center !important;
}

/* GOSECURE_CTA_CANONICAL_CENTER_v1
   Goal: ONLY the submit CTA + note are centered, regardless of plan-pro/plan-standard.
*/
body.plan-pro form,
body.plan-standard form {
  text-align: initial; /* reset */
}

body.plan-pro form > .hr + .btn,
body.plan-standard form > .hr + .btn {
  display: inline-flex !important;
  width: auto !important;
  min-width: 320px;
  margin: 22px auto 10px auto !important;
}

body.plan-pro form > .hr,
body.plan-standard form > .hr {
  margin-left: auto;
  margin-right: auto;
}

body.plan-pro form > .hr + .btn,
body.plan-standard form > .hr + .btn,
body.plan-pro form > .hr + .btn + p.small,
body.plan-standard form > .hr + .btn + p.small {
  text-align: center !important;
}

/* center the CTA block by making the form a block container with centered contents for the CTA row only */
body.plan-pro form > .hr,
body.plan-standard form > .hr,
body.plan-pro form > .hr + .btn,
body.plan-standard form > .hr + .btn,
body.plan-pro form > .hr + .btn + p.small,
body.plan-standard form > .hr + .btn + p.small {
  display: block;
  width: 100%;
}

/* GOSECURE_CTA_WINS_v1 - DO NOT EDIT ABOVE THIS LINE
   Force the submit CTA to be centered regardless of earlier rules.
*/
body.plan-pro form,
body.plan-standard form {
  text-align: center !important;
}

body.plan-pro form button.btn,
body.plan-standard form button.btn {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  min-width: 320px !important;
  margin: 22px auto 10px auto !important;
  justify-content: center !important;
}

body.plan-pro form button.btn + p.small,
body.plan-standard form button.btn + p.small {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}