/* VISION Journey — styles matched to the 29eleven single-page theme (tne design system)
   Palette: blue #94bdf6 / soft-blue #eaf3ff / ink #050505 / orange #ff7a1a / stone #f5f2ec / line #dde5f0
   Type: IBM Plex Sans, bold 800 headings, tight letter-spacing. Pill buttons, 24–34px radii, soft 60px shadow. */
:root{
  --tne-blue:#94bdf6; --tne-soft-blue:#eaf3ff; --tne-muted-blue:#d8e8ff;
  --tne-ink:#050505; --tne-white:#ffffff; --tne-orange:#ff7a1a;
  --tne-stone:#f5f2ec; --tne-line:#dde5f0; --tne-green:#2e7d32; --tne-amber:#a66a00;
  --tne-radius-xl:34px; --tne-radius-lg:24px; --tne-radius-pill:999px;
  --tne-shadow:0 20px 60px rgba(5,5,5,.08);
}
.v-assessment-body{margin:0}
.v-assessment-body, .v-shell, .v-signup-panel,
.v-shell button, .v-signup-panel button, .v-signup-panel input{
  font-family:'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.v-assessment-body{background:linear-gradient(135deg, var(--tne-soft-blue) 0%, #ffffff 62%); color:var(--tne-ink); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh}
.v-shell *, .v-signup-panel *{box-sizing:border-box}

/* ---------- assessment shell ---------- */
.v-shell{max-width:720px; margin:0 auto; padding:22px 18px 70px}
.v-top{display:flex; justify-content:space-between; align-items:center; padding:8px 0 16px}
.v-brand{font-weight:800; font-size:26px; letter-spacing:-0.04em}
.v-brand-big{font-size:40px}
.v-brand-accent{color:var(--tne-orange)}
.v-stage-label{text-transform:uppercase; letter-spacing:.12em; font-size:13px; font-weight:800; color:rgba(5,5,5,.72)}
.v-progress{height:8px; background:rgba(5,5,5,.08); border-radius:var(--tne-radius-pill); overflow:hidden; margin-bottom:24px}
.v-progress-fill{height:100%; background:var(--tne-orange); border-radius:var(--tne-radius-pill); transition:width .3s}
.v-intro{background:var(--tne-white); border:1px solid rgba(5,5,5,.08); padding:16px 20px; border-radius:18px; color:rgba(5,5,5,.72); margin:0 0 18px; font-size:15.5px; font-weight:500}
.v-card{background:var(--tne-white); border:1px solid rgba(5,5,5,.06); border-radius:var(--tne-radius-xl); padding:clamp(26px,4vw,44px); box-shadow:var(--tne-shadow)}
.v-count{font-size:13px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color:var(--tne-orange); margin-bottom:12px}
.v-q{font-size:clamp(22px,3vw,28px); font-weight:800; letter-spacing:-0.03em; line-height:1.16; margin:0 0 22px}
.v-hint{color:rgba(5,5,5,.72); font-size:15px; margin:0 0 16px}
.v-center{text-align:center}

/* likert */
.v-likert{display:flex; flex-direction:column; gap:9px}
.v-opt{display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:var(--tne-white); border:1.5px solid var(--tne-line); border-radius:18px; padding:13px 16px; font-size:16px; font-weight:600; cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease}
.v-opt:hover{border-color:var(--tne-ink); transform:translateY(-1px)}
.v-opt-on{background:var(--tne-ink); color:var(--tne-white); border-color:var(--tne-ink)}
.v-opt-num{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--tne-radius-pill); background:var(--tne-soft-blue); color:var(--tne-ink); font-weight:800; font-size:14px; flex-shrink:0}
.v-opt-on .v-opt-num{background:var(--tne-orange); color:var(--tne-white)}

