:root{
  --ink:#070a0c;--ink-soft:#10171a;--ink-blue:#304956;--risk:#14232b;--risk-2:#192a33;
  --paper:#edf1f2;--white:#f6f7f5;--muted:#96a6ae;--slate:#7f9ca8;
  --accent:#c3e33d;--accent-bright:#c9f02a;--line:rgba(255,255,255,.14);
  --radius:24px;--ease:cubic-bezier(.2,.8,.2,1);
  font-family:"Manrope","Segoe UI",Arial,sans-serif;color:var(--white);background:var(--ink)
}
*{box-sizing:border-box} html{background:var(--ink)}
body{margin:0;min-height:100vh;color:var(--white);background:
 radial-gradient(circle at 72% 28%,rgba(127,156,168,.18),transparent 34rem),
 linear-gradient(135deg,#0b1114 0%,#14232b 54%,#0b1114 100%);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.45;background:linear-gradient(90deg,transparent 0 9%,rgba(255,255,255,.018) 9.05% 9.12%,transparent 9.17% 100%)}
#app{min-height:100vh;display:grid;place-items:center;padding:42px 28px;position:relative}
#app:before{content:"RIZIKOVÉ ČÍSLO";position:fixed;top:30px;left:42px;font:700 11px/1 "Montserrat","Segoe UI",Arial,sans-serif;letter-spacing:.17em;color:var(--accent-bright);z-index:5}
#app:after{content:"FINANCE A INVESTICE V SOUVISLOSTECH";position:fixed;top:30px;right:42px;font:700 10px/1 "Montserrat","Segoe UI",Arial,sans-serif;letter-spacing:.12em;color:rgba(246,247,245,.48);z-index:5}
.card{width:min(100%,1040px);min-height:650px;margin:32px auto 0;padding:64px 72px 52px;border:1px solid rgba(255,255,255,.12);border-radius:30px;background:rgba(6,10,12,.42);backdrop-filter:blur(8px);box-shadow:0 30px 90px rgba(0,0,0,.22);position:relative;overflow:hidden}
.card:before{content:"";position:absolute;width:430px;aspect-ratio:1;border:1px solid rgba(195,227,61,.18);border-radius:50%;right:-255px;top:-265px;pointer-events:none}
.card:after{content:"";position:absolute;width:310px;aspect-ratio:1;border:1px solid rgba(127,156,168,.18);border-radius:50%;right:-195px;top:-205px;pointer-events:none}
h1,h2,.big,.metric,.btn,.choice,.pill,label{font-family:"Montserrat","Segoe UI",Arial,sans-serif}
h1{font-size:clamp(44px,5vw,66px);line-height:1.04;letter-spacing:-.045em;font-weight:500;margin:64px 0 28px;max-width:760px}
h2{font-size:clamp(34px,3.5vw,48px);line-height:1.06;letter-spacing:-.04em;font-weight:550;margin:20px 0 26px;max-width:800px}
h1:after,h2:after{content:"";display:block;width:78px;height:2px;background:var(--accent-bright);margin-top:28px}
p{line-height:1.7;color:rgba(246,247,245,.88);font-size:17px;max-width:760px}.muted{color:var(--muted)}
.row{display:flex;gap:34px;flex-wrap:wrap}.field{margin:28px 0}.field label{display:block;font-weight:700;margin-bottom:10px;color:var(--white);font-size:13px;letter-spacing:.025em}
input,select{font:inherit;color:var(--white);background:rgba(255,255,255,.055);padding:15px 17px;border:1px solid rgba(255,255,255,.16);border-radius:0;max-width:100%;outline:none;transition:border-color .2s var(--ease),background .2s var(--ease)}
input:hover,select:hover{border-color:rgba(255,255,255,.3)} input:focus,select:focus{border-color:var(--accent-bright);background:rgba(255,255,255,.075)} select option{background:#10171a;color:var(--white)} input[type=number]{width:260px}
input[type=range]{width:100%;padding:0;border:0;background:transparent;accent-color:var(--accent-bright);box-shadow:none;cursor:pointer}
.btn{min-height:56px;border:1px solid transparent;border-radius:999px;padding:0 28px;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.07em;cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}.btn:hover{transform:translateY(-2px)}
.primary{background:linear-gradient(90deg,#d2ea48,#c3df3f);color:#0b0e0d}.primary:hover{background:var(--accent-bright)}
.secondary{background:transparent;color:rgba(246,247,245,.68);border-color:rgba(255,255,255,.2)}.secondary:hover{color:var(--white);border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.035)}
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.09)}
.big{font-size:clamp(100px,15vw,164px);line-height:.88;font-weight:600;letter-spacing:-.07em;color:var(--accent-bright);text-shadow:0 0 60px rgba(195,227,61,.12)}.metric{font-size:36px;font-weight:650;letter-spacing:-.035em}
.bar{height:340px;width:142px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;position:relative;overflow:hidden;margin:28px auto;box-shadow:inset 0 0 32px rgba(0,0,0,.22)}
.barfill{position:absolute;bottom:0;width:100%;background:linear-gradient(180deg,#d2ea48,#c3df3f);box-shadow:0 -10px 45px rgba(195,227,61,.18)}
.scale{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);margin-top:10px}.choices{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:28px 0 14px}
.choice{padding:15px 6px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);border-radius:999px;cursor:pointer;text-align:center;font-weight:700;transition:.2s var(--ease)}.choice:hover{border-color:var(--slate);background:rgba(127,156,168,.09)}.choice.sel{border-color:var(--accent-bright);background:var(--accent-bright);color:var(--ink);box-shadow:0 0 34px rgba(195,227,61,.12)}
.result{text-align:center;padding-top:40px;position:relative}.result:before{content:"";position:absolute;width:430px;aspect-ratio:1;border:1px solid rgba(195,227,61,.32);border-radius:50%;left:50%;top:40%;transform:translate(-50%,-50%);pointer-events:none}.result h1:after,.result h2:after{margin-left:auto;margin-right:auto}.result .muted{text-transform:uppercase;letter-spacing:.18em;font-family:Montserrat,Arial,sans-serif;font-size:11px;font-weight:700}.result>*{position:relative;z-index:1}
.debug{margin-top:42px;background:rgba(3,6,7,.55);padding:22px;border:1px dashed rgba(127,156,168,.35);border-radius:14px;color:#9ba8ad;font-family:monospace;font-size:13px;text-align:left;white-space:pre-wrap}.pill{display:inline-block;padding:11px 16px;border-radius:999px;background:rgba(127,156,168,.08);border:1px solid rgba(127,156,168,.28);margin:4px;color:#dfe5e7;font-size:12px}.hidden{display:none}
.horizon-row{display:grid;grid-template-columns:minmax(220px,1fr) 170px auto;gap:16px;align-items:center}.amount-input{width:170px!important;text-align:right}.allocation{margin:32px 0 8px;padding:17px 19px;border-radius:0;background:rgba(127,156,168,.08);border-left:4px solid var(--slate);color:#d3dcdf;font-weight:700}.allocation.done{background:rgba(195,227,61,.07);border-left-color:var(--accent-bright);color:var(--accent-bright)}.allocation.over{background:rgba(201,144,121,.07);border-left-color:#c99079;color:#e2b5a2}
@media(max-width:700px){#app{padding:0}#app:before{top:22px;left:22px}#app:after{display:none}.card{margin:0;min-height:100vh;border-radius:0;padding:84px 24px 34px;border-left:0;border-right:0}.card:before,.card:after{opacity:.55}h1{font-size:42px;margin-top:36px}h2{font-size:32px}.big{font-size:104px}.horizon-row{grid-template-columns:1fr 128px auto}.horizon-row input[type=range]{grid-column:1/-1}.amount-input{width:128px!important}.choices{grid-template-columns:repeat(5,1fr)}.nav{margin-top:34px}.btn{padding:0 18px;font-size:11px}.row{gap:22px}}

/* v1.4 – snazší ovládání časové mapy */
.horizon-slider{height:32px!important;appearance:none;-webkit-appearance:none;background:transparent!important;touch-action:pan-y}
.horizon-slider::-webkit-slider-runnable-track{height:7px;border-radius:999px;background:linear-gradient(90deg,var(--accent-bright) 0 var(--fill,0%),rgba(255,255,255,.24) var(--fill,0%) 100%);border:1px solid rgba(255,255,255,.22)}
.horizon-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--accent-bright);border:5px solid rgba(7,10,12,.75);box-shadow:0 0 0 3px rgba(201,240,42,.22);margin-top:-9px;cursor:grab}
.horizon-slider:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}
.horizon-slider::-moz-range-track{height:7px;border-radius:999px;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.22)}
.horizon-slider::-moz-range-progress{height:7px;border-radius:999px;background:var(--accent-bright)}
.horizon-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent-bright);border:5px solid rgba(7,10,12,.75);box-shadow:0 0 0 3px rgba(201,240,42,.22);cursor:grab}
.amount-input{font-variant-numeric:tabular-nums}

/* v1.6 – ilustrované faktické obrazovky */
.illustrated-screen{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.95fr);gap:44px;align-items:center;min-height:430px}
.screen-copy{min-width:0;position:relative;z-index:2}
.screen-art{display:flex;align-items:center;justify-content:center;min-width:0;position:relative;z-index:1}
.screen-art img{display:block;width:min(100%,440px);height:auto;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.12))}
.field-help{margin-top:9px;color:var(--muted);font-size:13px;line-height:1.45}
@media(max-width:850px){.illustrated-screen{grid-template-columns:1fr;gap:12px}.screen-art{order:-1;justify-content:flex-end;max-height:210px}.screen-art img{width:min(52vw,260px);max-height:210px}.screen-copy h2{margin-top:0}}
@media(max-width:560px){.screen-art{display:none}}

