/* ============================================================
   Base + component system (original). Consumes tokens.css.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-ui);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.02}
p{margin:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

/* --- typographic scale --- */
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.0}
.h-hero{font-size:clamp(40px,6.4vw,76px)}
.h-1{font-size:clamp(30px,4.4vw,46px)}
.h-2{font-size:clamp(24px,3vw,34px)}
.lead{font-size:clamp(16px,1.4vw,19px);color:var(--ink-2);line-height:1.55}
.muted{color:var(--ink-2)}
.tiny{font-size:13px;color:var(--ink-3)}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:0 22px;height:52px;border-radius:var(--r-pill);font-weight:600;font-size:16px;
  transition:transform .12s var(--ease),background .15s,box-shadow .15s,border-color .15s;
  white-space:nowrap;user-select:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.btn-primary:hover{background:var(--primary-700)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:#0C8F59}
.btn-ghost{background:transparent;border:1.5px solid var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3);background:#fff}
.btn-white{background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.btn-white:hover{border-color:var(--line-strong)}
.btn-block{width:100%}
.btn-lg{height:56px;font-size:17px;padding:0 28px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* --- pills / badges --- */
.pill{display:inline-flex;align-items:center;gap:.4em;height:34px;padding:0 14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2)}
.badge{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:var(--r-pill);
  font-weight:800;font-size:13px;letter-spacing:.02em;color:#fff}
.badge-ats{background:var(--primary)}
.badge-hr{background:var(--green)}

/* --- inputs --- */
.field{display:block;margin-bottom:16px}
.field > label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.input{width:100%;height:50px;padding:0 15px;border-radius:var(--r-sm);border:1.5px solid var(--line-strong);
  background:#fff;font-size:15.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--ink-3)}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.input.err{border-color:var(--danger);box-shadow:0 0 0 4px var(--danger-soft)}
.field .err-msg{color:var(--danger);font-size:12.5px;margin-top:6px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8683' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}

/* --- checkbox --- */
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2);cursor:pointer;line-height:1.45}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-strong);background:#fff;
  display:grid;place-items:center;margin-top:1px;transition:.15s}
.check input:checked + .box{background:var(--primary);border-color:var(--primary)}
.check input:checked + .box::after{content:"";width:11px;height:11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.check a{color:var(--primary);font-weight:600}

/* --- single-select option rows (survey) --- */
.options{display:flex;flex-direction:column;gap:10px;max-width:440px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:15px 18px;border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--line);
  font-size:15px;font-weight:500;color:var(--ink);transition:transform .12s var(--ease),border-color .15s,background .15s,box-shadow .15s}
.opt:hover{border-color:var(--primary-line);box-shadow:var(--sh-sm)}
.opt .tick{flex:0 0 auto;width:22px;height:22px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);
  display:grid;place-items:center;opacity:0;transition:.15s}
.opt[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--sh-md)}
.opt[aria-pressed="true"] .tick{opacity:1;border-color:rgba(255,255,255,.7)}
.opt[aria-pressed="true"] .tick::after{content:"";width:12px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}

/* --- progress dots --- */
.dots{display:flex;gap:8px;align-items:center}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:.2s}
.dots i.on{background:var(--ink);width:22px;border-radius:var(--r-pill)}
.dots i.done{background:var(--ink-3)}

/* --- cards --- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card)}
.card-pad{padding:26px}

/* --- generic layout helpers --- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.stack{display:flex;flex-direction:column}
.center{display:grid;place-items:center}
.spread{display:flex;align-items:center;justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.hide{display:none!important}