/* nav + buttons */
.v-nav{margin-top:20px}
.v-back{background:none; border:none; color:rgba(5,5,5,.72); font-size:15px; font-weight:700; padding:6px 0; cursor:pointer}
.v-back:hover{color:var(--tne-orange)}
.v-primary{display:inline-flex; align-items:center; justify-content:center; width:100%; margin-top:22px; min-height:50px; padding:14px 25px; border-radius:var(--tne-radius-pill); background:var(--tne-ink); color:var(--tne-white); border:2px solid var(--tne-ink); font-size:17px; font-weight:800; line-height:1.1; cursor:pointer; transition:transform .18s ease, background .18s ease}
.v-primary:hover{transform:translateY(-1px); background:#222}
.v-disabled{opacity:.45; cursor:not-allowed}
.v-disabled:hover{transform:none; background:var(--tne-ink)}

/* ranking */
.v-ranklist{display:flex; flex-direction:column; gap:9px}
.v-rank{display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; gap:0 13px; text-align:left; background:var(--tne-white); border:1.5px solid var(--tne-line); border-radius:18px; padding:13px 16px; cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease}
.v-rank:hover{border-color:var(--tne-ink); transform:translateY(-1px)}
.v-rank-on{border-color:var(--tne-orange); background:var(--tne-soft-blue)}
.v-rank-badge{grid-row:1/3; align-self:center; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--tne-radius-pill); background:var(--tne-orange); color:var(--tne-white); font-weight:800}
.v-rank:not(.v-rank-on) .v-rank-badge{background:var(--tne-line)}
.v-rank-name{font-weight:800; letter-spacing:-0.02em}
.v-rank-short{font-size:14px; color:rgba(5,5,5,.72)}

/* pairs */
.v-pair{display:flex; flex-direction:column; gap:11px}
.v-pairbtn{background:var(--tne-white); border:1.5px solid var(--tne-line); border-radius:18px; padding:19px 18px; font-size:17px; font-weight:800; letter-spacing:-0.02em; text-align:left; cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease}
.v-pairbtn:hover{border-color:var(--tne-ink); background:var(--tne-soft-blue); transform:translateY(-1px)}

/* compass clusters */
.v-clusters{display:grid; grid-template-columns:1fr 1fr; gap:9px}
@media(max-width:560px){.v-clusters{grid-template-columns:1fr}}
.v-cluster{background:var(--tne-white); border:1.5px solid var(--tne-line); border-radius:16px; padding:11px 13px; font-size:14.5px; font-weight:600; text-align:left; cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease}
.v-cluster:hover{border-color:var(--tne-ink); transform:translateY(-1px)}
.v-cluster-on{background:var(--tne-ink); color:var(--tne-white); border-color:var(--tne-ink)}

/* welcome / done */
.v-welcome{background:var(--tne-white); border:1px solid rgba(5,5,5,.06); border-radius:var(--tne-radius-xl); padding:clamp(32px,5vw,52px); box-shadow:var(--tne-shadow); text-align:center}
.v-welcome h1{font-size:clamp(30px,5vw,40px); font-weight:800; letter-spacing:-0.045em; line-height:1.03; margin:18px 0 14px}
.v-welcome p{margin:0 0 14px; text-align:left; color:rgba(5,5,5,.78)}
.v-verse{font-size:clamp(19px,2.4vw,23px); line-height:1.3; letter-spacing:-0.02em; font-weight:700; color:var(--tne-ink); text-align:center !important}
.v-verse-ref{font-size:13px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color:var(--tne-orange); text-align:center !important}
.v-done-mark{width:78px; height:78px; margin:0 auto 20px; border-radius:var(--tne-radius-pill); background:var(--tne-orange); color:var(--tne-white); font-size:38px; font-weight:800; display:flex; align-items:center; justify-content:center}
.v-done h1{font-size:clamp(28px,4.5vw,38px); font-weight:800; letter-spacing:-0.045em; margin:0 0 14px}
.v-done p{color:rgba(5,5,5,.78)}
.v-spin{width:46px; height:46px; margin:10px auto 22px; border:4px solid var(--tne-line); border-top-color:var(--tne-orange); border-radius:50%; animation:vspin 1s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.v-spin{animation:none}.v-progress-fill,.v-opt,.v-rank,.v-pairbtn,.v-cluster,.v-primary{transition:none}}

