/* ============================================================
   PCS Precision — Expo funnel
   Tokens derived from the real PCS mark: navy #0C1F2B + red #AF0F00,
   sampled directly from the logo. Kept deliberately plain/commercial.
   ============================================================ */

:root{
  --ink:#0C1F2B;
  --ink-70: rgba(12,31,43,.7);
  --ink-45: rgba(12,31,43,.45);
  --red:#AF0F00;
  --red-dark:#8A0C00;
  --red-tint:#FBE9E6;
  --paper:#FAF9F7;
  --white:#FFFFFF;
  --line:#E4E0DA;
  --line-strong:#D2CCC2;
  --muted:#63717A;
  --danger:#B3261E;

  --radius-sm:10px;
  --radius:14px;
  --shadow-card: 0 1px 2px rgba(12,31,43,.05), 0 8px 24px rgba(12,31,43,.06);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 180ms;

  --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce){ :root{ --dur: 0ms; } }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  min-height:100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size:16px;
  line-height:1.5;
}
button{ font-family:inherit; }
h1,h2,h3,p{ margin:0; }

:focus-visible{
  outline: 2.5px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------- App shell ---------------- */

.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 640px){
  .app{
    margin: var(--space-7) auto;
    min-height: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow:hidden;
  }
}

.topbar{ border-bottom: 1px solid var(--line); }

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: var(--space-4) var(--space-5) var(--space-3);
}
.brand img{ width:26px; height:26px; object-fit:contain; border-radius:6px; flex:none; }
.brand span{ font-weight:800; font-size:13.5px; letter-spacing:.02em; color: var(--ink); }

.progress-row{
  display:flex;
  align-items:center;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-4);
}

.back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border:none;
  background:transparent;
  color: var(--ink-70);
  border-radius: 8px;
  cursor:pointer;
  flex:none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.back-btn:hover{ background: var(--paper); color: var(--ink); }

.progress-track{
  flex:1;
  height:4px;
  background: var(--line);
  border-radius:2px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:20%;
  background: var(--red);
  border-radius:2px;
  transition: width calc(var(--dur) * 2) var(--ease);
}
.progress-label{
  font-size:12px;
  font-weight:600;
  color: var(--muted);
  white-space:nowrap;
  flex:none;
}

/* ---------------- Stage / steps ---------------- */

.stage{
  flex:1;
  display:flex;
  flex-direction:column;
  padding: var(--space-6) var(--space-5) var(--space-6);
}

.step{
  display:flex;
  flex-direction:column;
  flex:1;
  animation: step-in var(--dur) var(--ease) both;
}
@keyframes step-in{ from{ opacity:0; } to{ opacity:1; } }

.step h1{
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.25;
  margin-bottom: var(--space-2);
}
.step .subtitle{
  color: var(--muted);
  font-size:14.5px;
  margin-bottom: var(--space-6);
}

.field-group{
  display:flex;
  flex-direction:column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color: var(--ink-70);
  margin-bottom: var(--space-2);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select{
  width:100%;
  height:52px;
  padding: 0 var(--space-4);
  font-size:16px;
  font-family:inherit;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%2363717A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor:pointer;
}
.field select.placeholder{ color: var(--ink-45); }
.field input::placeholder{ color: var(--ink-45); }
.field input:hover, .field select:hover{ border-color: var(--line-strong); }
.field input:focus, .field select:focus{
  outline:none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-tint);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"]{
  border-color: var(--danger);
}

.phone-field{ display:flex; gap:var(--space-2); }
.phone-prefix{
  display:flex; align-items:center; justify-content:center;
  height:52px; padding:0 var(--space-3);
  border:1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-70);
  font-weight:600;
  flex:none;
}

.field-error{
  display:block;
  color: var(--danger);
  font-size:12.5px;
  font-weight:600;
  margin-top: var(--space-2);
  min-height:0;
}

/* ---------------- Toggle (callback yes/no) ---------------- */

.step h1 + .toggle-row{ margin-top: var(--space-6); }

