/* ============================================================
   EMD — Collector Interest Form
   Built to EMD Design System v2.0 (July 2026).
   Standalone page for join.expressmobilediagnostics.com
   ============================================================ */

:root {
  /* Color */
  --deep-blue:#1E40AF; --deep-blue-dark:#17318A; --near-black:#0C1838;
  --teal:#1B8178; --teal-dark:#14655E;
  --sky-blue:#61A0E5; --sky-light:#A5CCF5; --sky-tint:#EDF1FC;
  --white:#FFFFFF; --light-gray:#E5E7EB; --mid-gray:#9CA3AF;
  --dark-gray:#4B5563; --warning:#8A6600; --danger:#C0392B;
  --tint-danger:#FBEDEB;

  /* Type */
  --font-display:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --fs-h1:clamp(34px,5.4vw,52px);
  --fs-h2:clamp(28px,3.6vw,36px);
  --fs-h3:clamp(21px,2.2vw,24px);
  --fs-lead:clamp(18px,2vw,20px);
  --fs-body:17px; --fs-small:15px; --fs-eyebrow:12px;

  /* Space */
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px;
  --space-10:64px; --space-12:96px;

  --content:640px; --wide:1200px;

  --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px; --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(12,24,56,.04), 0 2px 8px rgba(12,24,56,.04);
  --shadow-md:0 4px 24px rgba(12,24,56,.07);
  --shadow-cta:0 6px 24px rgba(27,129,120,.22);

  --dur-fast:120ms; --dur-base:200ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font-body); font-size:var(--fs-body);
  line-height:1.75; color:var(--dark-gray); background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--deep-blue); margin:0; line-height:1.15; letter-spacing:-.02em;}
p{margin:0;}
a{color:var(--teal); text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{max-width:var(--wide); margin:0 auto; padding:0 var(--space-6);}
@media(min-width:768px){ .wrap{padding:0 var(--space-7);} }

/* Universal focus (§04) */
:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:inherit;}
.on-dark :focus-visible{outline-color:var(--sky-light);}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:20; background:var(--white); border-bottom:1px solid var(--light-gray);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.site-header img{height:40px; width:auto; display:block;}
.header-cta{display:inline-flex;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-small); letter-spacing:.02em;
  padding:14px 30px; border-radius:var(--radius-pill); border:2px solid transparent;
  transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard); line-height:1; text-align:center;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--teal); color:var(--white);}
.btn--primary:hover{background:var(--teal-dark); color:var(--white); box-shadow:var(--shadow-cta);}
.btn--secondary{background:transparent; color:var(--deep-blue); border-color:var(--deep-blue);}
.btn--secondary:hover{background:var(--deep-blue); color:var(--white);}
.btn--lg{padding:16px 36px; font-size:16px;}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--mid-gray); color:var(--dark-gray); cursor:not-allowed; box-shadow:none;}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(170deg,#0C1838 0%,#1E40AF 100%); color:var(--white); padding:var(--space-12) 0;}
.hero .wrap{max-width:820px;}
.hero .eyebrow{color:var(--sky-light);}
.hero h1{color:var(--white); font-size:var(--fs-h1); font-weight:700; letter-spacing:-.025em;}
.hero p{color:var(--light-gray); font-size:var(--fs-lead); max-width:560px; margin-top:var(--space-5);}

.eyebrow{font-family:var(--font-body); font-weight:600; font-size:var(--fs-eyebrow);
  text-transform:uppercase; letter-spacing:.16em; color:var(--teal); margin:0 0 var(--space-3);}

/* ---------- Form shell ---------- */
.form-section{padding:var(--space-12) 0;}
.form-shell{max-width:760px; margin:0 auto;}

.form-note{background:var(--sky-tint); color:var(--deep-blue); border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6); font-size:var(--fs-small); margin-bottom:var(--space-9);}
.form-note strong{color:var(--deep-blue);}

/* fieldset = each questionnaire block, styled as a card (§04 Card default) */
.fs{border:1px solid var(--light-gray); border-radius:var(--radius-xl); padding:var(--space-8);
  margin:0 0 var(--space-7); min-width:0;}
.fs > legend{padding:0; margin:0 0 var(--space-2);}
.fs-title{font-family:var(--font-display); font-weight:700; color:var(--deep-blue); font-size:var(--fs-h3); letter-spacing:-.01em;}
.fs-sub{font-size:var(--fs-small); color:var(--dark-gray); margin:var(--space-2) 0 var(--space-6);}

/* form rows / grid */
.grid{display:grid; gap:var(--space-5);}
@media(min-width:560px){ .grid-2{grid-template-columns:1fr 1fr;} .grid-3{grid-template-columns:2fr 1fr 1fr;} }

