/* ==========================================================================
   Account opening form
   Fillable on screen, clean on A4. Loaded only by /account-opening-form on top
   of capital_style.css, so the site theme still supplies the palette and type.
   ========================================================================== */

.doc{
  max-width:860px;margin:0 auto 60px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ---------- Letterhead ---------- */
.doc-head{
  display:flex;align-items:center;gap:18px;
  padding:30px 38px;
  border-bottom:2px solid var(--navy);
}
.doc-head img{width:52px;height:52px;object-fit:contain;flex-shrink:0}
.doc-head .who{flex:1;min-width:0}
.doc-head .word{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:.01em}
.doc-head .word span{color:var(--gold)}
.doc-head .sub{font-size:12px;color:var(--muted);margin-top:3px}
.doc-addr{font-style:normal;font-size:11px;line-height:1.5;color:var(--muted-soft);margin-top:5px}
.doc-head .kind{text-align:right;flex-shrink:0}
.doc-head .kind strong{
  display:block;font-family:var(--serif);font-size:16px;font-weight:700;
  color:var(--navy);letter-spacing:.02em;text-transform:uppercase;
}
.doc-head .kind span{display:block;font-size:11px;color:var(--muted-soft);letter-spacing:.1em;text-transform:uppercase}
.doc-head .kind .ref{
  margin-top:7px;font-family:ui-monospace,Consolas,"Courier New",monospace;
  letter-spacing:.06em;color:var(--muted);
}

.doc-intro{
  padding:22px 38px;background:var(--gold-bg);
  border-bottom:1px solid var(--gold-line);
  font-size:13.5px;line-height:1.65;color:var(--ink);
}
.doc-intro p + p{margin-top:10px}
.doc-intro strong{color:var(--navy)}

/* ---------- Sections ---------- */
/* A fieldset carries a default groove border that would cut straight through
   the legend, so it is cleared and only the divider is drawn back on. */
.fs{
  padding:26px 38px;
  border:0;border-bottom:1px solid var(--line);
  min-width:0;
}
.fs:last-of-type{border-bottom:none}
.fs > legend,
.fs-title{
  display:block;width:100%;float:none;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--gold);margin-bottom:18px;padding:0;
}
.fs-title .n{color:var(--navy);margin-right:9px}

/* ---------- Field grid ---------- */
.frow{display:grid;grid-template-columns:repeat(12,1fr);gap:16px 18px;margin-bottom:16px}
.frow:last-child{margin-bottom:0}
.f-12{grid-column:span 12}
.f-8{grid-column:span 8}
.f-6{grid-column:span 6}
.f-5{grid-column:span 5}
.f-4{grid-column:span 4}
.f-3{grid-column:span 3}

/* Direct child only: the labels wrapping each radio and checkbox live deeper
   inside .fld and must not inherit the small uppercase caption treatment. */
.fld > label,
.fld > .lab{
  display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-bottom:5px;
}
.fld input[type="text"],
.fld input[type="date"],
.fld input[type="email"],
.fld input[type="tel"],
.fld textarea{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);
  padding:9px 2px;
  background:transparent;
  border:none;border-bottom:1px solid var(--line);
  border-radius:0;
  transition:border-color var(--t),box-shadow var(--t);
}
.fld input:focus,.fld textarea:focus{
  outline:none;border-bottom-color:var(--gold);
  box-shadow:0 2px 0 0 var(--gold-soft);
}
.fld textarea{min-height:74px;resize:vertical;line-height:1.6;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.fld .hint{margin-top:5px;font-size:11px;color:var(--muted-soft)}

/* ---------- Choices ---------- */
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;min-height:44px;
  border:1px solid var(--line);border-radius:var(--pill);
  font-size:13.5px;font-weight:600;color:var(--ink);
  cursor:pointer;background:var(--paper);
  transition:border-color var(--t),background var(--t),color var(--t);
}
.choice input{accent-color:var(--gold);width:15px;height:15px;margin:0}
.choice:hover{border-color:var(--gold-soft)}
.choice:has(input:checked){border-color:var(--gold);background:var(--gold-bg);color:var(--navy)}

/* ---------- Checklist ---------- */
.tick{display:grid;gap:2px}
.tick label{
  display:flex;align-items:flex-start;gap:11px;
  padding:10px 0;min-height:44px;
  font-size:13.5px;line-height:1.55;color:var(--ink);cursor:pointer;
}
.tick input{accent-color:var(--gold);width:16px;height:16px;margin-top:2px;flex-shrink:0}