/* ---------- signup panel (inside the theme's Start VISION page) ---------- */
.v-signup-panel{margin-left:auto; margin-right:auto; background:var(--tne-white); border:1px solid rgba(5,5,5,.06); border-radius:var(--tne-radius-xl); padding:clamp(28px,5vw,58px); box-shadow:var(--tne-shadow); max-width:800px}
.v-signup-panel label{display:block; font-weight:700; font-size:15.5px; margin:16px 0 8px}
.v-signup-panel label:first-child{margin-top:0}
.v-signup-panel input[type=text], .v-signup-panel input[type=email]{width:100%; min-height:54px; border:1.5px solid var(--tne-line); border-radius:16px; padding:14px 16px; background:var(--tne-white); color:var(--tne-ink); font-size:16px}
.v-signup-panel input:focus{outline:2px solid var(--tne-orange); border-color:var(--tne-orange)}
.l-consent{display:flex; gap:11px; align-items:flex-start; margin-top:18px; font-size:14.5px; color:rgba(5,5,5,.72)}
.l-consent input{margin-top:4px}
.v-signup-panel .v-primary{width:auto; min-width:280px}
.l-privacy{font-size:13px; color:rgba(5,5,5,.62); margin-top:16px}
.l-msg{margin-top:18px; border-radius:18px; padding:14px 16px; font-weight:700; display:none}
.l-msg-ok{background:#eaf7ec; color:#1b5e20; border:1px solid rgba(46,125,50,.25); display:block}
.l-msg-err{background:#fff4e5; color:#8a4f00; border:1px solid rgba(166,106,0,.25); display:block}
.l-linkbox{margin-top:10px; word-break:break-all; font-size:14px; font-weight:500; background:var(--tne-white); border:1.5px solid var(--tne-line); border-radius:16px; padding:12px 14px}
.l-inline-action{font-weight:800; color:var(--tne-ink); text-decoration:none; border-bottom:2px solid var(--tne-orange)}
.l-inline-action:hover{color:var(--tne-orange)}

/* ===== 2.0: language toggle, scenario + env buttons ===== */
.v-langtoggle{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px}
.v-langbtn{border:2px solid #dde5f0;background:#fff;border-radius:999px;padding:7px 18px;font:600 13.5px/1 "IBM Plex Sans",sans-serif;color:#474747;cursor:pointer}
.v-langbtn.on{background:#050505;border-color:#050505;color:#fff}
.v-scenlist{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.v-scenbtn{text-align:left;border:2px solid #dde5f0;background:#fff;border-radius:18px;padding:14px 16px;font:500 15px/1.5 "IBM Plex Sans",sans-serif;color:#050505;cursor:pointer;transition:border-color .15s, background .15s}
.v-scenbtn:hover{border-color:#94bdf6;background:#eaf3ff}

/* ===== signup: two-column layout with guided side panel ===== */
.v-signup-wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:26px;width:100%;max-width:1140px;align-items:start}
.v-signup-panel{width:100%}
.v-signup-side{background:#eaf3ff;border-radius:24px;padding:24px 22px;position:sticky;top:20px}
.v-side-kicker{font:800 11px/1 "IBM Plex Sans",sans-serif;letter-spacing:3px;text-transform:uppercase;color:#94bdf6;margin-bottom:16px}
.v-side-step{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:16px;padding:12px 14px;margin-bottom:8px}
.v-side-step--now{border:2px solid #050505}
.v-side-num{flex:0 0 26px;width:26px;height:26px;border-radius:13px;background:#050505;color:#fff;font:800 13px/26px "IBM Plex Sans",sans-serif;text-align:center}
.v-side-step--now .v-side-num{background:#ff7a1a}
.v-side-step strong{display:block;font:800 14.5px/1.3 "IBM Plex Sans",sans-serif;color:#050505}
.v-side-step small{display:block;font:400 12.5px/1.5 "IBM Plex Sans",sans-serif;color:#474747;margin-top:2px}
.v-side-trust{font:600 12.5px/1.5 "IBM Plex Sans",sans-serif;color:#474747;margin-top:14px;padding-top:12px;border-top:1px solid #dde5f0}
@media (max-width:860px){.v-signup-wrap{grid-template-columns:1fr}.v-signup-side{position:static}}

/* ============================================================
   VISION 2.0 assessment UI — authoritative block.
   Overrides v1-era selectors above (markup changed in 2.0).
   ============================================================ */

/* progress: wrapper > track > fill, + % label */
.v-progress{display:flex;align-items:center;gap:12px;height:auto;background:none;overflow:visible;margin-bottom:20px}
.v-progress-track{flex:1;height:10px;background:rgba(5,5,5,.08);border-radius:999px;overflow:hidden}
.v-progress-fill{height:100%;background:var(--tne-orange);border-radius:999px;transition:width .3s ease}
.v-progress-label{font:800 12.5px/1 "IBM Plex Sans",sans-serif;color:var(--tne-orange);min-width:38px;text-align:right}

.v-stagechip{display:inline-block;background:var(--tne-soft-blue);color:var(--tne-ink);border-radius:999px;padding:8px 16px;font:800 11.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}

.v-kicker{font:800 12px/1 "IBM Plex Sans",sans-serif;letter-spacing:.35em;text-transform:uppercase;color:var(--tne-orange);margin-bottom:6px}

/* answer buttons (likert) — big, tappable, obvious states */
.v-likerts{display:flex;flex-direction:column;gap:10px;margin:4px 0 6px}
.v-likert{display:block;width:100%;flex-direction:row;text-align:left;background:var(--tne-white);border:2px solid var(--tne-line);border-radius:16px;padding:15px 18px;font:600 16px/1.35 "IBM Plex Sans",sans-serif;color:var(--tne-ink);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.v-likert:hover{border-color:var(--tne-ink);background:var(--tne-soft-blue);transform:translateY(-1px)}
.v-likert.on{border-color:var(--tne-orange);background:#fff4e5;font-weight:800}
@media (min-width:700px){
  .v-likerts{flex-direction:row;flex-wrap:nowrap}
  .v-likert{flex:1 1 0;min-width:0;text-align:center;padding:16px 10px;font-size:15px}
}

/* nav + generic buttons */
.v-nav{margin-top:22px;display:flex;justify-content:flex-start}
.v-btn{display:inline-block;border-radius:999px;padding:14px 30px;font:800 15px/1 "IBM Plex Sans",sans-serif;cursor:pointer;border:2px solid transparent;transition:background .15s,border-color .15s,transform .15s}
.v-btn:hover{transform:translateY(-1px)}
.v-btn-primary{background:var(--tne-ink);color:#fff}
.v-btn-primary:hover{background:#1f1f1f}
.v-btn-ghost{background:transparent;color:var(--tne-ink);border-color:var(--tne-line)}
.v-btn-ghost:hover{border-color:var(--tne-ink);background:var(--tne-soft-blue)}
.v-center .v-btn{margin:6px 5px}

/* values top-5 ranking */
.v-rankgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 2px 18px}
.v-rankcard{position:relative;text-align:left;background:var(--tne-white);border:2px solid var(--tne-line);border-radius:18px;padding:16px 16px 14px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.v-rankcard:hover{border-color:var(--tne-ink);transform:translateY(-1px)}
.v-rankcard.on{border-color:var(--tne-orange);background:#fff4e5}
.v-rankcard strong{display:block;font:800 16px/1.25 "IBM Plex Sans",sans-serif;margin-bottom:5px}
.v-rankcard small{display:block;color:rgba(5,5,5,.65);font:400 13px/1.45 "IBM Plex Sans",sans-serif}
.v-ranknum{position:absolute;top:-11px;right:-11px;width:28px;height:28px;border-radius:14px;background:var(--tne-orange);color:#fff;font:800 14px/28px "IBM Plex Sans",sans-serif;text-align:center;box-shadow:0 4px 12px rgba(5,5,5,.18)}
@media (max-width:640px){.v-rankgrid{grid-template-columns:1fr}}

/* either/or (pairs + environment) */
.v-pairwrap{display:flex;align-items:stretch;gap:12px;margin:8px 0 10px}
.v-pairwrap .v-pairbtn{flex:1 1 0;min-width:0}
.v-vs{align-self:center;flex:0 0 auto;font:800 12px/1 "IBM Plex Sans",sans-serif;letter-spacing:.1em;color:rgba(5,5,5,.4);text-transform:uppercase}
@media (max-width:640px){.v-pairwrap{flex-direction:column}.v-vs{align-self:center;padding:2px 0}}

/* compass 25-option pick-3 */
.v-complist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:6px 0 14px}
.v-compbtn{text-align:left;background:var(--tne-white);border:2px solid var(--tne-line);border-radius:14px;padding:12px 14px;font:600 14px/1.4 "IBM Plex Sans",sans-serif;color:var(--tne-ink);cursor:pointer;transition:border-color .15s,background .15s}
.v-compbtn:hover{border-color:var(--tne-ink);background:var(--tne-soft-blue)}
.v-compbtn.on{border-color:var(--tne-orange);background:#fff4e5;font-weight:800}
@media (max-width:640px){.v-complist{grid-template-columns:1fr}}

/* submitting spinner */
.v-spinner{width:46px;height:46px;border:5px solid var(--tne-line);border-top-color:var(--tne-orange);border-radius:50%;margin:8px auto 22px;animation:v2spin .9s linear infinite}
@keyframes v2spin{to{transform:rotate(360deg)}}

.v-verse cite{display:block;font-style:normal;font:800 12px/1 "IBM Plex Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--tne-orange);margin-top:10px}

@media (prefers-reduced-motion:reduce){.v-spinner{animation:none}.v-likert,.v-btn,.v-rankcard,.v-compbtn{transition:none}}

/* ===== signup success modal ===== */
.v-modal-overlay{position:fixed;inset:0;background:rgba(5,5,5,.55);display:flex;align-items:center;justify-content:center;z-index:99999;padding:20px;animation:v2fade .18s ease}
.v-modal{position:relative;background:#fff;border-radius:26px;max-width:560px;width:100%;padding:34px 30px 28px;box-shadow:0 30px 90px rgba(5,5,5,.35);font-family:"IBM Plex Sans",sans-serif;text-align:center;animation:v2pop .22s ease}
.v-modal-close{position:absolute;top:12px;right:16px;background:none;border:0;font-size:26px;line-height:1;color:rgba(5,5,5,.45);cursor:pointer;padding:6px}
.v-modal-close:hover{color:#050505}
.v-modal-check{width:54px;height:54px;border-radius:27px;background:#2e7d32;color:#fff;font-size:28px;font-weight:800;line-height:54px;margin:0 auto 14px}
.v-modal-title{font:800 24px/1.15 "IBM Plex Sans",sans-serif;letter-spacing:-.03em;color:#050505;margin:0 0 8px}
.v-modal-sub{font:500 14.5px/1.55 "IBM Plex Sans",sans-serif;color:#474747;margin:0 0 16px}
.v-modal-linkbox{background:#eaf3ff;border-radius:14px;padding:13px 15px;font:500 12.5px/1.5 Consolas,Menlo,monospace;color:#171a1f;word-break:break-all;text-align:left;margin-bottom:16px}
.v-modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.v-modal-btn{display:inline-block;border-radius:999px;padding:13px 26px;font:800 14.5px/1 "IBM Plex Sans",sans-serif;cursor:pointer;text-decoration:none;border:2px solid transparent;transition:transform .15s,background .15s,border-color .15s}
.v-modal-btn:hover{transform:translateY(-1px)}
.v-modal-btn-primary{background:#050505;color:#fff}
.v-modal-btn-primary:hover{background:#1f1f1f;color:#fff}
.v-modal-btn-ghost{background:#fff;color:#050505;border-color:#dde5f0}
.v-modal-btn-ghost:hover{border-color:#050505}
.v-modal-note{font:400 12px/1.55 "IBM Plex Sans",sans-serif;color:#474747;margin:16px 0 0}
@keyframes v2fade{from{opacity:0}to{opacity:1}}
@keyframes v2pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
@media (max-width:520px){.v-modal{padding:28px 20px 22px}.v-modal-actions{flex-direction:column}.v-modal-btn{width:100%;box-sizing:border-box}}
@media (prefers-reduced-motion:reduce){.v-modal-overlay,.v-modal{animation:none}}

/* submit-button spinner while the link is created */
.v-btnspin{display:inline-block;width:15px;height:15px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;margin-right:9px;vertical-align:-2px;animation:v2spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.v-btnspin{animation:none}}

/* ============================================================
   Assessment polish: contained width, chip placement, colour
   ============================================================ */

/* contain the journey — no more edge-to-edge cards on wide screens */
#vision-app{max-width:920px;margin:0 auto;padding:28px 18px 60px;box-sizing:border-box}

/* a bit of life behind the card */
.v-assessment-body{background:linear-gradient(160deg,#eaf3ff 0%,#f5f2ec 55%,#fff4e5 100%);background-attachment:fixed}

/* card gets a signature gradient top bar */
.v-card{position:relative;overflow:hidden}
.v-card::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:linear-gradient(90deg,#ff7a1a 0%,#ffb26b 45%,#94bdf6 100%)}

/* stage chip sits right, tucked under the progress % */
.v-stagechip{display:block;width:fit-content;margin:0 0 16px auto;background:#050505;color:#ffffff}

/* progress fill warms up */
.v-progress-fill{background:linear-gradient(90deg,#ff7a1a,#ffb26b)}

/* intro note becomes a colour block instead of a white outline */
.v-intro{background:var(--tne-soft-blue);border:0;color:#171a1f}

/* interactive pops */
.v-btn-primary:hover{background:#ff7a1a}
.v-likert:hover{border-color:#ff7a1a;background:#fff4e5;transform:translateY(-1px)}
.v-rankcard:hover{border-color:#94bdf6;background:#eaf3ff}
.v-compbtn:hover{border-color:#94bdf6;background:#eaf3ff}
.v-pairbtn:hover{border-color:#ff7a1a;background:#fff4e5}