.toggle-row{
  display:flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.toggle-btn{
  flex:1;
  height:52px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.toggle-btn:hover{ border-color: var(--line-strong); }
.toggle-btn.selected{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.toggle-btn:disabled{ cursor:default; }
.toggle-btn:disabled:not(.selected){ opacity:.4; }

/* ---------------- Choice list (role — vertical multi-choice) ---------------- */

.choice-list{
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.choice-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-3);
  width:100%;
  min-height:52px;
  padding: 13px var(--space-4);
  text-align:left;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.choice-btn::after{
  content:'';
  width:18px; height:18px;
  border-radius:50%;
  border:1.5px solid var(--line-strong);
  flex:none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.choice-btn:hover{ border-color: var(--line-strong); }
.choice-btn:hover::after{ border-color: var(--muted); }
.choice-btn.selected{
  border-color: var(--red);
  background: var(--red-tint);
}
.choice-btn.selected::after{
  border-color: var(--red);
  background: var(--red);
  box-shadow: inset 0 0 0 3px var(--white);
}
.choice-btn:disabled{ cursor:default; }
.choice-btn:disabled:not(.selected){ opacity:.4; }

/* ---------------- Submit loader (callback — auto-submits, no button) ---------------- */

.submit-loader{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top: var(--space-5);
  color: var(--muted);
  font-size:13.5px;
  font-weight:600;
}
.submit-loader[hidden]{ display:none; }
.submit-loader .spinner{
  width:15px; height:15px;
  border-radius:50%;
  border:2px solid var(--line-strong);
  border-top-color: var(--red);
  animation: spin .7s linear infinite;
  flex:none;
}

/* ---------------- Buttons ---------------- */

.spacer{ flex:1; min-height: var(--space-5); }

.cta{
  width:100%;
  height:52px;
  border:none;
  border-radius: var(--radius-sm);
  background: var(--red);
  color: var(--white);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  touch-action: manipulation;
}
.cta:hover:not(:disabled){ background: var(--red-dark); }
.cta:disabled{ opacity:.45; cursor:not-allowed; }

.cta .spinner{
  width:15px; height:15px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  border-top-color: var(--white);
  animation: spin .7s linear infinite;
  display:none;
}
.cta.loading .spinner{ display:inline-block; }
.cta.loading .cta-label{ opacity:.85; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.fine-print{
  font-size:12.5px;
  line-height:1.5;
  color: var(--muted);
  text-align:center;
  margin-top: var(--space-4);
}
.fine-print a{ color: var(--ink-70); text-decoration:underline; text-decoration-color: var(--line-strong); text-underline-offset:2px; }
.fine-print a:hover{ color: var(--ink); text-decoration-color: var(--ink-45); }

/* ---------------- Success screen ----------------
   Styled after a calibration tag: a graduated tick scale standing in for
   the caliper/gauge markings PCS's instruments carry, plus a monospace
   reference stub in place of a generic confirmation pill. */

@keyframes success-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

.success{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: var(--space-7) var(--space-5);
  background: var(--ink);
  color: var(--white);
}
.success > *{ animation: success-in calc(var(--dur) * 2) var(--ease) both; }

.success .mark{
  position:relative;
  width:60px; height:60px;
  border-radius:50%;
  background: var(--white);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--space-4);
}
.success .mark::before{
  content:'';
  position:absolute; inset:-7px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
}
.success .mark img{ width:32px; height:32px; object-fit:contain; }

.success .eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: var(--space-3);
  animation-delay: 60ms;
}
.success .eyebrow .dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(175,15,0,.25);
}

.success h1{ font-size:22px; font-weight:700; letter-spacing:-0.01em; animation-delay: 100ms; }
.success p{
  color: rgba(255,255,255,.68);
  font-size:14.5px; line-height:1.55; max-width:34ch;
  margin-top: var(--space-2);
  animation-delay: 140ms;
}

.success .tick-scale{
  display:flex; align-items:flex-end; justify-content:center;
  gap:5px; height:22px;
  margin-top: var(--space-6);
  animation-delay: 180ms;
}
.success .tick-scale .tick{
  width:1.5px; height:8px; flex:none;
  border-radius:1px;
  background: rgba(255,255,255,.18);
}
.success .tick-scale .tick:nth-child(4n+1){ height:13px; background: rgba(255,255,255,.34); }
.success .tick-scale .tick-accent{
  height:22px !important;
  width:2px;
  background: var(--red) !important;
}

.success .cert-stub{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  margin-top: var(--space-4);
  padding: 14px 22px;
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
  animation-delay: 220ms;
}
.success .cert-ref{
  font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color: rgba(255,255,255,.45);
}
.success .cert-line{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600;
  color: rgba(255,255,255,.85);
}
.success .cert-line::before{
  content:''; width:5px; height:5px; border-radius:50%; flex:none;
  background: var(--red);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 360px){
  .step h1{ font-size:20px; }
}