/* v1.7 – cíle a investiční zkušenost jako grafické volby */
.onboarding-art-screen{grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);align-items:center}
.onboarding-art-screen .screen-art img{width:min(100%,390px)}
.option-grid{display:grid;gap:12px;margin-top:24px}
.goals-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.experience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.option-card{position:relative;min-height:142px;padding:18px 16px 16px;text-align:left;color:var(--white);background:rgba(255,255,255,.035);border:1px solid rgba(127,156,168,.28);border-radius:12px;cursor:pointer;font:inherit;transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
.option-card:hover{transform:translateY(-2px);border-color:rgba(195,227,61,.58);background:rgba(255,255,255,.052)}
.option-card.selected{border-color:var(--accent-bright);background:linear-gradient(145deg,rgba(195,227,61,.075),rgba(127,156,168,.035));box-shadow:inset 0 0 0 1px rgba(195,227,61,.28),0 10px 28px rgba(0,0,0,.12)}
.option-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:13px;border-radius:50%;background:rgba(127,156,168,.12);color:var(--accent-bright);font:700 19px/1 Montserrat,Arial,sans-serif}
.option-card strong{display:block;padding-right:24px;font:700 13px/1.3 Montserrat,Arial,sans-serif;letter-spacing:0}
.option-card small{display:block;margin-top:7px;color:#aebbc1;font-size:12px;line-height:1.4}
.option-check,.option-radio{position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #b7c9d1;color:transparent;font:900 13px/1 Arial,sans-serif}
.option-card.selected .option-check{background:var(--accent-bright);border-color:var(--accent-bright);color:#071014}
.option-card.selected .option-radio{border:6px solid var(--accent-bright);background:#071014}
@media(max-width:980px){.onboarding-art-screen{grid-template-columns:1fr}.onboarding-art-screen .screen-art{display:none}.goals-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.goals-grid,.experience-grid{grid-template-columns:1fr 1fr}.option-card{min-height:130px}}
@media(max-width:480px){.goals-grid,.experience-grid{grid-template-columns:1fr}}


/* v1.8 – karty: čisté ikony, lepší kompozice a typografické vazby */
.keep{white-space:nowrap}
.choice-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.82fr);gap:54px;align-items:center;min-height:470px}
.choice-main{min-width:0;position:relative;z-index:2}
.choice-art{min-width:0;display:flex;align-items:center;justify-content:center;align-self:stretch}
.choice-art img{display:block;width:min(100%,390px);height:auto;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.12))}
.experience-layout .choice-art{padding-top:90px;padding-bottom:28px}
.experience-layout .choice-art img{width:min(100%,360px)}
.experience-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.experience-grid .option-card{min-height:145px}
.goals-layout{grid-template-columns:minmax(0,1.48fr) minmax(280px,.72fr);align-items:center}
.goals-layout .choice-art{padding-top:72px}
.goals-layout .choice-art img{width:min(100%,350px)}
.goals-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.goals-grid .option-card{min-height:118px}
.option-icon svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.option-card.selected .option-icon{background:rgba(195,227,61,.13)}
@media(max-width:980px){.choice-layout{grid-template-columns:1fr}.choice-art{display:none}.goals-grid,.experience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.goals-grid,.experience-grid{grid-template-columns:1fr}.keep{white-space:normal}}

/* v1.9 – trojice CI obdélníků nad nadpisem na každé obrazovce */
.top-bars{display:flex;align-items:center;gap:7px;margin:2px 0 18px;position:relative;z-index:3}
.top-bars span{display:block;width:38px;height:7px;border-radius:999px;background:rgba(127,156,168,.22)}
.top-bars span:first-child{width:54px;background:var(--accent-bright);box-shadow:0 0 18px rgba(201,240,42,.10)}
.top-bars + h1,.top-bars + h2{margin-top:0}
.top-bars + .illustrated-screen .screen-copy h2,.top-bars + .choice-layout h2{margin-top:0}
@media(max-width:700px){.top-bars{margin-top:0;margin-bottom:18px}.top-bars span{width:30px;height:6px}.top-bars span:first-child{width:44px}}


