/*
 * The questionnaire's own look.
 *
 * It is deliberately not the merif stylesheet. This page is handed to people
 * who have never seen the site, on their phone, and it has one job, so it
 * carries its own dark theme and nothing else.
 *
 * Lifted out of a <style> block inside index.php so the browser can cache it.
 */
/* ── Reset & Variables ──────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:       #070c1a;
  --card:     #0d1526;
  --card2:    #111e34;
  --border:   #1a2844;
  --border2:  #223060;
  --accent:   #F4841F;
  --accent2:  #f97316;
  --amber:    #fbbf24;
  --green:    #22c55e;
  --red:      #ef4444;
  --text:     #e8f0ff;
  --muted:    #7a93c0;
  --faint:    #3a4f78;
  --input-bg: #060b18;
  --r:        15px;
  --r-sm:     10px;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.65;
  min-height:100vh;
  background-image:
    radial-gradient(ellipse 70% 40% at 15% 0%,  rgba(244,132,31,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 100%, rgba(244,132,31,.05) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%,  rgba(15,28,60,.6)    0%, transparent 70%);
}

/* ── Agency Header ──────────────────────────────────────────────────────────── */
.agency-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  background:rgba(7,12,26,.92);
  backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:100;
}
.agency-bar img{height:34px;border-radius:7px}
.agency-bar a{
  font-family:'Syne',sans-serif;font-size:12px;font-weight:700;
  color:var(--accent);text-decoration:none;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(244,132,31,.35);padding:6px 12px;border-radius:99px;
  transition:background .2s,border-color .2s;
}
.agency-bar a:hover{background:rgba(244,132,31,.12);border-color:var(--accent)}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.hero{
  text-align:center;
  padding:48px 20px 36px;
  position:relative;
}
.hero-icon{
  font-size:56px;display:block;margin-bottom:18px;
  animation:float 3s ease-in-out infinite;
  filter:drop-shadow(0 8px 24px rgba(244,132,31,.4));
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.hero h1{
  font-family:'Syne',sans-serif;
  font-size:clamp(22px,6vw,38px);
  font-weight:800;
  line-height:1.1;
  color:var(--text);
  margin-bottom:10px;
}
.hero h1 span{
  background:linear-gradient(135deg,var(--accent),#fb923c);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{
  color:var(--muted);font-size:14px;max-width:440px;margin:0 auto 22px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(244,132,31,.1);border:1px solid rgba(244,132,31,.25);
  padding:7px 14px;border-radius:99px;font-size:12px;color:var(--accent);
  font-family:'Syne',sans-serif;font-weight:700;letter-spacing:.05em;
}
.hero-badge span{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* ── Sticky Progress ────────────────────────────────────────────────────────── */
.sticky-prog{
  position:sticky;top:62px;z-index:90;
  background:rgba(7,12,26,.96);
  backdrop-filter:blur(12px);
  padding:10px 18px;
  border-bottom:1px solid var(--border);
}
.prog-labels{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--muted);margin-bottom:7px;
  font-family:'Syne',sans-serif;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.prog-section{color:var(--accent);font-size:10px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog-track{height:5px;background:var(--border2);border-radius:99px;overflow:hidden}
.prog-fill{
  height:100%;background:linear-gradient(90deg,var(--accent),#fb923c,var(--amber));
  border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1);width:0%
}

/* ── Section Steps ──────────────────────────────────────────────────────────── */
.steps-row{
  display:flex;gap:6px;overflow-x:auto;padding:14px 18px;
  scrollbar-width:none;
  border-bottom:1px solid var(--border);
  background:rgba(13,21,38,.6);
}
.steps-row::-webkit-scrollbar{display:none}
.step-dot{
  flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:11px;font-weight:800;
  color:var(--faint);cursor:pointer;transition:all .3s;
}
.step-dot.active{border-color:var(--accent);color:var(--accent);background:rgba(244,132,31,.1)}
.step-dot.done{border-color:var(--green);background:rgba(34,197,94,.12);color:var(--green)}

/* ── Form Wrap ──────────────────────────────────────────────────────────────── */
.form-wrap{max-width:700px;margin:0 auto;padding:20px 14px 72px}

/* ── Section Card ───────────────────────────────────────────────────────────── */
.section{
  margin-bottom:20px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .3s;
  scroll-margin-top:140px;
}
.section:focus-within{border-color:rgba(244,132,31,.45)}

.sec-head{
  display:flex;align-items:center;gap:13px;
  padding:17px 18px;
  background:linear-gradient(135deg, var(--card2) 0%, rgba(18,28,50,.9) 100%);
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.sec-head::before{
  content:'';position:absolute;right:-20px;top:-20px;
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,132,31,.08) 0%,transparent 70%);
}
.sec-icon{
  font-size:18px;width:38px;height:38px;
  background:rgba(244,132,31,.12);border:1px solid rgba(244,132,31,.2);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sec-num{
  font-family:'Syne',sans-serif;font-size:9px;font-weight:800;
  color:var(--accent);letter-spacing:.08em;text-transform:uppercase;
  background:rgba(244,132,31,.1);border:1px solid rgba(244,132,31,.2);
  padding:2px 7px;border-radius:5px;
}
.sec-titles .sec-title{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;color:var(--text)}
.sec-titles .sec-sub{font-size:11px;color:var(--muted);margin-top:2px}

.sec-body{padding:18px;display:flex;flex-direction:column;gap:18px}

/* ── Question ───────────────────────────────────────────────────────────────── */
.question{display:flex;flex-direction:column;gap:7px}

.q-label{
  font-weight:600;font-size:13.5px;color:var(--text);
  display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
}
.q-num{
  display:inline-block;
  background:rgba(244,132,31,.15);color:var(--accent);
  font-family:'Syne',sans-serif;font-size:10px;font-weight:800;
  padding:2px 6px;border-radius:5px;flex-shrink:0;margin-top:1px;min-width:24px;text-align:center;
}
.q-req{color:var(--accent);font-size:12px;margin-left:2px}
.q-badge{
  margin-left:auto;flex-shrink:0;
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(244,132,31,.1);color:var(--accent);
  border:1px solid rgba(244,132,31,.2);
  padding:2px 7px;border-radius:99px;
}

.q-tip{
  font-size:12px;color:var(--muted);font-style:italic;
  background:rgba(122,147,192,.06);
  border-left:2px solid rgba(244,132,31,.4);
  padding:7px 11px;border-radius:0 7px 7px 0;
  line-height:1.5;
}

/* ── Inputs ─────────────────────────────────────────────────────────────────── */
input[type=text],input[type=email],input[type=tel],input[type=number],
textarea,select{
  width:100%;
  background:var(--input-bg);
  border:1.5px solid var(--border2);
  border-radius:var(--r-sm);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  padding:12px 14px;
  outline:none;
  -webkit-appearance:none;
  transition:border-color .2s,box-shadow .2s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(244,132,31,.12);
}
input::placeholder,textarea::placeholder{color:#2e4070}
textarea{resize:vertical;min-height:82px}

select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237a93c0' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:38px;
}
select option{background:#0d1526;color:var(--text)}

/* ── Pills ──────────────────────────────────────────────────────────────────── */
.pill-group{display:flex;flex-wrap:wrap;gap:8px}
.pill-group input[type=radio],.pill-group input[type=checkbox]{display:none}
.pill-group label{
  padding:9px 16px;border-radius:99px;
  border:1.5px solid var(--border2);
  font-size:13px;cursor:pointer;
  color:var(--muted);background:var(--input-bg);
  transition:all .2s;user-select:none;
  min-height:38px;display:flex;align-items:center;
}
.pill-group input:checked + label{
  background:rgba(244,132,31,.14);
  border-color:var(--accent);color:var(--accent);font-weight:600;
}
.pill-group label:hover{border-color:rgba(244,132,31,.45);color:var(--text)}

/* ── 2-col grid ─────────────────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.g2{grid-template-columns:1fr}}

/* ── Divider ────────────────────────────────────────────────────────────────── */
.divider{height:1px;background:var(--border);margin:2px 0}

/* ── Submit ─────────────────────────────────────────────────────────────────── */
.submit-wrap{text-align:center;padding:6px 0 0}
.submit-note{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.btn-submit{
  width:100%;padding:17px 24px;
  background:linear-gradient(135deg,var(--accent) 0%,#ea580c 100%);
  color:#fff;border:none;border-radius:var(--r);
  font-family:'Syne',sans-serif;font-size:16px;font-weight:800;
  cursor:pointer;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 30px rgba(244,132,31,.35);
  transition:opacity .2s,transform .1s,box-shadow .2s;
}
.btn-submit:hover{opacity:.92;box-shadow:0 8px 36px rgba(244,132,31,.45)}
.btn-submit:active{transform:scale(.98)}
.btn-submit:disabled{opacity:.55;cursor:not-allowed}

/* ── Already Submitted Overlay ──────────────────────────────────────────────── */
.already-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(7,12,26,.97);
  flex-direction:column;align-items:center;justify-content:center;
  padding:32px 20px;text-align:center;
  backdrop-filter:blur(6px);
}
.already-overlay.show{display:flex}
.already-card{
  background:var(--card2);border:1px solid var(--border2);
  border-radius:20px;padding:40px 28px;max-width:420px;width:100%;
}
.already-icon{font-size:56px;margin-bottom:16px;display:block;animation:pop .5s cubic-bezier(.175,.885,.32,1.275)}
.already-card h2{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;margin-bottom:10px}
.already-card p{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:24px}
.already-date{
  font-size:11px;color:var(--faint);
  background:var(--border);padding:6px 12px;border-radius:8px;
  display:inline-block;margin-bottom:20px;
  font-family:'Syne',sans-serif;font-weight:600;letter-spacing:.04em;
}
.btn-edit{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--accent),#ea580c);
  color:#fff;border:none;border-radius:12px;
  padding:14px 28px;font-family:'Syne',sans-serif;
  font-size:15px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 20px rgba(244,132,31,.35);
  transition:opacity .2s,transform .1s;
}
.btn-edit:hover{opacity:.9}
.btn-edit:active{transform:scale(.97)}

/* ── Success Screen ─────────────────────────────────────────────────────────── */
.success-screen{
  display:none;min-height:80vh;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 20px;
}
.success-screen.show{display:flex}
.form-wrap.hide{display:none}
.success-icon{
  font-size:72px;margin-bottom:20px;
  animation:pop .6s cubic-bezier(.175,.885,.32,1.275);
  filter:drop-shadow(0 8px 24px rgba(34,197,94,.3));
}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.success-screen h2{
  font-family:'Syne',sans-serif;font-size:clamp(22px,6vw,32px);
  font-weight:800;margin-bottom:12px;color:var(--text);
}
.success-screen .success-sub{color:var(--muted);font-size:15px;max-width:400px;line-height:1.7}
.success-meta{
  margin-top:24px;padding:14px 22px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);
  border-radius:12px;font-size:13px;color:var(--green);
  display:flex;align-items:center;gap:8px;
}

/* ── Toast ──────────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--card2);border:1px solid var(--border2);
  border-radius:12px;padding:11px 18px;
  font-size:13px;color:var(--text);
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  z-index:999;opacity:0;
  transition:opacity .3s,bottom .3s;
  pointer-events:none;white-space:nowrap;
  display:flex;align-items:center;gap:8px;
}
.toast.show{opacity:1;bottom:28px}
.toast.success{border-color:rgba(34,197,94,.4);color:var(--green)}
.toast.error{border-color:rgba(239,68,68,.4);color:#fca5a5}

/* ── Auto-save badge ────────────────────────────────────────────────────────── */
.save-badge{
  position:fixed;bottom:24px;right:16px;
  font-size:11px;color:var(--green);
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);
  padding:5px 11px;border-radius:99px;z-index:90;
  opacity:0;transition:opacity .4s;
  pointer-events:none;font-family:'Syne',sans-serif;font-weight:700;letter-spacing:.04em;
}
.save-badge.show{opacity:1}

/* ── Mobile tweaks ──────────────────────────────────────────────────────────── */
@media(max-width:540px){
  .sec-head{padding:14px 15px}
  .sec-body{padding:14px 13px;gap:16px}
  .pill-group label{padding:8px 13px;font-size:12.5px;min-height:40px}
  input[type=text],input[type=email],input[type=tel],
  textarea,select{padding:13px 13px;font-size:15px}
  .btn-submit{font-size:15px;padding:16px}
  .agency-bar img{height:30px}
}

/* ════════════════════════════════════════════════════════════════════════════
   The pieces the form grew when it stopped being one hardcoded trade
   ════════════════════════════════════════════════════════════════════════════ */

/* ── The hero, on both screens ─────────────────────────────────────────────── */
.q-hero{text-align:center;padding:38px 0 26px}
.q-hero.is-form{padding:26px 0 18px}
.q-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
          letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.q-hero h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(22px,5.4vw,34px);
           line-height:1.18;color:var(--text);margin-bottom:12px}
.q-hero-sub{font-size:14px;line-height:1.65;color:var(--muted);max-width:52ch;margin:0 auto}

/* ── Picking a trade ───────────────────────────────────────────────────────── */
.trade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:11px;margin-bottom:30px}
.trade-card{display:flex;flex-direction:column;gap:5px;padding:16px 14px;border-radius:var(--r);
            background:var(--card);border:1px solid var(--border);text-decoration:none;
            transition:border-color .18s ease,transform .18s ease,background .18s ease}
.trade-card:hover,.trade-card:focus-visible{border-color:var(--accent);background:var(--card2);transform:translateY(-3px)}
.trade-ico{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
           background:rgba(244,132,31,.13);color:var(--accent);font-size:14px;margin-bottom:5px}
.trade-card strong{font-family:'Syne',sans-serif;font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3}
.trade-card span{font-size:11.5px;color:var(--muted);line-height:1.5}
.q-foot-note{text-align:center;font-size:12px;color:var(--faint);padding-bottom:40px}
.q-foot-note i{color:var(--accent);margin-right:5px}

/* ── The bar that follows you down the page ────────────────────────────────── */
.q-top{position:sticky;top:0;z-index:50;background:rgba(7,12,26,.93);
       backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
       border-bottom:1px solid var(--border)}
.q-top-in{display:flex;align-items:center;gap:12px;max-width:860px;margin:0 auto;padding:10px 16px}
.q-back{flex:none;width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;
        justify-content:center;background:var(--card);border:1px solid var(--border);
        color:var(--muted);text-decoration:none;font-size:12px}
.q-back:hover{border-color:var(--accent);color:var(--accent)}
.q-top-mid{flex:1;min-width:0}
.q-top-title{font-family:'Syne',sans-serif;font-size:12.5px;font-weight:700;color:var(--text);
             margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-bar{height:4px;border-radius:50px;background:var(--border);overflow:hidden}
.q-bar span{display:block;height:100%;width:0;border-radius:50px;
            background:linear-gradient(90deg,var(--accent),var(--amber));transition:width .3s ease}
.q-top-pct{flex:none;font-family:'Syne',sans-serif;font-size:13px;font-weight:800;color:var(--accent);
           min-width:38px;text-align:right}
/* "Saved" only appears when something has just been saved, then goes. A badge
   that is always on screen stops being read after the first minute. */
.q-saved{position:absolute;right:16px;bottom:-30px;display:inline-flex;align-items:center;gap:6px;
         padding:4px 11px;border-radius:50px;background:rgba(34,197,94,.14);
         border:1px solid rgba(34,197,94,.3);color:var(--green);font-size:11px;font-weight:600;
         opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease;
         pointer-events:none}
.q-saved.is-on{opacity:1;transform:translateY(0)}

/* ── A section title row ───────────────────────────────────────────────────── */
.sec-titlerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── A question that was asked for and left blank ──────────────────────────── */
.question.is-missing{position:relative;padding-left:11px}
.question.is-missing::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:3px;
                             border-radius:3px;background:var(--red)}
.question.is-missing .q-label{color:#fca5a5}

/* ── Sending it ────────────────────────────────────────────────────────────── */
.q-end{padding:8px 0 56px;text-align:center}
.q-submit{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
          max-width:360px;padding:15px 22px;border:0;border-radius:var(--r);cursor:pointer;
          font-family:'Syne',sans-serif;font-size:14.5px;font-weight:700;color:#1a0f00;
          background:linear-gradient(135deg,var(--accent),var(--amber));
          transition:transform .18s ease,box-shadow .18s ease}
.q-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px rgba(244,132,31,.28)}
.q-submit:disabled{opacity:.6;cursor:default}
.q-end-note{font-size:12px;color:var(--faint);margin-top:13px;line-height:1.6;max-width:44ch;
            margin-left:auto;margin-right:auto}
.q-err{margin-top:16px;padding:11px 14px;border-radius:var(--r-sm);text-align:left;
       background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);
       color:#fca5a5;font-size:12.5px;line-height:1.6}
.q-err i{margin-right:6px}

/* ── Done ──────────────────────────────────────────────────────────────────── */
.q-done{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
        padding:20px;background:rgba(7,12,26,.96);
        backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto}
.q-done-card{width:100%;max-width:420px;text-align:center;background:var(--card);
             border:1px solid var(--border);border-radius:var(--r);padding:32px 24px}
.q-done-ico{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:flex;
            align-items:center;justify-content:center;font-size:22px;color:#1a0f00;
            background:linear-gradient(135deg,var(--accent),var(--amber))}
.q-done-card h2{font-family:'Syne',sans-serif;font-size:21px;font-weight:800;color:var(--text);margin-bottom:11px}
.q-done-card p{font-size:13.5px;line-height:1.65;color:var(--muted);margin-bottom:14px}
.q-done-sub{font-size:12px !important;color:var(--faint) !important;margin-bottom:7px !important}
.q-done-link input{width:100%;padding:10px 12px;border-radius:var(--r-sm);background:var(--input-bg);
                   border:1px solid var(--border);color:var(--accent);font-size:11.5px;
                   text-align:center;margin-bottom:18px}
.q-done-btn{display:inline-block;padding:11px 24px;border-radius:var(--r-sm);text-decoration:none;
            font-size:13px;font-weight:700;color:var(--text);background:var(--card2);
            border:1px solid var(--border2)}
.q-done-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── The field for machines ────────────────────────────────────────────────── */
/* Off screen rather than display:none, because some of what this is meant to
   catch skips anything that is hidden outright. */
.q-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

@media (max-width:520px){
  .trade-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px}
  .q-hero{padding:28px 0 20px}
  .q-submit{max-width:none}
}
/* ── hidden has to mean hidden ─────────────────────────────────────────────
   Any display value set by an author stylesheet beats the browser's own rule
   for [hidden], so .question{display:flex} quietly cancelled it. The whole
   conditional question feature was doing its work in JavaScript and then
   having no visible effect, and the finish screen sat on top of the form from
   the moment the page loaded. */
.question[hidden],
.q-done[hidden],
.q-err[hidden] { display: none !important; }

/* ── The way back to wherever they came from ────────────────────────────────
   Quiet on purpose. It is an exit, not an invitation to take it, so it reads
   as a courtesy rather than as competition with the button above it. */
.q-leave      { text-align:center; padding:16px 0 4px; }
.q-leave a    { display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
                color:var(--muted); text-decoration:none; padding:7px 14px; border-radius:50px;
                border:1px solid transparent; transition:color .18s ease,border-color .18s ease; }
.q-leave a:hover { color:var(--accent); border-color:var(--border2); }
.q-leave i    { font-size:11px; }