.field{display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-5);}
.field:last-child{margin-bottom:0;}
.field > label,.q-label{font-weight:600; color:var(--near-black); font-size:var(--fs-small);}
.req{color:var(--danger); margin-left:2px;}
.hint{font-size:13px; color:var(--dark-gray); margin-top:-2px;}

/* inputs (§04 Input) */
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; font-family:var(--font-body); font-size:var(--fs-small); color:var(--near-black);
  background:var(--white); border:1px solid var(--light-gray); border-radius:var(--radius-md);
  padding:11px 13px; transition:border-color var(--dur-fast) var(--ease-standard);
}
input:hover,select:hover,textarea:hover{border-color:var(--mid-gray);}
input:focus,select:focus,textarea:focus{border-color:var(--teal); outline:2px solid var(--teal); outline-offset:1px;}
textarea{min-height:120px; resize:vertical; line-height:1.6;}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:40px;}

input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger); outline-color:var(--danger);}
.err-msg{font-size:13px; color:var(--danger); background:var(--tint-danger); border-radius:var(--radius-md);
  padding:8px 12px; display:flex; gap:7px; align-items:flex-start;}
.err-msg::before{content:"!"; font-weight:700; flex:none; width:16px; height:16px; border-radius:50%;
  background:var(--danger); color:#fff; font-size:11px; line-height:16px; text-align:center;}

/* choice groups (checkbox / radio) */
.choices{display:grid; gap:var(--space-3); margin-top:var(--space-2);}
@media(min-width:520px){ .choices.cols-2{grid-template-columns:1fr 1fr;} }
.choice{display:flex; gap:var(--space-3); align-items:flex-start; padding:12px 14px;
  border:1px solid var(--light-gray); border-radius:var(--radius-md); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); font-size:var(--fs-small);}
.choice:hover{border-color:var(--sky-blue);}
.choice input{margin:0; width:18px; height:18px; flex:none; accent-color:var(--teal); margin-top:1px;}
.choice:has(input:checked){border-color:var(--teal); background:var(--sky-tint);}
.choice:has(input:focus-visible){outline:2px solid var(--teal); outline-offset:2px;}
.choice span{color:var(--near-black);}

/* inline yes/no radio pair */
.yn{display:flex; gap:var(--space-3);}
.yn .choice{flex:1; justify-content:center; text-align:center; padding:11px;}

/* file uploads */
.uploads{display:grid; gap:var(--space-4);}
.upload-row{display:grid; gap:var(--space-2);}
.upload-row label{font-weight:600; color:var(--near-black); font-size:var(--fs-small);}
input[type=file]{font-size:14px; color:var(--dark-gray);}
input[type=file]::file-selector-button{
  font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--deep-blue);
  background:var(--white); border:2px solid var(--deep-blue); border-radius:var(--radius-pill);
  padding:8px 18px; margin-right:14px; cursor:pointer;}
input[type=file]::file-selector-button:hover{background:var(--deep-blue); color:#fff;}

/* conditional reveal */
[data-reveal]{display:none;}
[data-reveal].show{display:flex;}

/* agreement */
.agreements .choice{background:var(--white);}
.agreements .choice:has(input:checked){background:var(--sky-tint);}

.form-actions{display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; margin-top:var(--space-8);}
.form-actions .note{font-size:13px; color:var(--dark-gray);}

/* summary error banner */
.err-banner{border:1px solid var(--danger); background:var(--tint-danger); color:var(--danger);
  border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); margin-bottom:var(--space-7); font-size:var(--fs-small);}
.err-banner strong{color:var(--danger);}
.err-banner ul{margin:var(--space-2) 0 0; padding-left:20px;}

/* honeypot */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------- Confirmation ---------- */
.confirm{padding:var(--space-12) 0; text-align:center;}
.confirm .wrap{max-width:640px;}
.confirm-badge{width:72px; height:72px; border-radius:50%; background:#E8F3F1; color:var(--teal-dark);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-6);}
.confirm-badge svg{width:34px; height:34px;}
.confirm h1{font-size:var(--fs-h2); margin-bottom:var(--space-4);}
.confirm p{font-size:var(--fs-lead); color:var(--dark-gray); max-width:520px; margin:0 auto var(--space-4);}
.confirm .next{text-align:left; background:var(--sky-tint); border-radius:var(--radius-lg);
  padding:var(--space-6); margin:var(--space-8) auto; max-width:520px; color:var(--deep-blue); font-size:var(--fs-small);}
.confirm .next h2{font-size:var(--fs-h3); margin-bottom:var(--space-3);}
.confirm .form-actions{justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--near-black); color:var(--light-gray); padding:var(--space-10) 0;}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:var(--space-6); align-items:center; justify-content:space-between;}
.site-footer img{height:36px; width:auto;}
.site-footer p{font-size:14px; color:var(--light-gray);}
.site-footer a{color:var(--sky-light);}

@media(prefers-reduced-motion:reduce){ *{transition:none !important;} }