/* =====================================================================
   MCM KYC Information Form — v3
   Simple, single-column, Google-Forms-style flow. No sidebar, no top nav.
   HTML + CSS + JS only, no build step.
   ===================================================================== */

:root{
  --accent:#2f56d9;
  --accent-dark:#1d3fc4;
  --accent-soft:#eaefff;

  --ink:#1c2130;
  --ink-soft:#3d4459;
  --muted:#666f83;
  --faint:#9399a9;
  --line:#e2e5ea;
  --surface:#ffffff;
  --bg:#f5f6f8;

  --danger:#c62a3a;
  --danger-bg:#fdedef;
  --success:#1a8f5e;
  --success-bg:#e9f8f1;

  --radius:8px;
  --maxw:700px;
  --focus-ring:0 0 0 3px rgba(47,95,224,.2);
  --font:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.55; font-size:15px;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:inherit; margin:0; }
button{ font-family:inherit; }
a{ color:var(--accent); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-48px; background:var(--ink); color:#fff; padding:10px 16px;
  border-radius:var(--radius); z-index:100; font-size:13px; font-weight:600; transition:top .15s ease;
}
.skip-link:focus{ top:12px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.req{ color:var(--danger); margin-left:2px; }

/* =========================================================
   Persistent minimal header — logo + name only, no nav
   ========================================================= */
.site-header{ padding:22px 20px 0; }
.site-header .inner{
  max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:10px;
}
.site-header img{ height:26px; width:auto; }
.site-header .wordmark{ font-size:15px; font-weight:800; color:var(--ink); letter-spacing:.2px; }

/* =========================================================
   Page shell
   ========================================================= */
.page{ max-width:var(--maxw); margin:0 auto; padding:20px 20px 64px; }

/* ---- chevron/arrow step progress bar ---- */
.step-track{ margin:18px 0 26px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; }

.step-track-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 0; }
.step-track-list{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:nowrap;
}

/* Each step is an arrow/chevron cell: a point on the right, a matching notch
   on the left (so consecutive cells interlock into one continuous bar), and
   a flat edge on the very first/last cell where there's nothing to interlock
   with. A negative margin pulls each cell into the previous one's point. */
.step-seg{
  --tip:12px;
  flex:1 1 0; min-width:86px; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; text-align:center;
  padding:12px 6px 10px calc(var(--tip) + 6px); margin-left:calc(var(--tip) * -1);
  background:var(--bg); color:var(--faint);
  clip-path:polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
}
.step-seg:first-child{
  clip-path:polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
  margin-left:0; padding-left:12px;
}
.step-seg:last-child{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--tip) 50%);
}

.step-seg .seg-ind{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; background:#fff;
  border:1.5px solid var(--line); color:var(--faint); font-size:11.5px; font-weight:750; margin-bottom:5px;
}
.step-seg .seg-ind svg{ width:13px; height:13px; }
.step-seg .seg-label{
  display:block; font-size:10.5px; font-weight:650; color:inherit; line-height:1.25; max-width:86px;
}