.submit-to{
  margin-top:18px;padding:14px 16px;
  background:var(--gold-bg);border:1px solid var(--gold-line);
  border-radius:var(--r-sm);
  font-size:13px;line-height:1.6;color:var(--ink);
}
.submit-to strong{color:var(--navy)}

/* ---------- Declaration and signature ---------- */
.declare{font-size:12.5px;line-height:1.7;color:var(--ink)}
.declare ol{margin:0 0 0 18px}
.declare li{margin-bottom:8px}

.sign{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:26px}
.sign .slot{border-top:1px solid var(--ink);padding-top:9px}
.sign .slot span{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--muted);
}
.sign .space{height:62px}

.official{
  background:var(--line-soft);
  border-top:1px dashed var(--muted-soft);
  padding:22px 38px;
}
.official .fs-title{color:var(--muted)}

.doc-foot{
  padding:16px 38px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:11px;color:var(--muted-soft);
}

/* ---------- Screen only toolbar ---------- */
.doc-tools{
  max-width:860px;margin:0 auto 22px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.doc-tools .note{font-size:13px;color:var(--muted);flex:1;min-width:220px}

@media (max-width:760px){
  .doc-head,.doc-intro,.fs,.official,.doc-foot{padding-left:22px;padding-right:22px}
  .doc-head{flex-wrap:wrap;gap:14px}
  .doc-head .kind{text-align:left;width:100%}
  .f-8,.f-6,.f-5,.f-4,.f-3{grid-column:span 12}
  .sign{grid-template-columns:1fr;gap:26px}

  /* Comfortable to tap, and 16px stops iOS zooming the page on focus. */
  .fld input[type="text"],
  .fld input[type="date"],
  .fld input[type="email"],
  .fld input[type="tel"]{
    min-height:44px;padding:11px 2px;font-size:16px;
  }
  .fld textarea{font-size:16px}
}

/* ==========================================================================
   Print
   ========================================================================== */
@page{size:A4;margin:14mm 13mm}

@media print{
  html,body{background:#fff !important}
  body{font-size:11pt;color:#000}

  /* Site furniture never belongs on the printed form. */
  .site-header,.site-footer,.topbar-accent,.skip-link,.doc-tools,.cta,.page-head{display:none !important}

  main,.wrap{padding:0 !important;margin:0 !important;max-width:none !important}

  .doc{
    max-width:none;margin:0;border:none;border-radius:0;box-shadow:none;
  }
  .doc-head{padding:0 0 10pt;border-bottom:1.6pt solid #16224e}
  .doc-head img{width:42px;height:42px}
  .doc-addr{font-size:7.5pt;color:#444;margin-top:3pt}
  .doc-intro{background:none;border:none;border-bottom:.6pt solid #999;padding:8pt 0;font-size:9pt}

  .fs{padding:10pt 0;border-bottom:.6pt solid #bbb;break-inside:avoid}
  .fs-title{font-size:8.5pt;margin-bottom:9pt;color:#16224e}
  .fs-title .n{color:#000}

  .frow{gap:9pt 12pt;margin-bottom:9pt}
  .fld > label,.fld > .lab{font-size:7.2pt;color:#444;margin-bottom:2pt}
  .fld input[type="text"],.fld input[type="date"],.fld input[type="email"],.fld input[type="tel"]{
    font-size:10pt;padding:4pt 0;border-bottom:.6pt solid #000;
  }
  .fld textarea{border:.6pt solid #666;min-height:52pt;font-size:9.5pt}
  .fld .hint{display:none}

  .choice{border:.6pt solid #000;padding:3pt 9pt;min-height:0;font-size:9pt;border-radius:0}
  .choice:has(input:checked){background:none;color:#000}
  .tick label{padding:3pt 0;min-height:0;font-size:9pt}

  .submit-to{background:none;border:.6pt solid #000;padding:6pt 8pt;font-size:8.6pt;margin-top:8pt}
  .declare{font-size:8.6pt}
  .sign{gap:20pt;margin-top:14pt}
  .sign .space{height:44pt}
  .sign .slot{border-top:.8pt solid #000}
  .sign .slot span{font-size:7.2pt}

  .official{background:none;border-top:.6pt dashed #666;padding:10pt 0}
  .doc-foot{padding:8pt 0 0;border-top:.6pt solid #bbb;font-size:7.5pt}

  /* Keep a section and its heading together. */
  .fs,.sign,.official{page-break-inside:avoid}
  a{text-decoration:none;color:#000}
}