/* ================= ElectroGlide: two data interactions added on top of the original page ================= */

/* ---- What users asked for: pick a priority, the quote behind it appears ---- */
.eg-ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:center}
.eg-ask .txt h2{font-size:clamp(26px,3vw,38px);line-height:1.08;margin-bottom:16px}
.eg-ask .txt p{color:var(--ink-2);font-size:17px;max-width:46ch;margin:0 0 22px}
.eg-ask .chips{display:flex;flex-wrap:wrap;gap:8px}
.eg-ask .chips button{border:1px solid var(--line);background:transparent;color:var(--ink);font:600 13px var(--display);padding:10px 16px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.eg-ask .chips button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.eg-ask .chips button:hover:not(.on){border-color:var(--ink)}
.eg-ask .card{background:var(--tile);border-radius:20px;padding:30px 32px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.eg-ask .card .n{font:600 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.eg-ask .card q{display:block;font:italic 500 clamp(20px,2.2vw,28px)/1.3 var(--display);letter-spacing:-.02em;color:var(--ink);quotes:"“" "”";margin:16px 0 22px;transition:opacity .35s,transform .35s}
.eg-ask .card .b b{display:block;font:600 18px var(--display);letter-spacing:-.015em;color:var(--ink);margin-bottom:6px}
.eg-ask .card .b p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.45}
.eg-ask .card.sw q,.eg-ask .card.sw .b{opacity:0;transform:translateY(8px)}
.eg-ask .card .b{transition:opacity .35s .05s,transform .35s .05s}
.eg-ask .card .bar{position:absolute;left:32px;right:32px;bottom:18px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.eg-ask .card .bar i{display:block;height:100%;width:0;background:var(--ink)}
.eg-ask.auto .card .bar i{animation:egfill var(--t,3600ms) linear}
@keyframes egfill{from{width:0}to{width:100%}}

/* ---- Assist follows the push: drag the assist level, the numbers follow ---- */
.eg-assist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:center}
.eg-assist .txt h2{font-size:clamp(26px,3vw,38px);line-height:1.08;margin-bottom:16px}
.eg-assist .txt p{color:var(--ink-2);font-size:17px;max-width:46ch;margin:0 0 12px}
.eg-assist .panel{background:var(--tile);border-radius:20px;padding:26px 28px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.eg-assist .ring{width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--cb-accent) calc(var(--p,65)*1%),var(--line) 0);display:grid;place-items:center;position:relative;transition:background .15s}
.eg-assist .ring::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--tile)}
.eg-assist .ring b{position:relative;z-index:1;font:600 21px var(--display);letter-spacing:-.02em}
.eg-assist .rl{font:600 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.eg-assist .rv{font:600 24px/1.2 var(--display);letter-spacing:-.02em;margin:6px 0 2px}
.eg-assist .rv span{color:var(--cb-accent);margin-left:8px}
.eg-assist .range{margin:12px 0 6px}
.eg-assist .split{grid-column:1/-1;margin-top:6px}
.eg-assist .split .lbl{display:flex;justify-content:space-between;font:600 12px var(--display);color:var(--ink-2);margin-bottom:8px}
.eg-assist .split .track{height:12px;border-radius:6px;overflow:hidden;display:flex;background:var(--line)}
.eg-assist .split .track i{display:block;height:100%;transition:width .25s cubic-bezier(.2,.8,.2,1)}
.eg-assist .split .track .you{background:var(--ink);width:calc(100% / (1 + var(--p,65) / 100))}
.eg-assist .split .track .help{background:var(--cb-accent);flex:1}
.eg-assist dl{grid-column:1/-1;margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:14px;border-top:1px solid var(--line);padding-top:16px}
.eg-assist dt{font:600 14px var(--display);color:var(--ink);white-space:nowrap}
.eg-assist dd{margin:0;color:var(--ink-2)}
.eg-assist dd b{color:var(--ink);font-weight:600}
@media(max-width:900px){
  .eg-ask,.eg-assist{grid-template-columns:1fr}
  .eg-ask .card{min-height:0;padding:24px 22px 34px}
  .eg-ask .card .bar{left:22px;right:22px;bottom:14px}
  .eg-assist .panel{grid-template-columns:1fr;gap:18px}
  .eg-assist dl{grid-template-columns:1fr;gap:4px 0}
  .eg-assist dd{margin-bottom:8px}
}