.step-seg.is-done{ background:var(--accent-soft); color:var(--ink-soft); }
.step-seg.is-done .seg-ind{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* Solid blue fill for the current step — white text/badge throughout for
   guaranteed contrast (this replaced an earlier white-cell + dark-text
   treatment that read as low-contrast / "black" against the blue bar). */
.step-seg.is-current{
  background:var(--accent); color:#fff; z-index:2;
  filter:drop-shadow(0 3px 8px rgba(37,73,207,.35));
}
.step-seg.is-current .seg-label{ color:#fff; font-weight:800; }
.step-seg.is-current .seg-ind{ background:#fff; border-color:#fff; color:var(--accent); }

/* =========================================================
   Screens
   ========================================================= */
.screen{ display:none; }
.screen.active{ display:block; animation:fade .18s ease; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

/* ---- intro ---- */
.intro{ text-align:center; padding:26px 8px 8px; }
.intro img{ height:44px; margin:0 auto 14px; }
.intro h1{ font-size:22px; font-weight:800; }
.intro .sub{ font-size:14px; color:var(--muted); margin-top:4px; font-weight:600; letter-spacing:.02em; }
.intro p{ max-width:52ch; margin:18px auto 0; color:var(--muted); font-size:14.5px; }
.intro .btn{ margin-top:26px; }
.intro .intro-list{ list-style:none; padding:0; margin:26px auto 0; max-width:420px; text-align:left; display:grid; gap:9px; }
.intro .intro-list li{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.intro .intro-list svg{ width:15px; height:15px; color:var(--accent); flex:0 0 auto; margin-top:2px; }

/* ---- step heading ---- */
.step-heading{ margin-bottom:18px; }
.step-heading h1{ font-size:21px; font-weight:800; }
.step-heading p{ margin-top:5px; font-size:13.5px; color:var(--muted); }

/* ---- section card ---- */
.section{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin-bottom:18px;
}
.section h2{ font-size:15px; font-weight:750; margin-bottom:2px; }
.section .section-sub{ font-size:12.5px; color:var(--muted); margin-bottom:16px; }
.section h2 + .section-sub{ margin-top:2px; }
.section h2:only-child{ margin-bottom:0; }

/* ---- fields: single column, stacked, like a plain form ---- */
.field{ margin-bottom:18px; }
.field:last-child{ margin-bottom:0; }
.field > label,.field > legend{
  display:block; font-size:13.5px; font-weight:650; color:var(--ink-soft); margin-bottom:7px; padding:0;
}
.control{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:6px; font-size:14.5px;
  color:var(--ink); background:#fff; font-family:inherit; transition:.15s;
}
textarea.control{ resize:vertical; min-height:70px; }
.control::placeholder{ color:var(--faint); }
.control:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
select.control{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23666f83' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:15px; padding-right:34px;
}
.field.has-error .control{ border-color:var(--danger); }
.field-help{ margin:6px 0 0; font-size:12px; color:var(--muted); }
.field-error{ margin:6px 0 0; font-size:12.5px; color:var(--danger); font-weight:650; display:flex; gap:5px; align-items:center; }
.field-error::before{
  content:''; width:12px; height:12px; flex:0 0 auto; background:var(--danger);
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16h.01' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16h.01' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

fieldset.field{ border:0; padding:0; margin:0 0 18px; }
fieldset.field:last-child{ margin-bottom:0; }
fieldset.field > legend{ padding:0; width:100%; float:none; }

/* certification rows: checkbox + full sentence, not a labeled input field */
.field.cert-item{ margin-bottom:14px; }
.field.cert-item:last-child{ margin-bottom:0; }
.field.cert-item > label{
  display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:500;
  color:var(--ink-soft); cursor:pointer; margin-bottom:0;
}
.field.cert-item input{ margin-top:3px; accent-color:var(--accent); width:16px; height:16px; flex:0 0 auto; }

/* ---- native-styled radios & checkboxes: simple, familiar, no custom boxes ---- */
.option-row{ display:flex; gap:22px; flex-wrap:wrap; }
.option-row label{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-soft); font-weight:500; cursor:pointer; }
.option-row input[type=radio],.option-row input[type=checkbox]{ accent-color:var(--accent); width:16px; height:16px; }

.check-list{ display:flex; flex-direction:column; gap:11px; }
.check-list label{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-soft); font-weight:500; cursor:pointer; }
.check-list input[type=checkbox]{ accent-color:var(--accent); width:16px; height:16px; flex:0 0 auto; }
.check-list.columns{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }

.inline-toggle{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; margin-bottom:16px; }
.inline-toggle input{ width:16px; height:16px; accent-color:var(--accent); }
.field.is-muted{ opacity:.45; }

[data-conditional]{ transition:opacity .15s ease; }

/* ---- file field ---- */
.file-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.file-btn{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff;
  color:var(--ink-soft); font-weight:650; font-size:13.5px; padding:9px 16px; border-radius:6px; cursor:pointer;
}
.file-btn:hover{ background:var(--accent-soft); border-color:#cdd8fb; }
.file-btn input[type=file]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}
.file-chip{ display:none; align-items:center; gap:8px; font-size:13.5px; color:var(--success); font-weight:650; }
.file-chip.show{ display:inline-flex; }
.file-chip svg{ width:15px; height:15px; flex:0 0 auto; }
.file-chip .remove{ color:var(--muted); font-weight:600; font-size:12.5px; text-decoration:underline; cursor:pointer; background:none; border:0; padding:0; font-family:inherit; }
.file-chip .remove:hover{ color:var(--danger); }

.download-note{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--accent-soft);
  border:1px solid #cdd8fb; border-radius:6px; padding:12px 15px; font-size:12.5px; color:var(--accent-dark); margin-bottom:18px;
}
.download-note button,.download-note a{
  background:var(--accent); color:#fff; border:0; padding:8px 14px; border-radius:6px; font-weight:700; font-size:12.5px; cursor:pointer; white-space:nowrap;
  text-decoration:none; display:inline-block;
}
.download-note button:hover,.download-note a:hover{ background:var(--accent-dark); }

/* ---- signature ---- */
.sig-pad{ border:1px solid var(--line); border-radius:6px; background:#fff; width:100%; height:150px; touch-action:none; cursor:crosshair; display:block; }
.sig-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; gap:12px; flex-wrap:wrap; }
.text-link{ background:none; border:0; color:var(--accent); font-size:12.5px; font-weight:650; cursor:pointer; padding:4px 2px; text-decoration:underline; }

/* =========================================================
   Buttons
   ========================================================= */
.btn-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; }
.btn-row .grow{ flex:1; min-width:0; }
.saved-flag{ font-size:12px; color:var(--success); font-weight:650; opacity:0; transition:opacity .3s; display:flex; align-items:center; gap:5px; }
.saved-flag.show{ opacity:1; }

.btn{ border-radius:6px; padding:10px 22px; font-size:14px; font-weight:650; cursor:pointer; border:1px solid transparent; }
.btn[hidden]{ display:none; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-secondary{ background:#fff; color:var(--ink-soft); border-color:var(--line); }
.btn-secondary:hover{ background:#f1f2f5; }
.btn-text{ background:none; border:0; color:var(--ink-soft); font-weight:650; padding:10px 6px; cursor:pointer; }
.btn-text:hover{ color:var(--accent-dark); }

/* =========================================================
   Review screen
   ========================================================= */
.review-section{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; }
.review-section-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); }
.review-section-head h2{ font-size:14.5px; font-weight:750; }
.review-edit{
  background:none; border:1px solid var(--line); color:var(--accent-dark); font-weight:700; font-size:12px;
  padding:5px 13px; border-radius:999px; cursor:pointer;
}
.review-edit:hover{ background:var(--accent-soft); border-color:#cdd8fb; }
.review-list{ padding:6px 20px; }
.review-item{ padding:11px 0; border-bottom:1px solid #f0f1f4; }
.review-item:last-child{ border-bottom:0; }
.review-item dt{ font-size:12px; font-weight:700; color:var(--muted); margin:0 0 3px; }
.review-item dd{ font-size:14px; color:var(--ink); margin:0; word-break:break-word; white-space:pre-line; }
.review-item dd.empty{ color:var(--faint); font-style:italic; }

/* ---- confirm screen ---- */
.confirm{ text-align:center; padding:34px 10px 10px; }
.confirm .tick{ width:56px; height:56px; border-radius:50%; background:var(--success-bg); color:var(--success); display:grid; place-items:center; margin:0 auto 18px; }
.confirm .tick svg{ width:26px; height:26px; }
.confirm h1{ font-size:21px; font-weight:800; }
.confirm p{ color:var(--muted); font-size:14.5px; margin:8px auto 0; max-width:44ch; }
.confirm .btn{ margin-top:24px; }

/* =========================================================
   Alerts / toast
   ========================================================= */
.page-alert{
  display:flex; gap:9px; align-items:flex-start; background:var(--danger-bg); border:1px solid #f0c4ca; color:#8c1c29;
  padding:12px 15px; border-radius:6px; margin-bottom:18px; font-size:13.5px;
}
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,10px); z-index:80; background:var(--ink); color:#fff;
  padding:10px 18px; border-radius:999px; font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0; pointer-events:none; transition:.2s ease;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:560px){
  .page{ padding:16px 14px 48px; }
  .site-header{ padding:18px 14px 0; }
  .section{ padding:18px 16px; }
  .check-list.columns{ grid-template-columns:1fr; }
  .btn{ padding:10px 16px; }
  .intro h1{ font-size:19px; }
  .step-track{ padding:14px 10px 12px; }
  .step-seg{ min-width:88px; --tip:10px; padding-left:calc(var(--tip) + 6px); }
  .step-seg .seg-ind{ width:22px; height:22px; font-size:10.5px; margin-bottom:4px; }
  .step-seg .seg-label{ font-size:10px; }
}