/* ============================================================
   FREE DEMO BRIEF — staged form page
   Rides on style.css tokens: same paper canvas, white rounded
   cards, one lime accent, Hanken Grotesk + mono micro-labels.
   ============================================================ */

.db{ background:var(--bg); }
/* .pill sets display:inline-flex, which outranks the UA rule for [hidden] and
   leaves Back / Send visible on every step. Put the attribute back in charge. */
.db [hidden]{ display:none !important; }
.db main{
  max-width:calc(920px + 2 * var(--pad));
  margin-inline:auto;
  padding:0 var(--pad) clamp(50px, 8vh, 90px);
}

/* ---------- header ---------- */
.dh{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.dh__brand img{ height:28px; width:auto; }
.dh__back{ color:var(--grey-2); transition:color var(--dur) var(--ease); }
@media (hover:hover){ .dh__back:hover{ color:var(--ink); } }

/* ---------- intro ---------- */
.dintro{ padding:clamp(34px, 6vh, 66px) 0 clamp(20px, 3vh, 32px); }
.dintro__h{
  font-size:clamp(27px, 3.4vw + 8px, 50px); font-weight:600;
  letter-spacing:-.02em; line-height:1.08; max-width:19ch; margin-top:14px;
}
.dintro__p{ color:var(--grey-2); max-width:56ch; margin-top:16px; }
.dintro__meta{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  margin-top:22px; color:var(--grey-aa);
}
.dintro__meta li{ display:flex; align-items:center; gap:7px; }

/* scope note — the free demo is websites only */
.dnote{
  margin-top:26px; padding:18px 20px;
  background:#fff; border-radius:var(--r);
  border-left:3px solid var(--lime);
  box-shadow:var(--sh);
}
.dnote__k{ color:var(--grey-aa); margin-bottom:6px; }
.dnote p{ color:var(--grey-2); max-width:60ch; }
.dnote strong{ color:var(--ink); font-weight:600; }
.dnote__link{
  display:inline-block; margin-top:10px; font-weight:600; font-size:14.5px;
  border-bottom:1px solid var(--line); transition:border-color var(--dur) var(--ease);
}
@media (hover:hover){ .dnote__link:hover{ border-color:var(--ink); } }

/* honeypot: off-screen rather than display:none, which bots filter out */
.dhp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ---------- progress ---------- */
.dprog{
  height:4px; border-radius:999px; overflow:hidden;
  background:rgba(16,16,16,.09); margin-top:10px;
}
.dprog__bar{
  height:100%; width:0; border-radius:999px; background:var(--lime);
  transition:width .5s var(--ease);
}
.dprog__k{ color:var(--grey-aa); margin:10px 0 18px; }

/* ---------- step card ---------- */
.dstep{
  background:var(--card); border-radius:var(--r-lg);
  padding:clamp(24px, 3.6vw, 44px);
  box-shadow:var(--sh);
}
.dstep:focus{ outline:none; }
.dstep__n{ color:var(--grey-aa); }
.dstep__h{
  font-size:clamp(21px, 1.9vw + 8px, 33px); font-weight:600;
  letter-spacing:-.015em; line-height:1.14; margin:8px 0 22px; max-width:22ch;
}
.js .dstep.is-on{ animation:dstepin .5s var(--ease) both; }
@keyframes dstepin{ from{ opacity:0; transform:translateY(14px); } }

/* ---------- fields ---------- */
.dfield{ border:0; padding:0; margin:0 0 clamp(20px, 2.6vw, 28px); }
.dfield:last-child{ margin-bottom:0; }
/* :not(.ddrop) matters — the drop zone is also a <label> directly inside
   .dfield, and this rule's specificity would otherwise beat .ddrop's own
   display:flex and stack its icon above its text. */
.dfield > label:not(.ddrop), .dfield legend{
  display:block; font-weight:600; font-size:15.5px; margin-bottom:9px; padding:0;
}
.req{ color:var(--lime-deep); }
.dhint{ color:var(--grey-aa); font-size:13.5px; margin:-3px 0 11px; max-width:58ch; }
.dhint--top{ margin:-12px 0 22px; }

.dfield input[type=text],
.dfield input[type=email],
.dfield input[type=tel],
.dfield textarea{
  /* textarea is not covered by the base `button,input{font:inherit}` rule and
     would otherwise fall back to the UA monospace default */
  font:inherit;
  width:100%; padding:13px 16px;
  background:var(--bg); color:var(--ink);
  border:1px solid transparent; border-radius:var(--r-sm);
  outline:none; resize:vertical;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dfield input::placeholder, .dfield textarea::placeholder{ color:var(--grey-aa); }
.dfield input:focus, .dfield textarea:focus{ border-color:var(--ink); background:#fff; }
.dfield input[aria-invalid=true], .dfield textarea[aria-invalid=true]{
  border-color:#C4342B; background:#fff;
}
.dfield--split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---------- choices ---------- */
.dopts{ display:grid; gap:10px; }
.dopts--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.dopts--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.dopts--tags{ display:flex; flex-wrap:wrap; gap:9px; }

.dopt{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-radius:var(--r-sm);
  background:var(--bg); border:1px solid transparent; cursor:pointer;
  font-size:14.5px; line-height:1.35;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dopt input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0;
}
.dopt span{ display:block; }
.dopt::before{
  content:""; flex:0 0 auto; width:17px; height:17px;
  border:1.5px solid var(--grey-aa); border-radius:50%;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.dopt:has(input[type=checkbox])::before{ border-radius:5px; }
@media (hover:hover){ .dopt:hover{ border-color:rgba(16,16,16,.22); } }
.dopt:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px; }
.dopt:has(input:checked){ border-color:var(--ink); background:#fff; }
.dopt:has(input:checked)::before{
  border-color:var(--ink); background:var(--lime);
  box-shadow:inset 0 0 0 3px #fff;
}
/* tags read as pills rather than a list */
.dopt--tag{ border-radius:999px; padding:10px 16px; }
.dopt--tag::before{ display:none; }
.dopt--tag:has(input:checked){ background:var(--ink); color:#fff; border-color:var(--ink); }
.dopt--tag.is-locked{ opacity:.4; }

/* ---------- file upload ---------- */
.ddrop{
  display:flex; align-items:center; gap:12px;
  padding:20px 18px; border-radius:var(--r-sm);
  background:var(--bg); border:1.5px dashed rgba(16,16,16,.22);
  cursor:pointer; font-size:14.5px; font-weight:500;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ddrop input{ position:absolute; opacity:0; width:1px; height:1px; }
.ddrop__ic{
  flex:0 0 auto; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--ink); color:var(--lime); font-size:15px;
}
.ddrop__s{ color:var(--grey-aa); font-weight:400; }
@media (hover:hover){ .ddrop:hover{ border-color:var(--ink); background:#fff; } }
.ddrop:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px; }
.ddrop.is-over{ border-color:var(--lime-2); background:#fff; }

.dfiles{ margin:10px 0 0; display:grid; gap:7px; }
.dfiles:empty{ margin:0; }
.dfiles li{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px 10px 14px; border-radius:var(--r-sm);
  background:#fff; border:1px solid var(--line); font-size:14px;
}
.dfiles .dfiles__n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dfiles .dfiles__s{ margin-left:auto; color:var(--grey-aa); font-size:13px; flex:0 0 auto; }
.dfiles button{
  flex:0 0 auto; width:24px; height:24px; border:0; border-radius:50%;
  background:var(--bg); color:var(--grey-2); cursor:pointer; line-height:1;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover:hover){ .dfiles button:hover{ background:var(--ink); color:#fff; } }
.dhint--warn{ color:#8E241D; font-weight:500; margin-top:9px; }

/* ---------- review ---------- */
.dsum{ margin:0; display:grid; gap:1px; background:var(--line); border-radius:var(--r-sm); overflow:hidden; }
.dsum__row{ background:#fff; padding:14px 16px; display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1fr); gap:14px; }
.dsum dt{ color:var(--grey-aa); font-size:13.5px; }
.dsum dd{ margin:0; font-weight:500; overflow-wrap:anywhere; }
.dsum dd.is-empty{ color:var(--grey-aa); font-weight:400; }

/* ---------- nav ---------- */
.dnav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.pill--ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.pill--lime{ background:var(--lime); color:var(--lime-ink); }
.dnav .pill{ border:1px solid transparent; cursor:pointer; }
.pill--ghost{ border-color:var(--line); }
@media (hover:hover){
  .pill--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
  .pill--lime:hover{ background:var(--lime-2); transform:translateY(-2px); }
}
#next, #send{ margin-left:auto; }

.derr{
  margin-top:14px; padding:12px 16px; border-radius:var(--r-sm);
  background:#FDECEA; color:#8E241D; font-size:14.5px;
  border-left:3px solid #C4342B;
}

/* ---------- done ---------- */
.ddone{ margin-top:clamp(20px, 3vh, 34px); }
.dnote--warn{
  margin:0 0 18px; box-shadow:none; border-left-color:#C4342B;
  background:#FDECEA; color:#8E241D;
}
.dnote--warn strong{ color:#8E241D; }
.dnote--warn span{ font-weight:500; }
.ddone__row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.ddone__row .pill{ border:1px solid transparent; cursor:pointer; }
.ddone__row .pill--paper{ border-color:var(--line); }
.ddone__back{ margin-top:22px; color:var(--grey-aa); }
@media (hover:hover){ .ddone__back a:hover{ color:var(--ink); } }

/* ---------- footer ---------- */
.dfoot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px;
  max-width:calc(920px + 2 * var(--pad)); margin-inline:auto;
  padding:22px var(--pad) 34px; color:var(--grey-aa);
  border-top:1px solid var(--line);
}

/* ---------- responsive ---------- */
@media (max-width: 760px){
  .dopts--2, .dopts--3{ grid-template-columns:1fr; }
  .dfield--split{ grid-template-columns:1fr; }
  .dnav{ gap:8px; }
  .dnav .pill{ flex:1 1 auto; justify-content:center; }
  #next, #send{ margin-left:0; }
}
@media (max-width: 420px){
  .dintro__meta{ gap:6px 16px; }
  .dsum__row{ grid-template-columns:1fr; gap:3px; }
}

@media (prefers-reduced-motion:reduce){
  .js .dstep.is-on{ animation:none; }
  .dprog__bar{ transition:none; }
  .dnav .pill:hover, .ddone__row .pill:hover{ transform:none; }
}