/* v1.10 – kompaktní cíle 3 × 3 + dominantnější ilustrace */
.goals-layout{grid-template-columns:minmax(0,1.72fr) minmax(320px,.78fr);gap:48px;align-items:center}
.goals-layout .choice-main{align-self:center}
.goals-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.goals-grid .goal-card{min-height:118px;padding:17px 16px 15px;display:flex;flex-direction:column;justify-content:flex-start}
.goals-grid .goal-card .option-icon{margin-bottom:13px}
.goals-grid .goal-card strong{font-size:14px;line-height:1.28;padding-right:18px;margin-top:auto}
.goals-grid .goal-card .option-check{opacity:0;transform:scale(.72);border-color:transparent;background:transparent;transition:opacity .16s var(--ease),transform .16s var(--ease)}
.goals-grid .goal-card.selected .option-check{opacity:1;transform:scale(1);background:var(--accent-bright);border-color:var(--accent-bright);color:#071014}
.goals-layout .goals-art{padding-top:34px;padding-bottom:10px;align-items:center}
.goals-layout .goals-art img{width:min(100%,430px)}
@media(max-width:1120px){.goals-layout{grid-template-columns:minmax(0,1.65fr) minmax(270px,.7fr);gap:30px}.goals-layout .goals-art img{width:min(100%,360px)}}
@media(max-width:980px){.goals-layout{grid-template-columns:1fr}.goals-layout .goals-art{display:none}.goals-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.goals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.goals-grid{grid-template-columns:1fr}}
/* v1.11 — vlastní ikonografie odvozená z vizuálního jazyka případových studií,
   převedená pro tmavý podklad aplikace. */
.option-icon{
  width:44px;height:44px;margin-bottom:12px;border-radius:0;background:transparent!important;
  color:inherit;display:grid;place-items:center;
}
.option-icon svg{width:38px;height:38px;overflow:visible;fill:none;stroke:none}
.option-icon svg .i-main{fill:none;stroke:#dce8ee;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.option-icon svg .i-muted{fill:none;stroke:#8fa8b5;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.option-icon svg .i-accent{fill:none;stroke:#c9f02a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.option-icon svg .i-accent-fill{fill:#c9f02a;stroke:none}
.goal-card .option-icon svg{width:40px;height:40px}
.option-card.selected .option-icon{background:transparent!important}

/* v1.12 – stabilní rám aplikace mezi obrazovkami */
@media (min-width:701px){
  .card{
    height:860px;
    min-height:860px;
    max-height:860px;
    display:flex;
    flex-direction:column;
  }
  .card > .nav{
    margin-top:auto;
    flex:0 0 auto;
  }
  .card > .illustrated-screen,
  .card > .choice-layout{
    flex:1 1 auto;
    min-height:0;
  }
  .card > .result{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
  }
  .card > .result > .nav{
    margin-top:auto;
  }
}

/* Na nižších desktopových oknech zůstává rám stejně proporční,
   ale aplikace se může přirozeně posouvat ve viewportu. */
@media (min-width:701px) and (max-height:940px){
  #app{place-items:start center;}
}

/* v1.13 – compact desktop layout: menší stabilní rám + obsah komponovaný do něj */
@media (min-width:701px){
  #app{padding:28px 24px;}
  .card{
    width:min(100%,960px);
    height:740px;
    min-height:740px;
    max-height:740px;
    margin:24px auto 0;
    padding:42px 54px 38px;
    border-radius:26px;
  }
  h1{font-size:48px;line-height:1.04;margin:42px 0 22px;max-width:700px}
  h2{font-size:36px;line-height:1.07;margin:14px 0 20px;max-width:720px}
  h1:after,h2:after{width:68px;margin-top:20px}
  p{font-size:15px;line-height:1.6;max-width:700px}
  .top-bars{margin:0 0 15px}.top-bars span{height:6px;width:34px}.top-bars span:first-child{width:48px}
  .field{margin:18px 0}.field label{margin-bottom:7px;font-size:12px}
  input,select{padding:12px 14px;font-size:14px} input[type=number]{width:230px}
  .btn{min-height:48px;padding:0 24px;font-size:11px}
  .nav{margin-top:28px;padding-top:20px}

  .illustrated-screen{grid-template-columns:minmax(0,1fr) minmax(280px,.78fr);gap:34px;min-height:0;align-items:center}
  .screen-art img{width:min(100%,330px);max-height:330px}
  .field-help{margin-top:6px;font-size:12px}

  .horizon-field{margin:15px 0}
  .horizon-row{grid-template-columns:minmax(220px,1fr) 145px auto;gap:13px}
  .amount-input{width:145px!important}
  .horizon-slider{height:28px!important}
  .horizon-slider::-webkit-slider-runnable-track{height:6px}
  .horizon-slider::-webkit-slider-thumb{width:21px;height:21px;border-width:4px;margin-top:-8px}
  .horizon-slider::-moz-range-track,.horizon-slider::-moz-range-progress{height:6px}
  .horizon-slider::-moz-range-thumb{width:21px;height:21px;border-width:4px}
  .allocation{margin:20px 0 4px;padding:12px 15px;font-size:13px}

  .choice-layout{min-height:0;gap:32px}
  .goals-layout{grid-template-columns:minmax(0,1.72fr) minmax(235px,.68fr);gap:28px}
  .goals-grid{gap:9px;margin-top:17px}
  .goals-grid .goal-card{min-height:91px;padding:11px 12px 10px}
  .goals-grid .goal-card .option-icon{margin-bottom:6px}
  .goals-grid .goal-card strong{font-size:11.5px;line-height:1.22;padding-right:14px}
  .goals-grid .goal-card small{display:none}
  .goal-card .option-icon svg{width:32px;height:32px}
  .option-icon{width:34px;height:34px;margin-bottom:8px}
  .option-check,.option-radio{right:10px;top:10px;width:18px;height:18px}
  .goals-layout .goals-art{padding:16px 0 0}.goals-layout .goals-art img{width:min(100%,285px)}

  .experience-layout{grid-template-columns:minmax(0,1.35fr) minmax(245px,.72fr);gap:34px}
  .experience-grid{gap:10px;margin-top:18px}
  .experience-grid .option-card{min-height:112px;padding:14px}
  .experience-grid .option-card strong{font-size:12px}.experience-grid .option-card small{font-size:11px;margin-top:5px}
  .experience-layout .choice-art{padding:40px 0 10px}.experience-layout .choice-art img{width:min(100%,285px)}
}

@media (min-width:701px) and (max-height:820px){
  #app{place-items:start center;padding-top:16px}
  .card{margin-top:18px}
}


/* v1.14 – stabilní hlavička/patička a opticky vyvážený obsah v kompaktním rámu */
@media (min-width:701px){
  .card{
    position:relative;
    padding:40px 54px 106px;
    display:block;
  }
  .top-bars{
    height:8px;
    margin:0;
    position:relative;
    z-index:4;
  }
  .top-bars span{height:6px;width:34px}
  .top-bars span:first-child{width:48px}
  .card > .nav,
  .card > .result > .nav{
    position:absolute;
    left:54px;right:54px;bottom:36px;
    margin:0;
    padding-top:20px;
    min-height:70px;
    background:linear-gradient(180deg,rgba(7,10,12,0),rgba(7,10,12,.18) 24%,rgba(7,10,12,.22));
    z-index:8;
  }
  .card > .illustrated-screen,
  .card > .choice-layout{
    height:545px;
    min-height:0;
  }
  h2{font-size:42px;line-height:1.04;letter-spacing:-.042em;font-weight:560}
  h2:after{width:68px;margin-top:18px}

  /* Základní údaje + rezerva: skutečný dvousloupec, ne malé prvky v prázdném panelu */
  .step-1 .illustrated-screen,.step-3 .illustrated-screen{
    grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
    gap:44px;
    align-items:center;
  }
  .step-1 .screen-copy,.step-3 .screen-copy{padding-top:0}
  .step-1 .screen-copy h2,.step-3 .screen-copy h2{margin:0 0 28px}
  .step-1 .field,.step-3 .field{margin:17px 0}
  .step-1 input[type=number],.step-3 input[type=number]{width:300px}
  .step-1 .screen-art img{width:min(100%,360px);max-height:350px}
  .step-3 .screen-art img{width:min(100%,350px);max-height:350px}

  /* Časová mapa: využít šířku, ale držet kompaktní vertikální rytmus */
  .step-2 > h2{margin:40px 0 16px}
  .step-2 > p{margin:0 0 20px}
  .step-2 .horizon-field{margin:12px 0}
  .step-2 .horizon-field label{margin-bottom:5px}
  .step-2 .horizon-row{grid-template-columns:minmax(260px,1fr) 145px 24px;gap:13px}
  .step-2 .allocation{margin-top:16px}

  /* Plány a zkušenosti: výraznější titul, karty jako hlavní obsah, ilustrace jako partner */
  .step-4 .choice-layout,.step-5 .choice-layout{align-items:center}
  .step-4 .choice-main h2,.step-5 .choice-main h2{margin:0 0 18px}
  .step-4 .choice-main > .muted,.step-5 .choice-main > .muted{margin:0 0 15px}
  .step-4 .goals-grid{margin-top:14px;gap:9px}
  .step-4 .goals-grid .goal-card{min-height:88px}
  .step-4 .goals-layout .goals-art{padding:0}
  .step-4 .goals-layout .goals-art img{width:min(100%,300px)}
  .step-5 .experience-grid{margin-top:16px}
  .step-5 .experience-layout .choice-art{padding:0}
  .step-5 .experience-layout .choice-art img{width:min(100%,310px)}

  /* Úvod – stejná hlavička/patička, výraznější hero bez skákání rámu */
  .step-0 > h1{font-size:52px;margin:92px 0 24px;max-width:720px}
  .step-0 > p{font-size:16px}
}

/* v1.15 – lepší čitelnost zvýrazněného textu v obsahu */
@media (min-width:701px){
  .field label{font-size:14px}
  .goals-grid .goal-card strong{font-size:13.5px}
  .experience-grid .option-card strong{font-size:14px}
  .option-card strong{font-size:15px}
  .horizon-field label{font-size:14px}
}


/* v1.16 – T1: fyzická práce s kapitálem v našem vizuálním jazyce */
@media (min-width:701px){
  .step-6 .test-head{padding-top:28px;max-width:790px}
  .step-6 .test-head h2{margin:0 0 14px;font-size:42px}
  .step-6 .test-head .muted{font-size:14px;line-height:1.55;max-width:760px;margin:0}
  .cash-test{height:300px;margin-top:25px;display:grid;grid-template-columns:1fr 86px 1fr;gap:14px;align-items:stretch}
  .cash-zone{border:1px solid rgba(143,168,181,.22);border-radius:20px;padding:18px 18px 14px;background:rgba(13,24,29,.62);position:relative;overflow:hidden;transition:.2s ease}
  .cash-zone:hover{border-color:rgba(220,232,238,.34)}
  .cash-zone-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:12px}
  .cash-zone-head span{font:700 10px/1.2 Montserrat,Arial,sans-serif;letter-spacing:.14em;color:#8fa8b5}
  .cash-zone-head strong{font:650 20px/1 Montserrat,Arial,sans-serif;color:#f5f7f8;white-space:nowrap}
  .keep-zone .cash-zone-head strong{color:#dce8ee}.loss-zone .cash-zone-head strong{color:#dce8ee}
  .cash-pile{height:185px;position:relative;margin:8px 0 0;display:flex;align-items:flex-end;justify-content:center}
  .cash-bundle{position:absolute;width:108px;height:54px;border:0;background:transparent;padding:0;cursor:grab;transition:transform .16s ease,filter .16s ease;filter:drop-shadow(0 7px 8px rgba(0,0,0,.24))}
  .cash-bundle:active{cursor:grabbing}.cash-bundle:hover{transform:translateY(-5px) rotate(-1deg);z-index:30!important;filter:drop-shadow(0 10px 12px rgba(0,0,0,.32))}
  .cash-bundle:nth-child(5n+1){margin-left:-38px}.cash-bundle:nth-child(5n+2){margin-left:38px}.cash-bundle:nth-child(5n+3){margin-left:-18px}.cash-bundle:nth-child(5n+4){margin-left:22px}.cash-bundle:nth-child(5n){margin-left:0}
  .cash-bundle:nth-child(1){bottom:7px;z-index:1}.cash-bundle:nth-child(2){bottom:13px;z-index:2}.cash-bundle:nth-child(3){bottom:19px;z-index:3}.cash-bundle:nth-child(4){bottom:25px;z-index:4}.cash-bundle:nth-child(5){bottom:31px;z-index:5}.cash-bundle:nth-child(6){bottom:37px;z-index:6}.cash-bundle:nth-child(7){bottom:43px;z-index:7}.cash-bundle:nth-child(8){bottom:49px;z-index:8}.cash-bundle:nth-child(9){bottom:55px;z-index:9}.cash-bundle:nth-child(10){bottom:61px;z-index:10}.cash-bundle:nth-child(11){bottom:67px;z-index:11}.cash-bundle:nth-child(12){bottom:73px;z-index:12}.cash-bundle:nth-child(13){bottom:79px;z-index:13}.cash-bundle:nth-child(14){bottom:85px;z-index:14}.cash-bundle:nth-child(15){bottom:91px;z-index:15}.cash-bundle:nth-child(16){bottom:97px;z-index:16}.cash-bundle:nth-child(17){bottom:103px;z-index:17}.cash-bundle:nth-child(18){bottom:109px;z-index:18}.cash-bundle:nth-child(19){bottom:115px;z-index:19}.cash-bundle:nth-child(20){bottom:121px;z-index:20}
  .note{position:absolute;left:8px;right:8px;height:38px;border-radius:6px;border:1.5px solid #dce8ee;background:#17272e;transform:skewY(-2deg)}
  .note-back{top:10px;left:14px;right:2px;opacity:.55}.note-mid{top:6px;left:10px;right:5px;background:#20343d;opacity:.82}.note-front{top:2px;background:#dce8ee;border-color:#dce8ee;display:flex;align-items:center;padding:0 9px;gap:8px}
  .note-front:before{content:"";width:18px;height:18px;border:2px solid #8fa8b5;border-radius:50%}
  .note-mark{font:800 10px/1 Montserrat,Arial,sans-serif;color:#132128;background:#c9f20a;border-radius:4px;padding:4px 5px}
  .note-lines{height:12px;flex:1;border-top:2px solid #8fa8b5;border-bottom:2px solid #8fa8b5;opacity:.7}
  .loss-zone .note-front{background:#a9bac2;border-color:#c8d5da}.loss-zone .note-mark{background:#8fa8b5;color:#132128}.loss-zone .cash-bundle{opacity:.82}
  .cash-transfer{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#c9f20a;text-align:center;gap:8px}
  .cash-transfer span{font:300 36px/1 Montserrat,Arial,sans-serif}.cash-transfer small{font:700 8px/1.35 Montserrat,Arial,sans-serif;letter-spacing:.12em;color:#8fa8b5}
  .cash-caption{text-align:center;font:600 11px/1.2 Montserrat,Arial,sans-serif;color:#8fa8b5;margin-top:-2px}.cash-caption b{color:#dce8ee;font-size:14px;margin-right:4px}
  .cash-empty{align-self:center;margin-top:35px;border:1px dashed rgba(143,168,181,.35);border-radius:12px;padding:16px 20px;color:#708995;font:600 10px/1.4 Montserrat,Arial,sans-serif;text-align:center;max-width:170px}
}
@media(max-width:700px){
 .cash-test{display:grid;gap:10px;margin-top:18px}.cash-transfer{transform:rotate(90deg);height:34px}.cash-transfer small{display:none}.cash-zone{min-height:205px;padding:14px}.cash-pile{height:125px}.cash-bundle{transform:scale(.8);transform-origin:center bottom}.cash-bundle:hover{transform:scale(.8) translateY(-4px)}
}

/* v1.17 – T2: oboustranná investiční páka */
@media (min-width:701px){
  .step-7 .rr-head{padding-top:22px;max-width:820px}
  .step-7 .rr-head h2{margin:0 0 12px;font-size:40px}
  .step-7 .rr-head .muted{margin:0;max-width:760px;font-size:14px;line-height:1.5}
  .rr-stage{height:326px;margin-top:17px;position:relative;border:1px solid rgba(143,168,181,.18);border-radius:22px;background:radial-gradient(circle at 50% 58%,rgba(201,242,10,.045),transparent 31%),rgba(13,24,29,.38);overflow:hidden}
  .rr-stage:before{content:"";position:absolute;left:50%;top:76px;bottom:42px;width:1px;background:linear-gradient(transparent,rgba(143,168,181,.22),transparent)}
  .rr-outcome{position:absolute;top:25px;width:245px;padding:14px 16px;border-radius:15px;border:1px solid rgba(143,168,181,.22);background:rgba(10,19,23,.76)}
  .rr-loss{left:24px}.rr-growth{right:24px}
  .rr-outcome span,.rr-capital span{display:block;font:700 9px/1.2 Montserrat,Arial,sans-serif;letter-spacing:.14em;color:#8fa8b5;margin-bottom:7px}
  .rr-outcome strong{display:block;font:650 24px/1 Montserrat,Arial,sans-serif;color:#eef4f6;letter-spacing:-.035em}
  .rr-outcome small{display:block;margin-top:7px;font:700 13px/1 Montserrat,Arial,sans-serif;color:#a8bbc4}
  .rr-growth{border-color:rgba(201,242,10,.25)}.rr-growth small{color:#c9f20a}
  .rr-capital{position:absolute;left:50%;top:31px;transform:translateX(-50%);text-align:center;width:220px}
  .rr-capital strong{font:650 18px/1 Montserrat,Arial,sans-serif;color:#f5f7f8;white-space:nowrap}
  .rr-lever-wrap{position:absolute;left:84px;right:84px;top:160px;height:110px}
  .rr-lever{position:absolute;left:0;right:0;top:23px;height:36px;transform:rotate(var(--tilt));transform-origin:50% 50%;transition:transform .08s linear;z-index:3}
  .rr-lever-line{position:absolute;left:0;right:0;top:16px;height:5px;border-radius:5px;background:linear-gradient(90deg,#91a9b4 0%,#dce8ee 48%,#dce8ee 52%,#c9f20a 100%);box-shadow:0 0 18px rgba(201,242,10,.07)}
  .rr-lever-line:before,.rr-lever-line:after{content:"";position:absolute;top:-5px;width:14px;height:14px;border:2px solid #dce8ee;border-radius:50%;background:#132128}.rr-lever-line:before{left:-4px}.rr-lever-line:after{right:-4px;border-color:#c9f20a}
  .rr-handle{position:absolute;top:0;width:34px;height:34px;transform:translateX(-50%);pointer-events:none;transition:left .06s linear}
  .rr-handle span{display:block;width:30px;height:30px;border-radius:50%;background:#c9f20a;border:4px solid #f0f5f6;box-shadow:0 4px 18px rgba(0,0,0,.38),0 0 20px rgba(201,242,10,.16)}
  .rr-pivot{position:absolute;left:50%;top:50px;transform:translateX(-50%);width:86px;height:58px;z-index:2;overflow:hidden}
  .rr-pivot:before{content:"";position:absolute;left:12px;right:12px;top:0;height:62px;background:#17272e;border:1px solid #8fa8b5;clip-path:polygon(50% 0,100% 100%,0 100%)}
  .rr-pivot i{position:absolute;left:50%;top:0;transform:translate(-50%,-2px);width:15px;height:15px;border-radius:50%;background:#c9f20a;border:3px solid #dce8ee;z-index:2}
  .rr-range{position:absolute;left:-8px;right:-8px;top:12px;width:calc(100% + 16px);height:54px;opacity:0;cursor:ew-resize;z-index:5}
  .rr-scale{position:absolute;left:83px;right:83px;bottom:19px;display:flex;justify-content:space-between;font:700 8px/1 Montserrat,Arial,sans-serif;letter-spacing:.12em;color:#708995}
}
@media(max-width:700px){
 .rr-stage{margin-top:15px;padding:14px;border:1px solid rgba(143,168,181,.18);border-radius:18px}.rr-outcome{display:inline-block;width:48%;vertical-align:top}.rr-outcome strong{font-size:18px}.rr-lever-wrap{position:relative;height:100px;margin:30px 25px 0}.rr-lever-line{height:4px;background:#dce8ee}.rr-range{width:100%}.rr-capital{text-align:center;margin:15px 0}.rr-scale{display:flex;justify-content:space-between;font-size:9px;color:#708995}
}

/* v1.18 – T2: rozevírací rozpětí */
@media (min-width:701px){
 .step-7 .rr-head,.step-9 .rr-head{padding-top:22px;max-width:850px}
 .step-7 .rr-head h2,.step-9 .rr-head h2{margin:0 0 12px;font-size:40px}
 .rr-spread-stage{height:326px;margin-top:17px;position:relative;border:1px solid rgba(143,168,181,.18);border-radius:22px;background:radial-gradient(circle at 50% 51%,rgba(201,242,10,.045),transparent 31%),rgba(13,24,29,.38);overflow:hidden}
 .rr-axis{position:absolute;left:58px;right:58px;top:44px;height:225px}
 .rr-axis:before{content:"";position:absolute;left:7%;right:7%;top:112px;height:2px;background:rgba(220,232,238,.22)}
 .rr-band{position:absolute;top:108px;height:10px;transition:width .07s linear;box-shadow:0 0 18px rgba(201,242,10,.04)}
 .rr-band-loss{right:50%;width:var(--spread);border-radius:10px 0 0 10px;background:linear-gradient(90deg,rgba(143,168,181,.34),#dce8ee)}
 .rr-band-growth{left:50%;width:var(--spread);border-radius:0 10px 10px 0;background:linear-gradient(90deg,#dce8ee,#c9f20a)}
 .rr-center{position:absolute;left:50%;top:71px;transform:translateX(-50%);width:180px;text-align:center;z-index:4}
 .rr-center i{display:block;margin:28px auto 8px;width:15px;height:15px;border-radius:50%;background:#c9f20a;border:3px solid #eef4f6;box-shadow:0 0 0 6px rgba(201,242,10,.08)}
 .rr-center span,.rr-bound span{display:block;font:700 8px/1.2 Montserrat,Arial,sans-serif;letter-spacing:.13em;color:#8fa8b5}
 .rr-center strong{display:block;margin-top:5px;font:650 17px/1 Montserrat,Arial,sans-serif;color:#f5f7f8;white-space:nowrap}
 .rr-bound{position:absolute;top:10px;width:176px;padding:13px 14px;border-radius:14px;background:rgba(10,19,23,.9);border:1px solid rgba(143,168,181,.22);z-index:5;transition:left .07s linear,right .07s linear;box-shadow:0 10px 25px rgba(0,0,0,.12)}
 .rr-bound-loss{right:calc(50% + var(--spread) - 87px)}
 .rr-bound-growth{left:calc(50% + var(--spread) - 87px);border-color:rgba(201,242,10,.28)}
 .rr-bound:after{content:"";position:absolute;left:50%;top:100%;height:43px;width:1px;background:rgba(220,232,238,.26)}
 .rr-bound i{position:absolute;left:50%;top:96px;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#132128;border:2px solid #dce8ee;z-index:6}
 .rr-bound-growth i{border-color:#c9f20a;background:#c9f20a;box-shadow:0 0 0 6px rgba(201,242,10,.10)}
 .rr-bound strong{display:block;margin-top:5px;font:650 21px/1 Montserrat,Arial,sans-serif;color:#eef4f6;letter-spacing:-.03em}
 .rr-bound small{display:block;margin-top:6px;font:700 12px/1 Montserrat,Arial,sans-serif;color:#a8bbc4}.rr-bound-growth small{color:#c9f20a}
 .rr-bound-growth b{position:absolute;right:-8px;top:88px;font:500 18px/1 Arial;color:#c9f20a;background:#132128;border:1px solid rgba(201,242,10,.35);width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
 .rr-spread-input{position:absolute;left:50%;top:79px;width:47%;height:72px;opacity:0;cursor:ew-resize;z-index:10}
 .rr-spread-caption{position:absolute;left:70px;right:70px;bottom:20px;display:flex;align-items:center;justify-content:space-between;font:700 8px/1 Montserrat,Arial,sans-serif;letter-spacing:.12em;color:#708995}
 .rr-spread-caption em{font:600 10px/1 Montserrat,Arial,sans-serif;letter-spacing:0;color:#a8bbc4;font-style:normal}
}
@media(max-width:700px){
 .rr-spread-stage{padding:20px 14px;height:300px}.rr-axis{position:relative;height:210px}.rr-center{position:absolute;left:50%;top:70px;transform:translateX(-50%);text-align:center}.rr-bound{position:absolute;top:5px;width:145px}.rr-bound-loss{left:0}.rr-bound-growth{right:0}.rr-bound strong{font-size:16px}.rr-band{top:120px}.rr-spread-caption{display:flex;justify-content:space-between;font-size:8px}.rr-spread-caption em{display:none}
}

/* v1.22 — T3: animated realised drawdown + verbal reaction scored internally 1–10 */
.step-8 .test-head{margin-bottom:10px}
.step-8 .test-head h2{margin-bottom:10px}
.crash-stage{position:relative;height:405px;display:grid;grid-template-rows:230px 1fr;gap:10px;align-content:start}
.crash-chart{position:relative;height:230px;border:1px solid rgba(188,211,220,.18);border-radius:18px;background:linear-gradient(180deg,rgba(130,157,169,.055),rgba(255,255,255,.012));overflow:hidden}
.crash-grid{position:absolute;inset:0;background-image:linear-gradient(to bottom,transparent 24%,rgba(188,211,220,.08) 25%,transparent 26%,transparent 49%,rgba(188,211,220,.08) 50%,transparent 51%,transparent 74%,rgba(188,211,220,.08) 75%,transparent 76%),linear-gradient(to right,transparent 19.7%,rgba(188,211,220,.045) 20%,transparent 20.3%,transparent 39.7%,rgba(188,211,220,.045) 40%,transparent 40.3%,transparent 59.7%,rgba(188,211,220,.045) 60%,transparent 60.3%,transparent 79.7%,rgba(188,211,220,.045) 80%,transparent 80.3%)}
.crash-chart svg{position:absolute;left:26px;right:26px;top:28px;width:calc(100% - 52px);height:165px;overflow:visible}
.crash-line{fill:none;stroke:#d9f13b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(217,241,59,.13));stroke-dasharray:2000;stroke-dashoffset:2000}
.crash-start,.crash-end{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px}.crash-start{left:24px;top:17px}.crash-end{right:24px;bottom:14px;text-align:right;opacity:.45;transition:opacity .35s ease}.crash-start span,.crash-end span{font:700 10px/1.2 Montserrat,Arial,sans-serif;letter-spacing:.12em;color:#91a8b2}.crash-start strong,.crash-end strong{font:700 18px/1.2 Montserrat,Arial,sans-serif;color:#f5f8f9}.crash-end small{font:700 12px/1.2 Montserrat,Arial,sans-serif;color:#c8d5da;margin-top:2px}.crash-stage.played .crash-end{opacity:1}.crash-dot{position:absolute;width:13px;height:13px;border:3px solid #d9f13b;border-radius:50%;background:#0b151a;left:calc(100% - 49px);top:157px;opacity:0;transition:opacity .25s ease}.crash-stage.played .crash-dot{opacity:1}
.reaction-panel{opacity:0;transform:translateY(8px);pointer-events:none;transition:.4s .18s ease}.crash-stage.played .reaction-panel{opacity:1;transform:none;pointer-events:auto}.reaction-question{font:700 14px/1.3 Montserrat,Arial,sans-serif;color:#f2f6f7;margin:0 0 9px}.reaction-options{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.reaction-option{min-height:70px;padding:10px 9px;border:1px solid rgba(188,211,220,.18);border-radius:13px;background:rgba(255,255,255,.025);color:#dce7eb;font:600 10.5px/1.35 Montserrat,Arial,sans-serif;text-align:left;cursor:pointer;position:relative;transition:.18s ease}.reaction-option:hover{border-color:rgba(217,241,59,.5);background:rgba(217,241,59,.035)}.reaction-option i{position:absolute;right:9px;top:9px;width:10px;height:10px;border:1px solid #829aa4;border-radius:50%}.reaction-option.selected{border-color:#d9f13b;background:rgba(217,241,59,.055)}.reaction-option.selected i{border-color:#d9f13b;background:#d9f13b;box-shadow:inset 0 0 0 2px #0b151a}
@media(max-width:700px){.crash-stage{height:auto;grid-template-rows:210px auto}.reaction-options{grid-template-columns:1fr}.reaction-option{min-height:50px}.crash-chart svg{left:18px;right:18px;width:calc(100% - 36px)}}

.crash-replay{position:absolute;right:18px;top:16px;z-index:4;opacity:0;pointer-events:none;border:1px solid rgba(188,211,220,.22);border-radius:999px;background:rgba(7,17,22,.72);color:#aebfc6;padding:7px 11px;font:700 9px/1 Montserrat,Arial,sans-serif;letter-spacing:.08em;cursor:pointer;transition:.2s ease;backdrop-filter:blur(6px)}
.crash-stage.played .crash-replay{opacity:1;pointer-events:auto}.crash-replay:hover{border-color:#d9f13b;color:#d9f13b}

/* v1.24 — T3 market-style chart path + true replay redraw */

/* v1.25 — cleaner investment-chart substrate; no contextual reassurance */
.crash-grid{inset:28px 26px 34px 62px;background-image:linear-gradient(to bottom,rgba(188,211,220,.11) 1px,transparent 1px),linear-gradient(to right,rgba(188,211,220,.065) 1px,transparent 1px);background-size:100% 25%,20% 100%;border-left:1px solid rgba(188,211,220,.12);border-bottom:1px solid rgba(188,211,220,.12)}
.crash-ylabels{position:absolute;z-index:1;left:13px;top:29px;bottom:34px;width:43px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:#657d87;font:600 8px/1 Montserrat,Arial,sans-serif}
.crash-xlabels{position:absolute;z-index:1;left:62px;right:26px;bottom:12px;display:flex;justify-content:space-between;color:#657d87;font:600 8px/1 Montserrat,Arial,sans-serif}
.crash-chart svg{left:62px;right:26px;top:28px;width:calc(100% - 88px);height:165px}
.crash-line{stroke-width:2.4;stroke-linecap:butt;stroke-linejoin:miter;filter:none}
.crash-start{left:72px;top:12px;background:rgba(11,21,26,.82);padding:5px 7px;border-radius:7px}.crash-end{right:34px;top:12px;bottom:auto;background:rgba(11,21,26,.86);padding:5px 7px;border-radius:7px}
.crash-start span,.crash-end span{font-size:8px}.crash-start strong,.crash-end strong{font-size:16px}
.crash-dot{left:calc(100% - 38px);top:181px;width:10px;height:10px;border-width:2px}
.step-8 .reaction-panel{padding-top:3px}
@media(max-width:700px){.crash-ylabels{display:none}.crash-grid{left:18px}.crash-xlabels{left:18px}.crash-chart svg{left:18px;right:18px;width:calc(100% - 36px)}}

/* v1.26 — T3 composition: reactions lower; less mechanically linear market path */
.step-8 .reaction-panel{padding-top:20px}
.step-8 .reaction-question{margin-bottom:11px}

/* v1.28 — T3: initial animation fix + separate replay/current-value zones */
.crash-end{right:34px;top:66px;bottom:auto}
.crash-replay{right:18px;top:16px}
/* v1.29 — T2B as a distinct reverse-framing choice directly after T2A */
.rr-choice-head{margin-bottom:14px}
.rr-choice-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:8px}
.rr-choice{min-width:0;background:#101c21;border:1px solid #29404a;border-radius:14px;padding:13px 10px 12px;color:#eef5f7;text-align:left;cursor:pointer;transition:.18s ease;position:relative}
.rr-choice:hover{border-color:#617985;transform:translateY(-1px)}
.rr-choice.selected{border-color:#c9f20a;box-shadow:inset 0 0 0 1px #c9f20a}
.rr-choice.selected:after{content:'✓';position:absolute;right:9px;top:8px;color:#c9f20a;font-weight:800}
.rr-choice-name{display:block;font-size:10px;letter-spacing:.12em;color:#9db0b8;font-weight:800;margin-bottom:14px}
.rr-choice-track{height:18px;display:flex;align-items:center;justify-content:center;margin:0 0 15px;overflow:hidden}
.rr-choice-track b{width:4px;height:18px;border-radius:3px;background:#e7f0f3;flex:0 0 4px}
.rr-choice-track i{display:block;height:3px;max-width:44%;position:relative}
.rr-choice-track i.loss{background:#78909b;margin-left:auto}.rr-choice-track i.gain{background:#c9f20a;margin-right:auto}
.rr-choice-values{display:grid;gap:11px}.rr-choice-values span{display:block}.rr-choice-values small{display:block;color:#7f959e;font-size:8px;font-weight:800;letter-spacing:.06em;margin-bottom:3px}.rr-choice-values strong{display:block;font-size:13px;white-space:nowrap}.rr-choice-values em{font-style:normal;color:#aebfc6;font-size:10px}
@media(max-width:760px){.rr-choice-grid{grid-template-columns:1fr 1fr}.rr-choice:last-child{grid-column:1/-1}}

/* v1.30 — T2A restored explicitly before T2B */
.test-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--lime,#d5f52a);margin:0 0 7px;text-transform:uppercase}

/* v1.34 — T2B: visual risk/reward selection instead of dense cards */
.step-8 .rr-choice-head{margin-bottom:12px}
.rr-visual-list{margin-top:10px;display:grid;gap:7px}
.rr-visual-guide{display:grid;grid-template-columns:180px 1fr 180px;align-items:end;padding:0 42px 2px;color:#78909a;font:800 8px/1.2 Montserrat,Arial,sans-serif;letter-spacing:.09em;text-align:center}
.rr-visual-guide span:first-child{text-align:right;padding-right:18px}.rr-visual-guide span:last-child{text-align:left;padding-left:18px}
.rr-visual-option{position:relative;display:grid;grid-template-columns:180px minmax(260px,1fr) 180px;align-items:center;min-height:62px;width:100%;padding:8px 42px;border:1px solid #263a43;border-radius:13px;background:#0f1a1f;color:#edf4f6;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease;text-align:left}
.rr-visual-option:hover{border-color:#536d78;background:#111f25}
.rr-visual-option.selected{border-color:#c9f20a;background:#111f23;box-shadow:inset 0 0 0 1px rgba(201,242,10,.35)}
.rr-side{display:flex;align-items:baseline;gap:8px;min-width:0;font-variant-numeric:tabular-nums}.rr-side strong{font:700 14px/1.1 Montserrat,Arial,sans-serif;white-space:nowrap}.rr-side small{font:600 10px/1 Montserrat,Arial,sans-serif;color:#8ca1aa;white-space:nowrap}.rr-side-loss{justify-content:flex-end;padding-right:18px}.rr-side-gain{justify-content:flex-start;padding-left:18px}
.rr-visual-track{height:20px;display:flex;align-items:center;justify-content:center;position:relative}.rr-arm{height:3px;display:block;position:absolute;top:9px}.rr-arm:after{content:'';position:absolute;top:-3px;width:8px;height:8px;border-radius:50%}.rr-arm-loss{right:50%;background:#758d98}.rr-arm-loss:after{left:-2px;background:#758d98}.rr-arm-gain{left:50%;background:#b9d532}.rr-arm-gain:after{right:-2px;background:#b9d532}.rr-origin{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:3px;height:17px;border-radius:3px;background:#edf4f6;z-index:2}
.rr-base{position:absolute;left:50%;top:39px;transform:translateX(-50%);font:600 9px/1 Montserrat,Arial,sans-serif;color:#7f949d;white-space:nowrap;font-variant-numeric:tabular-nums}
.rr-pick{position:absolute;right:15px;top:50%;transform:translateY(-50%) scale(.75);width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#c9f20a;color:#071116;font:900 12px/1 Montserrat,Arial,sans-serif;opacity:0;transition:.16s ease}.rr-visual-option.selected .rr-pick{opacity:1;transform:translateY(-50%) scale(1)}
@media(max-width:760px){.rr-visual-guide{display:none}.rr-visual-option{grid-template-columns:1fr 1fr;padding:12px 38px 12px 12px;gap:30px;min-height:92px}.rr-visual-track{position:absolute;left:18px;right:44px;top:42px}.rr-base{top:60px}.rr-side-loss{justify-content:flex-start;padding:0}.rr-side-gain{justify-content:flex-end;padding:0}.rr-side{display:grid;gap:2px}.rr-side-gain{text-align:right}}

/* v1.38 — monthly-return visualization for the myopic-loss-aversion screen */
.mla-instruction{margin:8px 0 16px;color:var(--muted);font-size:15px}
.monthly-chart{display:grid;gap:9px;margin:8px 0 12px;padding:10px 12px 8px;border:1px solid rgba(137,160,171,.22);border-radius:16px;background:rgba(6,16,21,.22)}
.year-strip{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:8px;min-width:0}
.year-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.month-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:92px;gap:4px;min-width:0}
.month-bar{position:relative;min-width:0;height:92px}
.bar-zero{position:absolute;left:0;right:0;top:46px;height:1px;background:rgba(137,160,171,.30)}
.bar-column{position:absolute;left:50%;width:62%;max-width:22px;min-width:5px;transform:translateX(-50%);background:#8ea5af;border-radius:2px}
.bar-column.up{bottom:46px}
.bar-column.down{top:47px;background:#708791}
.bar-value{position:absolute;left:50%;transform:translateX(-50%);font-size:8px;font-weight:700;line-height:1;white-space:nowrap;color:#c8d3d7;letter-spacing:-.02em}
.bar-value.positive{top:1px}.bar-value.negative{bottom:1px}
.mla-choices{margin-top:14px;margin-bottom:8px}
.step-11 .nav{margin-top:18px}
@media(max-width:700px){.monthly-chart{overflow-x:auto}.year-strip{min-width:650px}.bar-value{font-size:8px}.mla-choices{grid-template-columns:repeat(5,1fr)}}

/* v1.39 — one continuous, readable 36-month return chart */
.step-11 .mla-instruction{margin:6px 0 12px}
.step-11 .monthly-chart{display:block;margin:4px 0 10px;padding:0;border:0;border-radius:0;background:transparent;overflow:visible}
.step-11 .monthly-plot{position:relative;height:250px;margin:0 4px 2px;padding:18px 16px 32px 42px;border:1px solid rgba(137,160,171,.16);border-radius:14px;background:rgba(6,16,21,.14);overflow:hidden}
.step-11 .month-bars{position:absolute;left:48px;right:16px;top:18px;height:190px;display:grid;grid-template-columns:repeat(36,minmax(0,1fr));gap:2px;overflow:visible}
.step-11 .month-bar{position:relative;height:190px;min-width:0}
.step-11 .bar-column{position:absolute;left:50%;width:54%;max-width:10px;min-width:4px;transform:translateX(-50%);border-radius:2px;background:#91a7b0}
.step-11 .bar-column.up{bottom:95px}
.step-11 .bar-column.down{top:96px;background:#738a94}
.step-11 .bar-value{position:absolute;left:50%;z-index:3;transform:translateX(-50%) rotate(-58deg);transform-origin:center;white-space:nowrap;font:700 7px/1 Montserrat,Arial,sans-serif;color:#c7d3d8;letter-spacing:-.01em;opacity:.92}
.step-11 .bar-value.positive{bottom:calc(99px + var(--h))}
.step-11 .bar-value.negative{top:calc(101px + var(--h))}
.step-11 .return-guide{position:absolute;left:48px;right:16px;height:1px;background:rgba(137,160,171,.10);z-index:0}
.step-11 .return-guide span{position:absolute;right:calc(100% + 7px);top:-4px;width:30px;text-align:right;font:600 7px/1 Montserrat,Arial,sans-serif;color:#617983}
.step-11 .guide-plus{top:35px}.step-11 .guide-zero{top:113px;background:rgba(181,201,209,.30)}.step-11 .guide-minus{top:191px}
.step-11 .year-divider{position:absolute;top:18px;bottom:32px;width:1px;background:rgba(137,160,171,.14);z-index:0}
.step-11 .year-divider-1{left:calc(48px + (100% - 64px)/3)}
.step-11 .year-divider-2{left:calc(48px + 2*(100% - 64px)/3)}
.step-11 .year-names{position:absolute;left:48px;right:16px;bottom:9px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font:800 8px/1 Montserrat,Arial,sans-serif;letter-spacing:.12em;color:#718892}
.step-11 .mla-choices{margin-top:8px;margin-bottom:6px}
.step-11 .choice{min-height:42px}
.step-11 .nav{margin-top:10px}
@media(max-width:700px){.step-11 .monthly-chart{overflow-x:auto}.step-11 .monthly-plot{min-width:760px}.step-11 .bar-value{font-size:7px}}

/* v1.40 — improve legibility and visual breathing room on monthly-return screen */
.step-11 .mla-instruction{margin:6px 0 16px}
.step-11 .monthly-chart{margin:4px 0 0}
.step-11 .monthly-plot{height:272px;padding-top:20px;padding-bottom:34px}
.step-11 .month-bars{top:20px;height:202px;gap:3px}
.step-11 .month-bar{height:202px}
.step-11 .bar-column{width:48%;max-width:9px;min-width:5px}
.step-11 .bar-column.up{bottom:101px}
.step-11 .bar-column.down{top:102px}
.step-11 .bar-value{font:700 9px/1 Montserrat,Arial,sans-serif;color:#d5dfe2;opacity:1;letter-spacing:-.025em;transform:translateX(-50%) rotate(-48deg)}
.step-11 .bar-value.positive{bottom:calc(106px + var(--h))}
.step-11 .bar-value.negative{top:calc(107px + var(--h))}
.step-11 .guide-plus{top:39px}
.step-11 .guide-zero{top:121px}
.step-11 .guide-minus{top:203px}
.step-11 .return-guide span{font-size:8px;color:#78909a}
.step-11 .year-divider{top:20px;bottom:34px}
.step-11 .year-names{bottom:10px;font-size:9px;color:#7f96a0}
.step-11 .mla-choices{margin-top:30px;margin-bottom:10px}
.step-11 .scale{margin-top:2px}
.step-11 .nav{margin-top:18px}
@media(max-width:700px){.step-11 .monthly-plot{min-width:820px}.step-11 .bar-value{font-size:9px}}

/* v1.41 — simplify monthly-return perception screen for non-expert users */
.step-11 .mla-instruction{margin:6px 0 20px}
.step-11 .monthly-plot{height:238px;padding-top:18px;padding-bottom:34px;background:rgba(6,16,21,.10)}
.step-11 .month-bars{top:18px;height:174px;gap:4px}
.step-11 .month-bar{height:174px}
.step-11 .bar-column{width:46%;max-width:9px;min-width:5px;border-radius:3px;background:#91a7b0}
.step-11 .bar-column.up{bottom:87px}
.step-11 .bar-column.down{top:88px;background:#738a94}
.step-11 .bar-value{font:700 11px/1 Montserrat,Arial,sans-serif;color:#e0e8eb;letter-spacing:-.02em;transform:translateX(-50%);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.step-11 .bar-value.positive{bottom:calc(92px + var(--h))}
.step-11 .bar-value.negative{top:calc(93px + var(--h))}
.step-11 .guide-plus{top:34px}
.step-11 .guide-zero{top:105px;background:rgba(181,201,209,.34)}
.step-11 .guide-minus{top:176px}
.step-11 .return-guide{background:rgba(137,160,171,.075)}
.step-11 .return-guide span{font-size:8px;color:#78909a}
.step-11 .year-divider{top:18px;bottom:34px;background:rgba(137,160,171,.10)}
.step-11 .year-names{bottom:10px;font-size:9px}
.step-11 .mla-choices{margin-top:42px;margin-bottom:12px}
.step-11 .scale{margin-top:4px}
.step-11 .nav{margin-top:24px}
@media(max-width:700px){.step-11 .monthly-plot{min-width:820px}.step-11 .bar-value{font-size:11px}}

/* v1.42 – context before MLA instruction */
.mla-context{margin:10px 0 4px;color:#d7e0e4;font-weight:600;line-height:1.45}
.mla-context + .mla-instruction{margin-top:0}

/* v1.43 — final MLA screen: the same 36 months aggregated into six half-years */
.step-12 .mla-instruction{margin:0 0 20px}
.step-12 .halfyear-chart{margin:6px 0 0}
.step-12 .halfyear-plot{position:relative;height:238px;padding:18px 34px 36px 48px;border:1px solid rgba(137,160,171,.16);border-radius:14px;background:rgba(6,16,21,.10)}
.step-12 .halfyear-zero{position:absolute;left:48px;right:34px;top:113px;height:1px;background:rgba(181,201,209,.34)}
.step-12 .halfyear-zero span{position:absolute;right:calc(100% + 8px);top:-4px;font:600 8px/1 Montserrat,Arial,sans-serif;color:#78909a}
.step-12 .halfyear-bars{position:absolute;left:62px;right:34px;top:18px;height:184px;display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.step-12 .halfyear-item{position:relative;height:184px;min-width:0}
.step-12 .halfyear-column{position:absolute;left:50%;width:38px;max-width:48%;transform:translateX(-50%);border-radius:5px;background:#91a7b0}
.step-12 .halfyear-column.up{bottom:89px}
.step-12 .halfyear-column.down{top:96px;background:#738a94}
.step-12 .halfyear-value{position:absolute;left:50%;z-index:2;transform:translateX(-50%);white-space:nowrap;font:800 14px/1 Montserrat,Arial,sans-serif;color:#e7eef0;font-variant-numeric:tabular-nums}
.step-12 .halfyear-value.positive{bottom:calc(96px + var(--h))}
.step-12 .halfyear-value.negative{top:calc(103px + var(--h))}
.step-12 .halfyear-name{position:absolute;left:50%;bottom:-25px;transform:translateX(-50%);white-space:nowrap;font:800 9px/1 Montserrat,Arial,sans-serif;letter-spacing:.08em;color:#7f96a0}
.step-12 .mla-choices{margin-top:42px;margin-bottom:12px}
.step-12 .scale{margin-top:4px}
.step-12 .nav{margin-top:24px}
@media(max-width:700px){.step-12 .halfyear-chart{overflow-x:auto}.step-12 .halfyear-plot{min-width:720px}.step-12 .halfyear-value{font-size:13px}}

/* v1.45 — finální výsledek: hero + diagnostika + report */
.step-13{display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding-top:34px;padding-bottom:34px}
.step-13 .result-final{width:100%;min-height:100%;padding:0 44px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.step-13 .result-final:before{display:none}
.result-hero{position:relative;width:430px;height:430px;flex:0 0 430px;display:grid;place-items:center}
.result-orbit{position:absolute;z-index:1;inset:0;border-radius:50%;border:1px solid rgba(201,240,42,.46);opacity:0;transform:scale(.84);animation:resultOrbit 1.65s cubic-bezier(.22,.8,.24,1) .12s forwards;box-shadow:inset 0 0 90px rgba(201,240,42,.018)}
.result-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%}
.result-kicker{margin:0 0 16px;color:#a8b7bd;text-transform:uppercase;letter-spacing:.20em;font:700 11px/1.2 Montserrat,Arial,sans-serif;opacity:0;animation:resultFade .55s ease .65s forwards}
.result-number{margin:0;color:var(--accent-bright);font:700 154px/.82 Montserrat,Arial,sans-serif;letter-spacing:-.075em;text-shadow:0 0 34px rgba(201,240,42,.08);opacity:0;transform:scale(.9);animation:resultNumber .72s cubic-bezier(.2,.9,.25,1.15) .92s forwards}
.result-lead{margin:30px 0 0;color:#eef3f4;font-size:15px;line-height:1.5;opacity:0;animation:resultFade .55s ease 2.18s forwards}
.result-below{width:min(100%,700px);display:flex;flex-direction:column;align-items:center;margin-top:30px}
.result-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(100%,590px);opacity:0;transform:translateY(10px);animation:resultMetrics .6s ease 2.65s forwards}
.result-metric{min-height:68px;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(143,168,181,.34);border-radius:999px;background:rgba(143,168,181,.055);color:#cbd6da;text-align:left}
.result-metric span{font-size:13px;line-height:1.25}.result-metric strong{color:#f2f6f7;font:700 15px/1 Montserrat,Arial,sans-serif;white-space:nowrap}
.result-summary{width:min(100%,620px);margin:26px 0 0;color:#b7c5ca;font-size:14px;line-height:1.62;opacity:0;transform:translateY(8px);animation:resultMetrics .6s ease 3.05s forwards}
.result-report{width:min(100%,650px);margin-top:28px;padding:22px 24px;border:1px solid rgba(143,168,181,.24);border-radius:20px;background:rgba(143,168,181,.035);opacity:0;transform:translateY(8px);animation:resultMetrics .6s ease 3.4s forwards}
.result-report-copy{display:flex;flex-direction:column;gap:7px;text-align:left}.result-report-copy strong{color:#f3f6f7;font:700 17px/1.25 Montserrat,Arial,sans-serif}.result-report-copy span{color:#91a4ac;font-size:13px;line-height:1.5}
.result-email-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:17px}.result-email{height:48px;border:1px solid rgba(143,168,181,.32);border-radius:999px;background:#0c171c;color:#f3f6f7;padding:0 18px;font:500 13px Manrope,Arial,sans-serif;outline:none}.result-email:focus{border-color:rgba(201,240,42,.7)}.result-report-btn{height:48px;white-space:nowrap}
.result-report-form{min-width:0}.result-consent{margin:10px 2px 0;color:#71868f;font-size:10.5px;line-height:1.45;text-align:left;text-wrap:pretty}.result-consent a{color:#9fb3bb;text-decoration:underline;text-underline-offset:2px}.result-consent a:hover{color:#c9f02a}.result-email-status{min-height:0;margin:6px 2px 0;font-size:10.5px;line-height:1.35;text-align:left}.result-email-status:empty{display:none}.result-email-status.error{color:#f3a8a8}.result-email-status.success{color:#c9f02a}.result-report-btn:disabled{opacity:.75;cursor:default}
@keyframes resultOrbit{0%{opacity:0;transform:scale(.84)}100%{opacity:1;transform:scale(1)}}@keyframes resultFade{to{opacity:1}}@keyframes resultNumber{to{opacity:1;transform:scale(1)}}@keyframes resultMetrics{to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.step-13{padding-top:22px}.step-13 .result-final{padding:0 18px}.result-hero{width:min(86vw,350px);height:min(86vw,350px);flex-basis:min(86vw,350px)}.result-number{font-size:116px}.result-lead{font-size:14px}.result-metrics{grid-template-columns:1fr;width:min(100%,360px)}.result-email-row{grid-template-columns:1fr}.result-report-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.result-orbit,.result-kicker,.result-number,.result-lead,.result-metrics,.result-summary,.result-report{animation:none!important;opacity:1;transform:none}}


/* v1.46 — final result fits into one desktop view, without inner scrollbars */
@media (min-width:701px){
  .step-13{
    overflow:hidden;
    padding:6px 0 0;
    align-items:flex-start;
  }
  .step-13 .result-final{
    width:100%;
    min-height:0;
    height:100%;
    padding:0 26px;
    justify-content:flex-start;
  }
  .result-hero{
    width:330px;
    height:330px;
    flex:0 0 330px;
  }
  .result-kicker{margin-bottom:11px;font-size:10px}
  .result-number{font-size:126px}
  .result-lead{margin-top:20px;font-size:13px;line-height:1.42}
  .result-below{
    width:min(100%,760px);
    margin-top:14px;
  }
  .result-metrics{
    width:min(100%,590px);
    gap:14px;
  }
  .result-metric{
    min-height:56px;
    padding:10px 18px;
  }
  .result-metric span{font-size:12px}
  .result-metric strong{font-size:14px}
  .result-summary{
    width:min(100%,680px);
    margin-top:14px;
    font-size:12.5px;
    line-height:1.5;
  }
  .result-report{
    width:min(100%,760px);
    margin-top:14px;
    padding:14px 18px;
    border-radius:17px;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(390px,1.35fr);
    gap:18px;
    align-items:center;
  }
  .result-report-copy{gap:4px}
  .result-report-copy strong{font-size:15px;line-height:1.2}
  .result-report-copy span{font-size:11.5px;line-height:1.4}
  .result-email-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    margin-top:0;
  }
  .result-email{height:42px;padding:0 15px;font-size:12px;min-width:0}
  .result-report-btn{height:42px;min-height:42px;padding:0 17px;font-size:10px}
}

/* v1.47 — airier final-result rhythm while keeping one-screen desktop layout */
@media (min-width:701px){
  .step-13{
    padding-top:18px;
  }
  .result-hero{
    transform:translateY(4px);
  }
  .result-below{
    margin-top:22px;
  }
  .result-summary{
    width:min(100%,610px);
    min-height:58px;
    margin-top:20px;
    font-size:12.5px;
    line-height:1.55;
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }
  .result-report{
    margin-top:30px;
  }
}

/* v1.48 — optical centering + slower final reveal */
@media (min-width:701px){
  .step-13{padding-top:58px}
  .result-hero{transform:none}
}
.step-13 .result-orbit{animation-duration:2.4s;animation-delay:.15s}
.step-13 .result-kicker{animation-delay:.85s}
.step-13 .result-number{animation-duration:.8s;animation-delay:1.05s}
.step-13 .result-lead{animation-delay:4.55s}
.step-13 .result-metrics{animation-delay:5.15s}
.step-13 .result-summary{animation-delay:5.65s}
.step-13 .result-report{animation-delay:6.1s}


/* v1.51 — final email capture + newsletter consent */
@media (min-width:701px){
  .result-report{align-items:start}
  .result-report-form{align-self:center}
  .result-consent{font-size:9.5px;line-height:1.35;margin-top:7px}
  .result-email-status{font-size:9.5px;margin-top:4px}
}
@media (max-width:700px){
  .result-consent{margin-top:11px;font-size:10.5px;line-height:1.5}
}

/* v1.52 — final report CTA: full-width consent line + live privacy-page link */
.result-report > .result-consent{width:100%}
@media (min-width:701px){
  .result-report{
    grid-template-columns:minmax(0,.9fr) minmax(390px,1.35fr);
    grid-template-areas:
      "copy form"
      "consent consent";
    row-gap:10px;
    column-gap:18px;
  }
  .result-report-copy{grid-area:copy}
  .result-report-form{grid-area:form}
  .result-report > .result-consent{
    grid-area:consent;
    margin:0;
    padding-top:9px;
    border-top:1px solid rgba(143,168,181,.16);
    font-size:9.5px;
    line-height:1.45;
    text-align:left;
  }
}
@media (max-width:700px){
  .result-report > .result-consent{
    margin-top:12px;
    padding-top:11px;
    border-top:1px solid rgba(143,168,181,.16);
  }
}

/* v1.53 – povinné dokončení každého kroku */
.btn.continue-btn:disabled,
.btn.continue-btn[aria-disabled="true"]{
  opacity:.34;
  cursor:not-allowed;
  transform:none;
  filter:saturate(.45);
  box-shadow:none;
}
.btn.continue-btn:disabled:hover{transform:none}
.loss-zero{
  display:block;
  margin:14px auto 0;
  padding:10px 16px;
  border:1px solid rgba(160,181,190,.28);
  border-radius:999px;
  background:transparent;
  color:#91a6af;
  font:600 11px/1.3 "Montserrat","Segoe UI",Arial,sans-serif;
  cursor:pointer;
}
.loss-zero:hover,.loss-zero.selected{border-color:#c9f02a;color:#d7f238;background:rgba(201,240,42,.06)}


/* ===== v1.57 – mobile QA based on real-device screenshots ===== */
@media (max-width:700px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  #app{
    display:block;
    width:100%;
    min-height:100svh;
  }
  .card{
    width:100%;
    max-width:100%;
    padding:78px 22px 30px;
  }
  .test-head h2,
  .rr-head h2{
    font-size:clamp(31px,8.8vw,38px);
    line-height:1.08;
    margin-top:4px;
  }
  .test-head .muted,
  .rr-head .muted{
    font-size:15px;
    line-height:1.65;
  }

  /* T1 – on desktop the banknote artwork lived inside a desktop-only rule.
     On mobile it therefore degraded to raw HTML buttons. Rebuild it as a
     touch-friendly 5-column banknote grid. */
  .step-6 .test-head{padding-top:0}
  .step-6 .cash-test{
    height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:20px;
  }
  .step-6 .cash-zone{
    min-height:0;
    padding:15px;
    border:1px solid rgba(143,168,181,.24);
    border-radius:18px;
    background:rgba(13,24,29,.58);
    overflow:hidden;
  }
  .step-6 .cash-zone-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding-bottom:11px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .step-6 .cash-zone-head span{
    font:700 9px/1.2 Montserrat,Arial,sans-serif;
    letter-spacing:.11em;
    color:#8fa8b5;
  }
  .step-6 .cash-zone-head strong{
    font:700 18px/1 Montserrat,Arial,sans-serif;
    color:#eef4f6;
    white-space:nowrap;
  }
  .step-6 .cash-pile{
    position:relative;
    height:auto;
    min-height:116px;
    margin:12px 0 8px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px;
    align-content:center;
  }
  .step-6 .cash-bundle{
    position:relative;
    inset:auto;
    width:100%;
    min-width:0;
    height:34px;
    margin:0!important;
    padding:0;
    border:0;
    background:transparent;
    transform:none!important;
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.22));
    cursor:pointer;
  }
  .step-6 .note{
    position:absolute;
    left:2px;
    right:2px;
    height:28px;
    border-radius:4px;
    border:1px solid #dce8ee;
    background:#17272e;
  }
  .step-6 .note-back{top:5px;left:6px;right:0;opacity:.45}
  .step-6 .note-mid{top:3px;left:4px;right:1px;background:#20343d;opacity:.75}
  .step-6 .note-front{
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:0 4px;
    background:#dce8ee;
    border-color:#dce8ee;
  }
  .step-6 .note-front:before{
    content:"";
    width:8px;height:8px;
    border:1px solid #8199a3;
    border-radius:50%;
    flex:0 0 auto;
  }
  .step-6 .note-mark{
    font:800 8px/1 Montserrat,Arial,sans-serif;
    color:#132128;
    background:#c9f20a;
    border-radius:3px;
    padding:3px;
  }
  .step-6 .note-lines{
    width:8px;
    height:7px;
    border-top:1px solid #8199a3;
    border-bottom:1px solid #8199a3;
    opacity:.75;
  }
  .step-6 .loss-zone .note-front{background:#a9bac2;border-color:#c8d5da}
  .step-6 .loss-zone .note-mark{background:#839ba5}
  .step-6 .cash-caption{
    text-align:center;
    color:#8fa8b5;
    font:600 11px/1.35 Montserrat,Arial,sans-serif;
  }
  .step-6 .cash-caption b{
    color:#e0e8eb;
    font-size:14px;
    margin-right:4px;
  }
  .step-6 .cash-empty{
    grid-column:1/-1;
    align-self:center;
    justify-self:center;
    margin:0;
    max-width:220px;
    padding:12px 15px;
    border:1px dashed rgba(143,168,181,.34);
    border-radius:11px;
    color:#708995;
    font:600 10px/1.4 Montserrat,Arial,sans-serif;
    text-align:center;
  }
  .step-6 .cash-transfer{
    height:28px;
    transform:none;
    display:grid;
    place-items:center;
  }
  .step-6 .cash-transfer span{
    transform:rotate(90deg);
    color:#c9f20a;
    font:300 30px/1 Montserrat,Arial,sans-serif;
  }
  .step-6 .cash-transfer small{display:none}
  .step-6 .loss-zero{
    margin:2px auto 0;
    max-width:100%;
    white-space:normal;
  }

  /* T2A – rebuild the range graphic for a narrow viewport instead of
     partially inheriting the desktop absolute positioning. */
  .step-7 .rr-spread-stage{
    position:relative;
    height:260px;
    margin-top:18px;
    padding:0;
    border:1px solid rgba(143,168,181,.20);
    border-radius:18px;
    background:rgba(13,24,29,.38);
    overflow:hidden;
  }
  .step-7 .rr-axis{
    position:absolute;
    left:18px;
    right:18px;
    top:18px;
    height:185px;
  }
  .step-7 .rr-axis:before{
    content:"";
    position:absolute;
    left:5%;
    right:5%;
    top:82px;
    height:2px;
    background:rgba(220,232,238,.30);
  }
  .step-7 .rr-band{
    position:absolute;
    top:78px;
    height:9px;
    transition:width .07s linear;
  }
  .step-7 .rr-band-loss{
    right:50%;
    width:var(--spread);
    border-radius:8px 0 0 8px;
    background:linear-gradient(90deg,rgba(143,168,181,.42),#dce8ee);
  }
  .step-7 .rr-band-growth{
    left:50%;
    width:var(--spread);
    border-radius:0 8px 8px 0;
    background:linear-gradient(90deg,#dce8ee,#c9f20a);
  }
  .step-7 .rr-band-growth:after{
    content:"";
    position:absolute;
    right:-8px;
    top:50%;
    width:17px;height:17px;
    transform:translateY(-50%);
    border-radius:50%;
    background:#c9f20a;
    box-shadow:0 0 0 3px rgba(201,242,10,.12);
  }
  .step-7 .rr-bound{
    position:absolute;
    top:0;
    width:44%;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .step-7 .rr-bound-loss{left:0!important;right:auto!important;text-align:left}
  .step-7 .rr-bound-growth{right:0!important;left:auto!important;text-align:right}
  .step-7 .rr-bound span,
  .step-7 .rr-center span{
    display:block;
    color:#8fa8b5;
    font:700 8px/1.2 Montserrat,Arial,sans-serif;
    letter-spacing:.09em;
  }
  .step-7 .rr-bound strong{
    display:block;
    margin-top:4px;
    color:#eef4f6;
    font:700 16px/1.05 Montserrat,Arial,sans-serif;
    letter-spacing:-.025em;
    white-space:nowrap;
  }
  .step-7 .rr-bound small{
    display:block;
    margin-top:4px;
    color:#a8bbc4;
    font:700 11px/1 Montserrat,Arial,sans-serif;
  }
  .step-7 .rr-bound-growth small{color:#c9f20a}
  .step-7 .rr-bound i,
  .step-7 .rr-bound b{display:none}
  .step-7 .rr-center{
    position:absolute;
    left:50%;
    top:105px;
    width:100%;
    transform:translateX(-50%);
    text-align:center;
  }
  .step-7 .rr-center i{display:none}
  .step-7 .rr-center strong{
    display:block;
    margin-top:4px;
    color:#f5f7f8;
    font:700 18px/1.1 Montserrat,Arial,sans-serif;
    white-space:nowrap;
  }
  .step-7 .rr-spread-input{
    position:absolute;
    left:50%;
    top:54px;
    width:48%;
    height:58px;
    opacity:0;
    z-index:10;
    cursor:ew-resize;
    touch-action:pan-y;
  }
  .step-7 .rr-spread-caption{
    position:absolute;
    left:18px;
    right:18px;
    bottom:16px;
    display:flex;
    justify-content:space-between;
    color:#81959e;
    font:700 8px/1 Montserrat,Arial,sans-serif;
    letter-spacing:.07em;
  }
  .step-7 .rr-spread-caption em{display:none}

  /* MLA – show the whole data set at once on mobile. Horizontal scrolling
     changed the experiment because users saw only one year / three half-years. */
  .step-11 .monthly-chart,
  .step-12 .halfyear-chart{
    overflow:visible!important;
    width:100%;
  }
  .step-11 .monthly-plot{
    min-width:0!important;
    width:100%;
    height:220px;
    margin:0;
    padding:16px 8px 32px 32px;
  }
  .step-11 .month-bars{
    left:34px;
    right:8px;
    top:16px;
    height:160px;
    gap:1px;
  }
  .step-11 .month-bar{height:160px}
  .step-11 .bar-column{
    width:46%;
    min-width:3px;
    max-width:6px;
  }
  .step-11 .bar-column.up{bottom:80px}
  .step-11 .bar-column.down{top:81px}
  .step-11 .return-guide{left:34px;right:8px}
  .step-11 .guide-plus{top:31px}
  .step-11 .guide-zero{top:96px}
  .step-11 .guide-minus{top:161px}
  .step-11 .return-guide span{
    right:calc(100% + 4px);
    width:24px;
    font-size:7px;
  }
  .step-11 .year-divider{top:16px;bottom:32px}
  .step-11 .year-divider-1{left:calc(34px + (100% - 42px)/3)}
  .step-11 .year-divider-2{left:calc(34px + 2*(100% - 42px)/3)}
  .step-11 .year-names{
    left:34px;
    right:8px;
    bottom:9px;
    font-size:8px;
  }

  .step-12 .halfyear-plot{
    min-width:0!important;
    width:100%;
    height:222px;
    padding:16px 8px 36px 34px;
  }
  .step-12 .halfyear-zero{
    left:36px;
    right:8px;
    top:104px;
  }
  .step-12 .halfyear-zero span{
    right:calc(100% + 5px);
    font-size:7px;
  }
  .step-12 .halfyear-bars{
    left:40px;
    right:8px;
    top:16px;
    height:168px;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px;
  }
  .step-12 .halfyear-item{height:168px}
  .step-12 .halfyear-column{
    width:min(24px,58%);
    max-width:none;
  }
  .step-12 .halfyear-column.up{bottom:80px}
  .step-12 .halfyear-column.down{top:89px}
  .step-12 .halfyear-value{
    font-size:11px;
  }
  .step-12 .halfyear-value.positive{bottom:calc(87px + var(--h))}
  .step-12 .halfyear-value.negative{top:calc(96px + var(--h))}
  .step-12 .halfyear-name{
    bottom:-24px;
    font-size:6.5px;
    letter-spacing:.025em;
  }

  /* Slightly tighter questionnaire rhythm on phones. */
  .step-11 .mla-choices,
  .step-12 .mla-choices{
    margin-top:28px;
  }
  .step-11 .choice,
  .step-12 .choice{
    min-height:48px;
  }

  /* Result: once navigation resets scroll to zero, keep the hero clear of
     the fixed product label and fit the beginning comfortably on screen. */
  .step-13{
    padding-top:50px;
  }
  .step-13 .result-final{
    padding:0 16px 28px;
  }
  .step-13 .result-hero{
    width:min(82vw,330px);
    height:min(82vw,330px);
    flex-basis:min(82vw,330px);
  }
  .step-13 .result-number{font-size:108px}
  .step-13 .result-below{margin-top:20px}
  .step-13 .result-metric{
    min-height:62px;
    padding:11px 18px;
  }
}

@media (max-width:380px){
  .step-6 .cash-pile{grid-template-columns:repeat(4,minmax(0,1fr))}
  .step-7 .rr-bound strong{font-size:14px}
  .step-12 .halfyear-name{font-size:6px}
}


/* ===== v1.58 – interaction clarity + monthly bar values ===== */
.cash-help{
  margin:10px 0 14px;
  color:#869ba4;
  font:500 12px/1.55 Manrope,Arial,sans-serif;
  text-wrap:pretty;
}
.cash-help strong{
  color:#cbd8dc;
  font-weight:700;
}

.step-11 .month-bar{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.step-11 .bar-value{
  display:none;
  pointer-events:none;
}
.step-11 .month-bar:hover .bar-value,
.step-11 .month-bar:focus-visible .bar-value,
.step-11 .month-bar.active .bar-value{
  display:block;
}
.step-11 .month-bar:focus-visible{
  outline:1px solid rgba(201,242,10,.55);
  outline-offset:2px;
  border-radius:4px;
}
.step-11 .month-bar.active .bar-column{
  background:#c9f20a;
}
.step-11 .month-bar.active .bar-column.down{
  background:#a8c725;
}
.monthly-help{
  margin:9px 2px 0;
  color:#748a94;
  font:500 10.5px/1.45 Manrope,Arial,sans-serif;
}
.monthly-help-mobile{display:none}

@media(max-width:700px){
  .cash-help{
    margin:12px 0 12px;
    padding:10px 12px;
    border:1px solid rgba(143,168,181,.20);
    border-radius:12px;
    background:rgba(143,168,181,.045);
    font-size:11.5px;
    line-height:1.5;
  }

  .monthly-help-desktop{display:none}
  .monthly-help-mobile{display:inline}
  .monthly-help{
    margin-top:8px;
    text-align:center;
    font-size:10.5px;
  }

  /* Value appears only for the bar the user taps, so all 36 months remain readable. */
  .step-11 .bar-value{
    z-index:5;
    font:700 8px/1 Montserrat,Arial,sans-serif;
    color:#eef4f5;
    text-shadow:0 1px 6px rgba(0,0,0,.65);
    white-space:nowrap;
  }
  .step-11 .bar-value.positive{
    bottom:calc(84px + var(--h));
  }
  .step-11 .bar-value.negative{
    top:calc(85px + var(--h));
  }
}